Отображение данных JSON в <Select> с помощью AngularJS (ошибка)

0

У меня возникла проблема с отображением данных JSON, которые мне передают для отображения в элементе управления html.

У меня есть модуль настройки, который выглядит корректно и хорошо:

//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-options" и выбирая все "BookName" из своих данных JSON:

<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:

Изображение JSON

EDIT 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();

        }



    }
  • 2
    Должно быть что-то еще не так, так как это прекрасно работает jsfiddle.net/wb58yd6r
  • 0
    @Ben Кларк попытаться перепроверить данные, возвращаемые с http://localhost:53215/IBookService.svc/GetBooksList ваш код выглядит нормально.
Показать ещё 5 комментариев
Теги:

2 ответа

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];

    });
}]);
Поделиться
  • 0
    Спасибо за ответ, это сработало. Означает ли это, что я должен исправить свой SVC?
  • 0
    Вам просто нужно настроить SVC, чтобы он возвращал правильный JSON вместо строки. Я не знаком с SVC, но, возможно, это поможет. stackoverflow.com/questions/2086666/...
-2

Поэтому, после создания этого примера, у меня не было проблемы с полем, который не загружал данные правильно. единственное, что я изменил, это то, как назначалась переменная в области

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

Вот мой plnkr

Поделиться
  • 0
    Итак, ваша проблема решена или есть проблема?
  • 0
    Спасибо за ответ, это может быть потому, что я использую сервис WCF для вызова JSON?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню