CODEWITHSUNDEEP
angularjsjsonangularjs-ng-repeat
fnaticRC ggwp
fnaticRC ggwp

Reputation: 1003

How can I use ng-repeat to display JSON data?

I am a newbie to Angular JS . I wish to make use of the ng-repeat module. The requirement is such that this module shall read my JSON data as posted below and then it shall display it to a shopping cart page.

I only need to display the name,quantity and price option. The display will be done on the bootstrap module(shopping cart page). Any suggestions, please ?

  {
      "region":"latin america",
      "category":"coffee",
      "price":40,
      "name":"Sulawesi, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"blonde",
      "type":"decaffinated"
   },
   {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"3 Region Blend, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
   },
   {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"Starbucks Reserve Eastern D.R. Congo Lake Kivu",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
   }
]

Upvotes: 0

Views: 105

Answers (2)

oguzhan00
oguzhan00

Reputation: 509

assume that its an array in your coffeeController:

this.coffees=
[
 {
      "region":"latin america",
      "category":"coffee",
      "price":40,
      "name":"Sulawesi, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"blonde",
      "type":"decaffinated"
    },
    {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"3 Region Blend, Whole Bean",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
    },
    {
      "region":"multi",
      "category":"coffee",
      "price":50,
      "name":"Starbucks Reserve Eastern D.R. Congo Lake Kivu",
      "flavor":"flavored",
      "quantity":5,
      "roast":"medium",
      "type":"regular"
    }
];

than in your html file:

<div ng-app="myapp">
  <div ng-controller="coffeControlloer as cffCtrl">
   <div ng-repeat="coffee in cffCtrl.coffees">
    <div>{{ coffee.name }}</div>
    <div>{{ coffee.quantity }}</div>
    <div>{{ coffee.price }}</div>
  </div>
 </div>

Upvotes: 1

erahm
erahm

Reputation: 344

Something like this will work. Use whatever HTML structures you want in order to display your data how you need.

<div ng-repeat="row in myJson">
    <div>{{ row.name }}</div>
    <div>{{ row.quantity }}</div>
    <div>{{ row.price }}</div>
</div>

Upvotes: 3

Related Questions