如何使用串联数组创建 table

Question

目前我有一个 btn 调用函数如下：

function ingredientsList()  {
    const allIngredients = [].concat(...ingredientsResults.map(obj => obj.ingredients))
    
    allIngredients.reduce((acc, item) => {
        acc[item] = (acc[item] || 0) + 1
        return (document.getElementById("resultsDiv").innerText = acc)
    },{})
};

这从一堆数组中获取信息如下：

const ingredientsResults = [
    {
        dinnerName: "Vegetable Soup",
        ingredients: ["potatoes", "onion", "spring onion", "lentils", "beans", "turnip" ]
    },
    {
        dinnerName: "Spaghetti",
        ingredients: ["spaghetti pasta", "tomato box","tomato box", "onion", "sundried tomatoes", "tomato paste", "lentils"]
    },
    {
        dinnerName: "Fiskebolle",
        ingredients: ["box of fiskebolle", "box of fiskebolle", "potatoes", "brocolli", "carrots"]
    }
];

单击按钮时 returns [Object, object] 回到“resultsDiv”。我已经研究了如何将其放入列表/table 中并带有连接结果但是我唯一找到的是 JSON.stringify() ，这给了我一堆废话！这是有原因的还是我错过了什么？我主要想在 table / list

中显示结果

我想要的结果如下：

{potatoes: 2, onion: 2, spring onion: 1, lentils: 2, beans: 1, …}
beans: 1
box of fiskebolle: 2
brocolli: 1
carrots: 1
lentils: 2
onion: 2
potatoes: 2
spaghetti pasta: 1
spring onion: 1
sundried tomatoes: 1
tomato box: 2
tomato paste: 1
turnip: 1

非常感谢任何帮助！

Answer 1

你可以做的是在用成分名称和数量创建对象后，它正在创建一个遍历所有对象的新循环并创建 tr 和 td

const ingredientsResults = [
    {
        dinnerName: "Vegetable Soup",
        ingredients: ["potatoes", "onion", "spring onion", "lentils", "beans", "turnip" ]
    },
    {
        dinnerName: "Spaghetti",
        ingredients: ["spaghetti pasta", "tomato box","tomato box", "onion", "sundried tomatoes", "tomato paste", "lentils"]
    },
    {
        dinnerName: "Fiskebolle",
        ingredients: ["box of fiskebolle", "box of fiskebolle", "potatoes", "brocolli", "carrots"]
    }
];


function ingredientsList()  {
    const allIngredients = [].concat(...ingredientsResults.map(obj => obj.ingredients))
    
    const result = allIngredients.reduce((acc, item) => {
        acc[item] = (acc[item] || 0) + 1
        return acc // change this
    },{})
    // add this
    const table = document.querySelector('#myTable')
    
    Object.keys(result).forEach(dname => {
      const tr = document.createElement('tr')
      const td1 = document.createElement('td')
      const td2 = document.createElement('td')
      
      td1.innerText = dname
      td2.innerText = result[dname]
      
      tr.append(td1)
      tr.append(td2)
      
      table.append(tr)
    })
    
    // end
};

ingredientsList()

<table id="myTable">

</table>

如何使用串联数组创建 table

how to create a table with a concatenated array

javascript

html-table

stringify