How to pass array to html in angularjs1.5.5

Question

How can I pass array Json data from angularjs Controller to html.

Here is my html

<body  ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
    <thead>
    <tr>
        <th>something</th>
        <th>something</th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td><( item.id )></td>
        </tr>
    </tbody>
</table>
</div>

</body>

Here is my Angularjs

var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('<(');
    $interpolateProvider.endSymbol(')>');
});

bookApp.controller('bookListCtr', function ($scope, $http) {

    $http.get('http://localhost/client_side/public/book').success(function(data) {
        if(data.s_respond === 200){
            $scope.items = data.data;
            console.log(data.data)
        }

    });
});

This is Json data After console

s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"

your http request gives you response as a string, firstly you should parse data to json object then set foreach loop on json data array object and push every single data object to $scope.items array ! — oguzhan00
– oguzhan00, Commented May 10, 2016 at 17:42

Dlanor · Accepted Answer · 2016-05-10 17:47:21Z

2

I think that you need parse the json

$scope.items = JSON.parse(data.data);

a link that explain that:

https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS

edited May 10, 2016 at 17:47

answered May 10, 2016 at 17:41

Dlanor

2763 silver badges13 bronze badges

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

Comments

Arjun Nayak · Accepted Answer · 2016-05-10 17:52:32Z

0

There r two tags... meaning 2 column try adding another in Ua body

    <body ng-app="bookApp"> <div ng-controller="bookListCtr"> 
<table> 
<thead>
 <tr> <th>something</th> <th>something</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in items">    <td>{{item.id }}</td> 
<td>something else</td>
</tr> 
</tbody> 
</table> 
</div> 
</body>

answered May 10, 2016 at 17:52

Arjun Nayak

1,2601 gold badge13 silver badges22 bronze badges

5 Comments

DMS-KH Over a year ago

I just testing with one column friends

Arjun Nayak Over a year ago

use {{ item.id }} expression tag to display your output

DMS-KH Over a year ago

I'm using Laravel blade so I have to used another tag to avoid conflict error tage or fantal errors

Arjun Nayak Over a year ago

As you have accepted the answer. You had to parse the string to JSON using JSON.parse() method.

DMS-KH Over a year ago

@Arijn Nayak, This is corrected answer. Although I laravel return as Json but when I check out put when I query by ajax in angurlarjs I found that are all string so i have to used this method to convert to Json Data

Collectives™ on Stack Overflow

How to pass array to html in angularjs1.5.5

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related