Display string output in ng-repeat

Question

I want to display json object in the view. The code is:

<ul ng-repeat="item in items">
    <li ng-repeat="(key, val) in item">
        {{key}}: {{val}}
    </li>
</ul>

In, the controller :

$scope.init = function (){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            $scope.items = JSON.parse(xhr.responseText);
            console.log(JSON.parse(xhr.responseText));
        }
    };
    xhr.open('GET', 'http://127.0.0.1:8000/user_list/', true);
    xhr.send(null);
}

After console.log I'm getting

[{"user_name": "Pranav", "user_id": 1}, {"user_name": "Sagar", "user_id": 2}]

which I'm not able to manipulate like in previous example.

How to convert it in the format :

$scope.items =
    [
        {"user_name": "Pranav", "user_id": 1},
         {"user_name": "Sagar", "user_id": 2}]
    ];

So, I can use it.

tymeJV · Accepted Answer · 2014-04-02 17:53:24Z

1

Your data is in the correct format, however use Angular's $http for AJAX requests as this will trigger a digest cycle and allow the view to update:

$http.get("http://127.0.0.1:8000/user_list/").success(function(data) {
    $scope.items = data;
});

answered Apr 2, 2014 at 17:53

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

display name · Accepted Answer · 2014-04-02 18:33:55Z

I created a fiddle here: http://jsfiddle.net/fynva/

I simplified the HTTPGET call in the example since you did not have problem getting the JSON. Here is the code sample.

<div ng-app="myApp">
        <div ng-controller="TextController">
            <div>
                    <label for="spSelectViewMenu">Please select the list to view:</label>
                    <select id="spSelectViewMenu" ng-model="list" ng-options="c.user_name for c in lists"></select><br />
                <ul ng-show="list" ng-repeat="(key, val) in list" >
                    <li>{{key}} : {{val}}</li>
                </ul>
            </div>
    </div>
</div>

<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController', function ($scope) {
            $scope.lists = JSON.parse('[{"user_name": "Pranav", "user_id": 1}, {"user_name": "Sagar", "user_id": 2}]');
});
</script>

Collectives™ on Stack Overflow

Display string output in ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related