Parse JSON using AngularJS

Question

I have the following JSON data and I want to parse it using AngularJS

{
    "count": 104,
    "entries": [
        [
            "74",
            "Aakash",
            "/images/brands/aakash.png"
        ],
        [
            "51",
            "Aashirvaad",
            "/images/brands/aashirvaad.png"
        ],
        [
            "42",
            "ACT II",
            "/images/brands/act-ii.png"
        ],
        [
            "47",
            "Amul",
            "/images/brands/amul.png"
        ],
        [
            "48",
            "Anik",
            "/images/brands/anik.png"
        ],
        [
            "52",
            "Annapurna",
            "/images/brands/annapurna.png"
        ],
        [
            "3",
            "Ariel",
            "/images/brands/ariel.png"
        ],
        [
            "6",
            "Auyr Herbal",
            "/images/brands/ayur-herbal.png"
        ],
        [
            "29",
            "Axe",
            "/images/brands/axe.png"
        ],
        [
            "20",
            "Bajaj",
            "/images/brands/bajaj.png"
        ],
        [
            "46",
            "Boost",
            "/images/brands/boost.png"
        ],
        [
            "76",
            "Britannia",
            "/images/brands/britannia.png"
        ]
    ]
}

I'll get above JSON data using this function:

function customersController($scope,$http) 
{
    $http.get("http://example.com/website/brands_JSON.php")
        .success(function(response) {$scope.names = response;});
}

and trying to display it using:

<div ng-app="" ng-controller="customersController"> 
    <table class='table table-bordered'>
        <caption>BRAND'S LIST</caption>
        <thead>
            <tr><th>#</th><th>Brand Name</th><th>ImagePath</th><th>Image</th></tr>
        </thead>
        <tr ng-repeat="x in names.entries">
            <td>{{ names.entries[0][0]}} </td>
            <td>{{ names.entries[0][1]}} </td>
            <td>{{ names.entries[0][2]}} </td>
            <td>{{ names.entries[0][3]}} </td>
        </tr>

    </table>
</div>

But nothing is displaying except table header.

Can anyone help?

Second2None · Accepted Answer · 2014-11-16 02:34:23Z

2

You should use x[i] to display data because of 'ng-repeat="x in names.entries"':

<div ng-app="" ng-controller="customersController">
<table class='table table-bordered'>
    <caption>BRAND'S LIST</caption>
    <thead>
        <!-- your table head -->
    </thead>
    <tr ng-repeat="x in names.entries">
        <td>{{x[0]}} </td> 
        <td>{{x[1]}} </td>
        <td>{{x[2]}} </td> 
    </tr>
 </table> 
</div>

edited Nov 16, 2014 at 2:34

answered Nov 16, 2014 at 2:28

Second2None

4722 gold badges8 silver badges22 bronze badges

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

2 Comments

Devesh Agrawal Over a year ago

I tried this also. Even This is not displaying anything.

Second2None Over a year ago

Could you set up a plunker? Also you may have a look at docs.angularjs.org/guide/controller

Collectives™ on Stack Overflow

Parse JSON using AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related