Ng-repeat with a Json file using angularjs?

Question

I have json file called brands.json:

{
  "brands": {
    "Honda": [
      "Accord",
      "Civic"
    ],
    "Porsche": [
      "Cayenne",
      "Cayman"
    ]
  }
}

Im trying to iterate through this list and list the brand(e.g. Honda and Porsche) and render using HTML lists.

<li ng-repeat="brands in items">{{brands}}</li>

JS:

$scope.items= [];
$http.get('brands.json').then(function(response) {
    $scope.items =response.data.brands;
});

This code works fine but it displays the arrays inside the brand names e.g. instead if displaying Honda it displays ["Accord", "Civic"]. I want it to display the brand names only.

<li>Honda</li>
<li>Porsche</li>

Khanh TO · Accepted Answer · 2014-04-27 13:39:35Z

5

Try:

<li ng-repeat="(key, value) in items">{{key}}</li>

Quouted from the docs:

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

For example: (name, age) in {'adam':10, 'amalie':12}.

answered Apr 27, 2014 at 13:39

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

3 Comments

Unknown Over a year ago

do you know how i can get the arrays of the "key" once its clicked? using ng-click for exaple if i click honda console.log Accord, Civic

Khanh TO Over a year ago

@user2681696: you just need to access the value. For example: <li ng-repeat="(key, value) in items" ng-click="show(value)">{{key}}</li>

Unknown Over a year ago

Thanks :) much appreiated

Collectives™ on Stack Overflow

Ng-repeat with a Json file using angularjs?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related