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?

Answer 1

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>