迭代 JSON 数组并为其元素设置样式答案

【问题标题】：Iterate in a JSON array and style its elements迭代 JSON 数组并为其元素设置样式
【发布时间】：2016-05-04 18:39:03
【问题描述】：

我正在从 REST API 获取数据，并且收到一个格式如下的 JSON：

[Object]
 0:Object
  createdAt:"2016-05-04T16:32"
 list:Array[4]
    0:"Mango"
    1:"Apple"
    2:"Banana"
    3:"Kiwi"

目前，在 HTML 文件中调用该 JSON 时会打印以下内容：

芒果、苹果、香蕉、猕猴桃

这是用于从 REST API 检索数据的 JS 代码：

this.http.get('https://example.com/api').subscribe(data => {
    this.categories = data.json().results;
    });

当前的 HTML/Angular 代码：

  <div *ngFor="#fruit of categories">
   <ion-row>
    <ion-col>
     <div class="txt">{{fruit.list}}</div>
    </ion-col>
    </ion-row>
  </div>

我想要达到的最终结果如下：

 <div>

   <ion-row>
   <ion-col>
     <div class="txt">Mango</div>
   </ion-col>
   <ion-col>
     <div class="txt">Apple</div>
   </ion-col>
   </ion-row>

   <ion-row>
   <ion-col>
     <div class="txt">Banana</div>
   </ion-col>
   <ion-col>
     <div class="txt">Kiwi</div>
   </ion-col>
   </ion-row>

   </div>

您能告诉我如何实现吗？我需要更改 JSON 本身的内容吗？或者可以简单地通过调整 *ngFor 来完成？

【问题讨论】：

categories 是什么？而且...你想要达到的结果是不可能通过一个循环来实现的。
我已经进行了编辑，所以您可以清楚地看到categories 是什么，希望对您有所帮助！
我对你的主题感到困惑。您说您对样式感兴趣，但看起来您更有兴趣通过我在 JSON 中看不到的某些类别属性对父行元素进行分组？我认为您的 JSON 应该有一个一阶类别数组，然后每个类别都有一个子水果数组。然后你可以在组上 ngFor，然后在组内结出果实。
仅供参考，JSON 是数据的文本格式。因此，当您可以将它作为对象或数组访问并且它不是字符串时，它就不再是 JSON。请参阅json.org 了解更多信息。
@JohnMcCann 您可能会从不同的角度看待它，而我认为它是为每两个元素创建一个<ion-row>。

标签： javascript json angular

【解决方案1】：

我会创建一个新对象来收集元素：

this.service.getFruits().subscribe(categories => {
  let fruits = categories.list;
  let fruitsByGroup = [];
  fruits.forEach((fruit, index) => {
    let groupIndex = Math.floor(index/2);
    if (index%2 === 0) {
      fruitsByGroup[groupIndex] = [];
    }
    fruitsByGroup[groupIndex].push(fruit);
  });

  this.fruitsByGroup = fruitsByGroup;
});

然后我会这样迭代：

<div *ngFor="#fruitGroup of fruitsByGroup">
  <ion-row *ngFor="#fruit of fruitGroup">
    <ion-col>
     <div class="txt">{{fruit.list}}</div>
    </ion-col>
  </ion-row>
</div>

【讨论】：

谢谢蒂埃里，我试过了，但我收到一个错误：TypeError: fruits.forEach is not a function 有什么想法有什么问题吗？
不客气！错误是因为我错过了您的响应内容中的list 属性...我相应地更新了我的答案。
没错，我迭代的是对象而不是数组！
顺便说一句，如果你能告诉我背后的想法/它是如何工作的，那将是非常有帮助和知识渊博的，所以我学习了！再次感谢！

【解决方案2】：

你可以使用 ng-repeat 来做这样的事情：

     <div>
       <ion-row ng-repeat="fruit in categories.list">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
    </div>

由此产生的主要并发症是将它们分成不同的行。如果您要处理的项目不多，您可以尝试以下操作：

     <div>
       <ion-row ng-repeat="fruit in categories.list.slice(0,1)">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
       <ion-row ng-repeat="fruit in categories.list.slice(2,3)">
           <ion-col>
             <div class="txt">{{fruit}}</div>
           </ion-col>
       </ion-row>
    </div>

这能回答你的问题吗？

【讨论】：

【解决方案3】：

您可以使用嵌套的 ngFor 来做到这一点

<div *ngFor="#fruit of categories">
  <ion-row>
    <ion-col *ngFor="#item of fruit.list"> 
      <div class="txt">
         {{item}} 
      </div>
   </ion-col> 
  </ion-row> 
</div>

【讨论】：

【解决方案4】：

在你休息调用代码

this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results[0].list;
});

在您的 HTML 代码中

<div *ngFor="#fruit of categories">
 <ion-row>
  <ion-col>
  <div class="txt">{{fruit[0]}}</div>
  </ion-col>
  </ion-row>
  </div>

【讨论】：