Need help fetching data JSON to scope AngularJS

Question

i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.

I have JSON like this :

[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]

i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :

$http.get('Api/items').then(function(response)
        {       
            $scope.items = response;
            console.log(response);
        });

and this is my table view :

<table class="table table-bordered pagin-table">
<thead>
    <tr>
        <th>No</th>
        <th>Title</th>
        <th>Description</th>
        <th width="220px">Action</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.title }}</td>
        <td>{{ x.description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>
</tbody>

This is what happen when those all executed :

no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :

<table class="table table-bordered pagin-table">
<thead>
    <tr>
        <th>No</th>
        <th>Title</th>
        <th>Description</th>
        <th width="220px">Action</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x[0].title }}</td>
        <td>{{ x[0].description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>
</tbody>

Where did i go wrong?? can someone help me??

digit · Accepted Answer · 2016-12-14 11:01:16Z

4

It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :

$http.get('Api/items').then(function(response)
        {       
            $scope.items = response.data;
            console.log(response);
        });

answered Dec 14, 2016 at 11:01

digit

4,5653 gold badges30 silver badges46 bronze badges

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

4 Comments

La Croix Over a year ago

ah, yeah, thanks man, there are some improvement, the <tr> is repeated 2 time like what json give. but still no value though?? can you help me check again? ss : imgur.com/a/I7Me2

La Croix Over a year ago

sorry, forgot to erase array number, my mistake

digit Over a year ago

It should have value if count is true. Is it show blank row instead?

digit Over a year ago

Please modify x[0].title -> x.title only.

Ved · Accepted Answer · 2016-12-14 11:07:29Z

2

@digit already pointed the issue in you $hhtp call. Now For this JSON:

 [{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]

. No need to give index number inside ng-repeat. //{{ x[0].title }}

<tr ng-repeat="x in items">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.title }}</td>
        <td>{{ x.description }}</td>
        <td>
            <button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
            <button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
        </td>
    </tr>

answered Dec 14, 2016 at 11:07

Ved

12.1k5 gold badges46 silver badges61 bronze badges

1 Comment

La Croix Over a year ago

thanks for the full explanation. but because @didit give the answer first i will accept his answer. i can only upvote your anwser. if only we can accept multiple answer.

Collectives™ on Stack Overflow

Need help fetching data JSON to scope AngularJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related