Displaying JSON Data In <Select> Using AngularJS (Error)

Question

I am having an issue with displaying JSON data that I am getting passed to display in a html control.

I have set-up module which all looks correct and fine:

//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'
        })
}]);

Then in my controller I am getting my JSON data and storing in 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];

    });
}]);

I have tested that my results are coming back as I wrote:

Console.log($scope.testAccounts);

This returned all my JSON which looks like the following:

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

Finally, in my html I am using 'ng-options' and selecting all the 'BookName' from my JSON data:

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

Error

The error happens when I load up my project the control shows a list of 84 labels which say 'undefined'.

Anyone have any idea why this might be happening?

EDIT

Here is what the URL returns:

JSON Image

EDIT 2

I am getting my data from WCF Service like below, is this incorrect?

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

        }



    }

There must be something else wrong as this works fine jsfiddle.net/wb58yd6r — Rob Schmuecker
– Rob Schmuecker, Commented Aug 21, 2015 at 14:18
@Ben Clarke try to double check data returned from http://localhost:53215/IBookService.svc/GetBooksList your code looks OK. — Marian Polacek
– Marian Polacek, Commented Aug 21, 2015 at 14:21
@RobSchmuecker What else could be wrong, I will attached an image of the JSON returned from the URL — Ben Clarke
– Ben Clarke, Commented Aug 21, 2015 at 14:23
@drax I have added an image to the question to what the URL returns. — Ben Clarke
– Ben Clarke, Commented Aug 21, 2015 at 14:25
Does the service set correct content types? Since to me it looks like your data is just pure string, not json. Here is fiddle with repro: jsfiddle.net/wb58yd6r/1 — Marian Polacek
– Marian Polacek, Commented Aug 21, 2015 at 14:29

Rob Schmuecker · Accepted Answer · 2015-08-21 14:33:12Z

0

As you say, the returned string is exactly 84 characters long and you are getting 84 undefined errors. It seems that your svc isn't returning proper JSON headers and hence the returned JSON string is being treated as an array of 84 elements. Try this:

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

    });
}]);

answered Aug 21, 2015 at 14:33

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Clarke Over a year ago

Thanks for the answer this worked. Does this mean i have to fix my svc?

Rob Schmuecker Over a year ago

You just need to configure your svc to return correct JSON instead of a string. I'm not familiar with svc but perhaps this will help. stackoverflow.com/questions/2086666/…

Teliren · Accepted Answer · 2015-08-21 14:23:51Z

-1

So after building out this example I didn't have an issue with box not loading the data correctly. the only thing that i changed was the way the variable on the scope was being assigned

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

Here is my plnkr

answered Aug 21, 2015 at 14:23

Teliren

3421 silver badge5 bronze badges

2 Comments

jonmrich Over a year ago

So, is your issue solved or is there still a problem?

Ben Clarke Over a year ago

Thanks for the answer, is it maybe beause im using a WCF service to call the JSON?

Collectives™ on Stack Overflow

Displaying JSON Data In <Select> Using AngularJS (Error)

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related