Actuellement, j'ai un btn qui appelle une fonction comme suit :

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)
    },{})
};

Cela obtient des informations à partir d'un tas de tableaux comme suit :

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"]
    }
];

Lorsque le bouton est cliqué, il renvoie [Object, object] à la "resultsDiv". me donne un tas de bêtises! Y a-t-il une raison à cela ou est-ce que j'ai raté quelque chose ? je veux principalement afficher les résultats dans un tableau/une liste

Mes résultats souhaités sont quelque chose comme suit:

{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

Toute aide est grandement appréciée!

0
Freshtone 10 nov. 2020 à 15:27

1 réponse

Meilleure réponse

Quelque chose que vous pouvez faire est, après avoir créé l'objet avec le nom de l'ingrédient et la quantité, de créer une nouvelle boucle passant par tous les objets et créant les tr et 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>
0
Aks Jacoves 10 nov. 2020 à 12:59