如何將此API中的資料轉換為由特定道具組織的物件陣列？

我從 API 獲取這些資料：

 let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]

我想做的是創建一個新的物件陣列，其中包含兩件事：

1. 一個叫classification;

2. 一個名為 的道具establishments，它是一個物件陣列，其中包含與分類道具匹配的所有場所。

意思是這樣的：

let establishmentsArray = [
    {
      classification: 'food',
      establishments: [
        {
          name: 'name of food place',
          address: 'address of food place',
          classification: 'food',
          // rest of its props
        },
        // Lots of other food places places
      ],
    },
    {
      classification: 'clothes',
      establishments: [
        {
          name: 'name of clothes place',
          address: 'address of clothes place',
          classification: 'clothes',
          // rest of its props
        },
        {
          name: 'name of another clothes place',
          address: 'address of another clothes place',
          classification: 'clothes',
          // rest of its props
        },
        // Lots of other clothes places
      ],
    },
    {
      classification: 'tech',
      establishments: [
        {
          name: 'name of tech place',
          address: 'address of tech place',
          classification: 'tech',
          // rest of its props
        },
        {
          name: 'name of another tech place',
          address: 'address of another tech place',
          classification: 'tech',
          // rest of its props
        },
        // Lots of other tech places
      ],
    },
  ]

我在這里先向您的幫助表示感謝！

uj5u.com熱心網友回復：

看起來您正在嘗試按單個欄位進行分組，這是array.reduce的一個很好的用例：

let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]
  
  let output = dataFromApi.reduce((acc, cur) => {
      let { classification, ...rest} = cur;
      let prev = acc.find(x => x.classification === classification);
      if(!prev) {
          acc.push({classification, establishments: [cur]});
      } else {
          prev.establishments.push(cur);
      }
      return acc;
  }, []);
  
  console.log(output);

uj5u.com熱心網友回復：

這是另一個示例，您可以使用map.reduce：

const groupByClassification = (items) => {
  const grouped = items.reduce((acc, cur) => {
    if (cur.classification in acc) {
      acc[cur.classification].establishments.push(cur);

      return acc;
    }

    const newGroupItem: GroupedItem = {
      classification: cur.classification,
      establishments: [cur]
    };

    return {
      ...acc,
      [cur.classification]: newGroupItem
    };
  }, {} });

  return Object.values(grouped);
};

uj5u.com熱心網友回復：

let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]


function GroupByClassification(data){
  var groupedData = {};
  for (const element of data) {
  if(!(element.classification in groupedData)){
    groupedData[element.classification] = [element];
    }else{
    groupedData[element.classification].push(element);
    }
  }
  return groupedData;
}

console.log(GroupByClassification(dataFromApi));

標籤：javascript 数组 目的

上一篇：集合視圖不顯示單元格

下一篇：物件作為類資料成員，使用帶和不帶初始化串列的默認建構式