Javascript 在<；中显示JSON数据；选择>；使用AngularJS（错误）_Javascript_Html_Json_Angularjs

Javascript 在<；中显示JSON数据；选择>；使用AngularJS（错误）

javascript html json angularjs

Javascript 在<；中显示JSON数据；选择>；使用AngularJS（错误）,javascript,html,json,angularjs,Javascript,Html,Json,Angularjs,我在显示传递到html控件中显示的JSON数据时遇到问题我有一个设置模块，所有模块看起来都正确且良好： //Define an angular module for our app var AngularJSTest = angular.module('AngularJSTest', ['ui.router']); //Define Routing for the application AngularJSTest.config(['$stateProvider', '$urlRouterP

我在显示传递到html控件中显示的JSON数据时遇到问题

我有一个设置模块，所有模块看起来都正确且良好：

//Define an angular module for our app
var AngularJSTest = angular.module('AngularJSTest', ['ui.router']);

//Define Routing for the application
AngularJSTest.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
    $stateProvider.
        state('home', {
            name: 'home',
            templateUrl: 'AngularJSTestPage.html',
            controller: 'AngularJSTestPageCtrl'
        })
}]);

然后在我的控制器中获取JSON数据并存储在

testAccounts

：

AngularJSTest.controller("AngularJSTestPageCtrl", ["$scope", "$http", function ($scope, $http) {
    $http.get('http://localhost:53215/IBookService.svc/GetBooksList').success(function (data) {

        $scope.testAccounts = data;
        $scope.selectedTestAccount = $scope.testAccounts[0];

    });
}]);

我已经测试了我的结果，正如我所写的：

Console.log($scope.testAccounts);

这返回了我的所有JSON，如下所示：

[{"BookName":"test1","ID":1},{"BookName":"test2","ID":2},{"BookName":"test","ID":3}]

最后，在我的html中，我使用“ng选项”并从JSON数据中选择所有“BookName”：

<body ng-app="AngularJSTest">
<div ng-controller="AngularJSTestPageCtrl">
    <select class="form-control" data-ng-model="selectedTestAccount" data-ng-options="item.BookName for item in testAccounts">
        <option label="-- ANY --"></option>
    </select>
</div>

错误

这个错误发生在我加载我的项目时，控件显示了一个包含84个标签的列表，上面写着“undefined”

有人知道为什么会这样吗

编辑

以下是URL返回的内容：

编辑2

我从下面的WCF服务获取数据，这是错误的吗

    public List<DC_BOOK> Books()
    {

        List<DC_BOOK> listBook = new List<DC_BOOK>();

        DC_BOOK books = new DC_BOOK();
        books.ID = 1;
        books.BookName = "test1";
        listBook.Add(books);

        DC_BOOK books1 = new DC_BOOK();
        books1.ID = 2;
        books1.BookName = "test2";
        listBook.Add(books1);

        DC_BOOK books2 = new DC_BOOK();
        books2.ID = 3;
        books2.BookName = "test";
        listBook.Add(books2);

        return listBook;


    }

    public string GetBooksList()
    {
        using (SampleDbEntities entities = new SampleDbEntities())
        {
            // Serialize the results as JSON
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(Books().GetType());
            MemoryStream memoryStream = new MemoryStream();
            serializer.WriteObject(memoryStream, Books());

            // Return the results serialized as JSON
            string json = Encoding.Default.GetString(memoryStream.ToArray());
            return json;
            //return entities.Books.ToList();

        }



    }

publicslist图书（）
{
List listBook=新列表（）；
DC_BOOK books=新DC_BOOK（）；
books.ID=1；
books.BookName=“test1”；
添加（图书）；
DC_BOOK books 1=新DC_BOOK（）；
1.ID=2；
books1.BookName=“test2”；
添加（books1）；
DC_BOOK books 2=新DC_BOOK（）；
2.ID=3；
books2.BookName=“测试”；
添加（books2）；
返回目录；
}
公共字符串GetBooksList（）
{
使用（SampleDbEntities entities=new SampleDbEntities（））
{
//将结果序列化为JSON
DataContractJsonSerializer serializer=新的DataContractJsonSerializer（Books（）.GetType（））；
MemoryStream MemoryStream=新的MemoryStream（）；
serializer.WriteObject（memoryStream，Books（））；
//返回序列化为JSON的结果
string json=Encoding.Default.GetString（memoryStream.ToArray（））；
返回json；
//返回实体.Books.ToList（）；
}
}

所以在构建了这个示例之后，我没有发现box没有正确加载数据的问题。我唯一改变的是作用域上变量的赋值方式

$scope.testAccounts = data;
$scope.selectedTestAccount = data[0];

正如您所说，返回的字符串长度正好是84个字符，您将得到84个未定义的错误。您的

svc

似乎没有返回正确的JSON头，因此返回的JSON字符串被视为84个元素的数组。试试这个：

AngularJSTest.controller("AngularJSTestPageCtrl", ["$scope", "$http", function ($scope, $http) {
    $http.get('http://localhost:53215/IBookService.svc/GetBooksList').success(function (data) {

        $scope.testAccounts = JSON.parse(data);
        $scope.selectedTestAccount = $scope.testAccounts[0];

    });
}]);

一定是出了什么问题，因为这样做很好@Ben Clarke尝试重新检查从

http://localhost:53215/IBookService.svc/GetBooksList

您的代码看起来正常。@RobSchmuecker还有什么问题，我将附上从URL@drax我在URL返回内容的问题中添加了一个图像。该服务是否设置了正确的内容类型？因为在我看来，您的数据只是纯字符串，而不是json。这里是摆弄复制：那么，你的问题解决了还是仍然有问题？谢谢你的回答，是不是因为我在使用WCF服务调用JSON？谢谢你的回答。这是否意味着我必须修复svc？您只需要将svc配置为返回正确的JSON而不是字符串。我不熟悉svc，但这可能会有所帮助。