как распечатать список из документа JSON - PullRequest
Новая
       9

как распечатать список из документа JSON

0 голосов
/ 12 сентября 2018

Я хочу распечатать свои данные из файла list.json 

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","list.json",false);
    xmlhttp.send();
    var list = xmlhttp.responseText;

это мой список. Json 

{

"p1": {
    "name":"fruit song",
    "cat":"learning",
    "lan":"eng",
    "ur":"abc1"
},
"p2": {
    "name":"eting sugar",
    "cat":"random",
    "lan":"eng",
    "ur":"abc2"
},
"p3": {
    "name":"salgira ka din",
    "cat":"birthday",
    "lan":"urdu",
    "ur":"abc3"
},
"p4": {
    "name":"twinkle twinkle",
    "cat":"random",
    "lan":"eng",
    "ur":"abc4"
},
"p5": {
    "name":"abc song",
    "cat":"learning",
    "lan":"eng",
    "ur":"abc5"
}

}

и я получаю данные как 

obj = JSON.parse(list);
$scope.n =obj.p1.name;
$scope.c =obj.p1.cat;
$scope.l =obj.p1.lan;
$scope.u =obj.p1.ur;

это работает нормально и показывает данные в предупреждении ($ scope.n);

Я хочу напечатать этот файл json в формате html с карточками типа

p1 name: {{n}} категория: {{c}} язык: {{l}}

p2 name: {{n}} категория: {{c}} язык: {{l}}

внутри list.json будет более 50 записей типа P1.

Может кто-нибудь сказать мне код для печати всех записей в формате HTML

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

так что мой HTML 

<li ng-repeat="item in items"   item="item" ng-click="model.itemValue = item" >
<div class = "row" style="background: url(img/4.jpg) no-repeat center;background- 
size:cover;">
<div class = "col"><h3>{{name}} :)</h3></div>
<div class = "col col-60"><h3>{{email}}</h3></div>
<div class = "col"><h3><button class="button button-calm button rdm">PLAY</button> 
</h3></div>
</div>
</li>

и мой контроллер 

 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","Ulist.json",false);
 xmlhttp.send();
 var list = xmlhttp.responseText;
 obj = JSON.parse(list);

 $scope.data = {};

 $scope.model = {};

 $scope.items = obj;

это сработало для меня

0 голосов
/ 12 сентября 2018

Вы должны использовать AngularJS ng-repeat, как 

<div>
  <p ng-repeat="(key, val) in obj">{{key}} name: {{val.name}} category : {{val.cat }} language : {{val.lan}}</p>
</div>

. Для будущих ссылок используйте документацию AngularJS: ngRepeat

...