Как я могу использовать ng-repeat для отображения данных JSON?

Question

Я новичок в Angular JS. Я хочу использовать модуль ng-repeat. Требование таково, чтобы этот модуль считывал мои данные JSON, как указано ниже, и затем он должен отображать его на странице корзины покупок.

Мне нужно отобразить только имя, количество и цену. Дисплей будет выполнен на модуле начальной загрузки (страница корзины покупок). Любые предложения, пожалуйста?

{ 
     "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" 
    } 
] 

Answer 1

Нечто подобное будет работать. Используйте любые структуры HTML, которые вы хотите, чтобы отображать ваши данные, как вам нужно.

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

Answer 2

предположить, что его массив в вашем 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" 
    } 
]; 

чем в вашем HTML файле:

<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>