AngularJS : error : JSON.parse: unexpected character at line 1 column 1 of the JSON data

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา AngularJS : error : JSON.parse: unexpected character at line 1 column 1 of the JSON data

AngularJS : error : JSON.parse: unexpected character at line 1 column 1 of the JSON data

รูปตอนรันครับ

ลิ้ง : http://www.mx7.com/i/180/piB9Ey.png

index.html

<!DOCTYPE html>
<html ng-app="demoApp">

<head>
    <title> AngularJS Test Insert and Select Database</title>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
</head>

<body ng-cloak="">
    <div class="container" ng-view="" id="ng-view">
    </div>
    <!-- node-modules Angular -->
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <!-- bower_components Angular -->
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <!--script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script-->
    <!-- Angular Style custom code -->
    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/script.js"></script>
    <!-- Javascrtpt ohter -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--script type="text/javascript" src="node_modules/bootstrap/js/modal.js"></script-->
</body>

</html>

view1.html

<!-- Add Customer -->
<hr>
<button type="button" class="btn btn-danger btn-lg btn-block glyphicon glyphicon-plus" ng-click="open()">&nbsp;Add Customer</button>
<div class="table-responsive">
    <div class="panel panel-primary">
        <div class="panel-heading">
            List of Customer
            <div class="sw-search">
                <div class="nav-search">
                    Sreach
                    <span class="input-icon">
                            <input type="text" placeholder="Sreach Cutomer list ..." class="nav-search-input" focus autocomplete="off"
                            >  <i class="search-icon glyphicon glyphicon-search nav-search-icon"></i> 
                        </span>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-striped">
                <tr>
                    <th>CustomerID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>CountryCode</th>
                    <th>Budget</th>
                    <th>Used</th>
                </tr>
                <tr ng-repeat="x in datas">
                    <td>{{ x.ID }}</td>
                    <td>{{ x.Name }}</td>
                    <td>{{ x.Email }}</td>
                    <td>{{ x.CountryCode }}</td>
                    <td>{{ x.Budget }}</td>
                    <td>{{ x.Used }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

app.js

var app = angular.module('demoApp',['ngRoute','ui.bootstrap']);

app.config(['$routeProvider',function($routeProvider) {
	$routeProvider
		.when
		(
			'/',
			{
				controller: 'customerCtrl',
				templateUrl: 'view1.html'
			}
		)
		.otherwise({redirectTo:'/'});
}]);

script.js

app.controller('customerCtrl',['$scope','$modal','$log','$http', function($scope, $modal, $log, $http){

	$scope.datas = {};

	$scope.open = function(size){
		var modalInstance = $modal.open({
			templateUrl: 'customerAdd.html',
			controller: 'ModalInstanceCtrl',
			size: size,
			resolve: {
				items: function(){
					return;
				}	
			}
		});

	}

	$http.get("selects.php")
	.success(function(respose){
		$scope.datas = respose.records;
	});


}])

app.controller('ModalInstanceCtrl',['$scope','$modalInstance','$http', function($scope, $modalInstance,$http){
	$scope.cancel = function(){
		alert("Function Doing");
		$modalInstance.dismiss('close');
	}
	$http.post('view.php').success(function(data){
		$scope.employee = data;
	});
	$scope.addEmployee = function(){
		alert("Function Doing");
		$scope.errors = [];
		$scope.msgs = [];


		$http.post('insert.php',{
			'customer': $scope.newEmployee.customer,
			'names': $scope.newEmployee.names,
			'email': $scope.newEmployee.email,
			'countrycode': $scope.newEmployee.countrycode,
			'budget': $scope.newEmployee.budget,
			'used': $scope.newEmployee.used
		}).success(function(data, status, headers, config){
			if($scope.newEmployee.names != "" || $scope.newEmployee.email != "" || $scope.newEmployee.countrycode != "" || $scope.newEmployee.budget != "" ||  $scope.newEmployee.used != "" || data != ""){
				console.log($scope.newEmployee.customer);
				console.log($scope.newEmployee.names);
				console.log($scope.newEmployee.email);
				console.log($scope.newEmployee.countrycode);
				console.log($scope.newEmployee.budget);
				console.log($scope.newEmployee.used);
				console.log("inserted Successfully");
			}
			
			if(data.msgs != ''){
				$scope.msgs.push(data.msgs);
			}else{
				$scope.errors.push(data.errors);
			}
		}).error(function(data, status){
			$scope.errors.push(status);
		});
	}
}])

config.php

<?php
	error_reporting(E_ALL ^ E_DEPRECATED);
	$host = "localhost";
	$user = "root";
	$pass = "root";
	$database = "data";

	$conn = mysql_connect($host,$user,$pass);

	if(!$conn){
		die('Could not connect:'.mysql_error());
	}

	mysql_select_db($database,$conn)

?>

Meijicpipo 171.4.248.xxx 16-07-2015 22:53:45

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Facebook

ความคิดเห็นที่ 1

น่าจะผิดที่รูปแบบไฟล์ json

ninenik 1.46.64.xxx 16-07-2015

ความคิดเห็นที่ 2

ต้องแก้ ส่วนไหน อ่าครับ

meijicpipo 171.4.248.xxx 16-07-2015 23:21

ความคิดเห็นที่ 3

บอกยาก ถ้าผิดที่โค้ด ต้องลองไล่ดูเอง ใช้ debug เช็คค่าดู

หรือตรวจสอบการสร้างไฟล์ json จากเนื้อหาดูก็ได้ เผื่อช่วยได้

angularjs การเพิ่ม และ ลบ ข้อมูล กับฐานข้อมูล mysql ตอนที่ 11

http://www.ninenik.com/content.php?arti_id=534 via @ninenik

ninenik 1.46.64.xxx 16-07-2015

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน