計算嵌套陣列中的專案數

我有以下陣列：

const foodMenu = [
  {id: 1, name: 'pasta', nutritionalInfo: ['ve', 'veg', 'gf']}, 
  {id: 2, name: 'pizza', nutritionalInfo: ['gf', 'veg']}, 
  {id: 3, name: 'applePie', nutritionalInfo: ['nuts']}
]

我想在我的頁面上顯示每種營養資訊的數量。例如，它看起來像：

Ve：1 無麩質：2，Veg：2，堅果：1

我不確定從嵌套nutritionalInfo陣列中獲取所有資料并對其進行計數的最簡潔方法？

我嘗試過映射它們以添加到新nutritionalInfoCount陣列中，但我收到了太多的重新渲染警告：

  {foodMenu.map((foodMenu) => (
     foodMenu.nutritionalInfo.forEach((nutritionalInfo) => (
        setNutritionalInfoCount([nutritionalInfoCount, nutritionalInfo])
     ))
    ))
  }

任何人都可以幫忙解決這個問題嗎？

uj5u.com熱心網友回復：

這個想法是遍歷每個 foodItem 并將每個 foodItem 的營養資訊添加到頻率計數器。嘗試以下操作：

const foodMenu = [
  {id: 1, name: 'pasta', nutritionalInfo: ['ve', 'veg', 'gf']}, 
  {id: 2, name: 'pizza', nutritionalInfo: ['gf', 'veg']}, 
  {id: 3, name: 'applePie', nutritionalInfo: ['nuts']}
]

const nutritionalInfoCount = {};
foodMenu.forEach(({nutritionalInfo}) => {
  nutritionalInfo.forEach(nutrient => {
    if (nutrient in nutritionalInfoCount) {
      nutritionalInfoCount[nutrient]  = 1;
    } else {
      nutritionalInfoCount[nutrient] = 1;
    }
  });
});

uj5u.com熱心網友回復：

Array.reduce通常用于對陣列進行求和/分組等。

例如。

const foodMenu = [
  {id: 1, name: 'pasta', nutritionalInfo: ['ve', 'veg', 'gf']}, 
  {id: 2, name: 'pizza', nutritionalInfo: ['gf', 'veg']}, 
  {id: 3, name: 'applePie', nutritionalInfo: ['nuts']}
];

const tots = foodMenu.reduce((a,v) => 
 (v.nutritionalInfo.forEach(v=>a[v]=(a[v]||0) 1),a)
,{});

console.log(tots);

uj5u.com熱心網友回復：

您首先需要建立一個頻率圖。獲得頻率圖后，您可以將條目映射并加入格式化字串。

const descriptors = {
  ve: 'Vegan',
  veg: 'Vegetarian',
  gf: 'Gluten Free',
  nuts: 'Nuts',
};

const foodMenu = [
  { id: 1, name: 'pasta', nutritionalInfo: ['ve', 'veg', 'gf'] }, 
  { id: 2, name: 'pizza', nutritionalInfo: ['gf', 'veg'] }, 
  { id: 3, name: 'applePie', nutritionalInfo: ['nuts'] },
];

const calcFrequency = (items, subKey) =>
  items.reduce((outer, item) =>
    item[subKey].reduce((inner, key) => {
      inner[key] = (inner[key] ?? 0)   1;
      return inner;
    }, outer), {});

const printFrequency = (frequency) => {
  console.log(Object.entries(frequency)
    .sort(([k1], [k2]) => descriptors[k1].localeCompare(descriptors[k2]))
    .map(([key, count]) => `${descriptors[key]}: ${count}`)
    .join(', '));
}

printFrequency(calcFrequency(foodMenu, 'nutritionalInfo'));

輸出

無麩質：2，堅果：1，素食主義者：1，素食主義者：2

uj5u.com熱心網友回復：

 export default function App() {
  const foodMenu = [
    { id: 1, name: "pasta", nutritionalInfo: ["ve", "veg", "gf"] },
    { id: 2, name: "pizza", nutritionalInfo: ["gf", "veg"] },
    { id: 3, name: "applePie", nutritionalInfo: ["nuts"] }
  ];
  const nutrientContent = {};
  foodMenu.forEach((foodMenu) => {
    foodMenu.nutritionalInfo.forEach(
      (nutritionalInfo) =>
        (nutrientContent[nutritionalInfo] =
          nutritionalInfo in nutrientContent
            ? nutrientContent[nutritionalInfo]   1
            : 1)
    );
  });
  return (
    <div className="App">
      {Object.keys(nutrientContent).map(
        (val) => val   ":"   nutrientContent[val]   ", "
      )}
    </div>
  );
}

代碼示例

uj5u.com熱心網友回復：

  foodMenu = result?.find(
    (c: any) => c.id== (id as number).toString()

uj5u.com熱心網友回復：

更新的答案

我注意到 OP 更新了問題，并覺得使用 one.reduce()而不是 two可能更簡單.forEach()。這里是：

const nutritionalInfoCount = foodMenu.reduce(
  (infoCount, { nutirtionalInfo }) => {
    let itemInfoCount = { ...infoCount };

    nutirtionalInfo.forEach((nutritionalItem) =>
      itemInfoCount[nutritionalItem] = itemInfoCount[nutritionalItem] !== null
        ? itemInfoCount[nutritionalItem]   1
        : 1
    )

    return itemInfoCount;
  , {})

可以使用 2.reduce()但感覺它會讓代碼“不可讀”。如果你愿意，你可以這樣做：

const nutritionalInfoCount = foodMenu.reduce(
  (infoCount, { nutirtionalInfo }) =>
    nutirtionalInfo.reduce((internalInfoCount, nutritionalItem) => ({
      ...internalInfoCount,
      internalInfoCount[nutritionalItem]: internalInfoCount[nutritionalItem] !== null
        ? internalInfoCount[nutritionalItem]   1
        : 1,
    }), { ...infoCount } 
  ), {})

原始答案

有一些選擇。他們之中有一些是：

• 使用for回圈并使其成為函式

const countNutritionalInfo = (foodMenu) => {
  let count = 0
  for (let item of foodMenu) {
    count  = item.nutritionalInfo.length
  }

  return count
}

• 使用.reduce()（我個人認為這是更好的選擇）

foodMenu.reduce((count, item) => count   item.nutritionalInfo.length, 0)

• 利用.flatMap()

foodMenu.flatMap((item) => item.nutritionalInfo)

標籤：javascript反应

上一篇：試圖運行“如果”句子但不作業，做出反應

下一篇：React-功能組件容器