Angular/Ionic - 如何对来自两个 JSON 源的数据进行分组？答案

【问题标题】：Angular/Ionic - How to group data from two JSON source?Angular/Ionic - 如何对来自两个 JSON 源的数据进行分组？
【发布时间】：2019-06-16 03:48:59
【问题描述】：

我想将数据 JSON 分组到 Ionic 中的手风琴列表中。如何使用两个 JSON 源来做到这一点？

以前我只用一个 JSON 就成功了。

我有两个这样的 JSON。一：

    {
        {
          "ObjectId": '001',
          "ObjectName": 'Fruits'
        },
        {
          "ObjectId": '002',
          "ObjectName": 'Vegetables'
        }
    }

另一个：

    {
        {
          "Name": 'Apple',
          "Color": 'Red',
          "ObjectId": '001'
        },
        {
          "Name": 'Eggplant',
          "Color": 'Purple',
          "ObjectId": '002'
        },
        {
          "Name": 'Banana',
          "Color": 'Yellow',
          "ObjectId": '001'
        },
        {
          "Name": 'Spinach',
          "Color": 'Green',
          "ObjectId": '002'
        },
        {
          "Name": 'Garlic',
          "Color": 'White',
          "ObjectId": '002'
        },
    }

这是我的预期结果图像： Accordion-List

【问题讨论】：

分享你的代码，问你卡在哪里？
感谢您的回复。我找到了解决方案，但我不确定我的方法是最好的方法。我会在答案部分展示方法。

标签： json angular typescript ionic-framework grouping

【解决方案1】：

我找到了解决方案，但我不确定我的方法是不是最好的方法。

这是我的方法：

// GET DATA API
let getObjectApi = this.dataProvider.getObjectUrl();
new Promise(resolve => {
    getObjectApi.subscribe(data => {
      resolve(data);
      this.apiObjectData = data;

      // LOOPING OBJECT DATA
      for (let i = 0; i < this.apiObjectData.length; i++) {
        const objItem = data[i];

        // GET OBJECT ITEM BY ObjectId
        let getObjectItem = this.getObjectItemByObjectId('ObjectId', objItem['ObjectId']);
        // PUSH THE DATA
        this.apiDataResult.push({
          'dataObject': objItem,
          'dataObjectItem' : getObjectItem 
        });
      }
    }, err => {
      console.log(err);
    });
  });

这里是this.getObjectItemByObjectId() 方法：

getObjectItemByObjectId(column, value) {
  let result:any = [];
  let dataApi: any = [];

  let getObjectItemApi = this.dataProvider.getObjectItemUrl();
  new Promise(resolve => {
    getObjectItemApi.subscribe(data => {
      resolve(data);
      dataApi = data;
      for (let i = 0; i < dataApi.length; i++) {
        const element = dataApi[i];
        if (element[column] == value) {
          result.push(element);
        }
      }
    }, err => {
      console.log(err);
    });
  });

  return result;
}

结果是这样的：

{
    {
      "dataObject": {
                      "ObjectId": '001',
                      "ObjectName": 'Fruits'
                    },
      "dataObjectItem": {
                            {
                              "Name": 'Apple',
                              "Color": 'Red',
                              "ObjectId": '001'
                            },
                            {
                              "Name": 'Banana',
                              "Color": 'Yellow',
                              "ObjectId": '001'
                            }
                        }
    },
    {
      "dataObject": {
                      "ObjectId": '002',
                      "ObjectName": 'Vegetables'
                    },
      "dataObjectItem": {
                            {
                              "Name": 'Eggplant',
                              "Color": 'Purple',
                              "ObjectId": '002'
                            },
                            {
                              "Name": 'Spinach',
                              "Color": 'Green',
                              "ObjectId": '002'
                            },
                            {
                              "Name": 'Garlic',
                              "Color": 'White',
                              "ObjectId": '002'
                            }
                        }
    }
}

就是这样！

如果有比我的方法更好的方法，请告诉我！如果出现问题，我很抱歉。提前谢谢你！！

【讨论】：