Change JSON values for each object with a button

JavaScript
#1

I have an array map with json objects in javascript, the map consists of a title and list items, for list item Amount i use add and minus button, to change values in Amount, how can i change the values in the html but for each one object only?

const outputHtml = matches => {
    if (matches.length > 0) {
        const lookUpItem = matches.map(match => `
        <div class="foodInfo">
                <h4 id="title">${match.foodDesc}</h4>
                <small><span class="foodDetails">
                    <li>Protein: ${match.Protein} g</li>
                    <li>Calories: ${match.Calories} cals</li>
                    <li>Total Fat: ${match.Fat} g</li>
                    <li><button onclick="minus()" id="minus">-</button>
                        <span id="amount">Amount: <span id="amountNumber">${match.amount1}</span> / ${match.msreDesc1} </span>
                        <button onclick="add()" id="add">+</button> </li>
                    <button onclick="submit()" id="submit">Add to Diary</button>
                </span></small>
        </div>
        `
).join('');
        itemList.innerHTML = lookUpItem;
    }
}

The json file is fetched with api url, here snippet of .json file

[
    {
       "foodDesc": "French baguette by Panera bread",
       "foodId": 738220,
       "Calories": "263,1578947",
       "Fat": "1,75438596",
       "amount1": "1",
       "Protein": "8,77192982",
       },
     {
       "foodDesc": "Broccoli cheddar by Panera bread",
       "foodId": 738375,
       "Calories": "300",
       "Fat": "19",
       "amount1": "1,5",
       "Protein": "12",
       },
     {
       "foodDesc": "Whole grain baguette by Panera bread",
       "foodId": 738240,
       "Calories": "245,6140351",
       "Fat": "1,75438596",
       "amount1": "1",
       "Protein": "10,52631579"
        }
    ]

In HTML looks like this
taUbh

#2

I’m not sure I understand completely, but I would expect that that add function needs to know what element in the array on which it is acting. Maybe you could encode that information in the button with a value prop? Or maybe there is some other way to figure it out from the info coming in on the event.

1 Like
#3

How can i get the element? Should search for the element in the function or create a new one?

1 Like
#4

I’m lost in React world where things work a little differently, but can’t you do something like:

<button onclick="add()" id="add" value="add-for-index${idx}">

That index will come from the map method, like:

const lookUpItem = matches.map((match, idx) => `
#5

Why ${idx}? Should that be a value in the add function? How does that work?

#6

Sure, I forgot that you can just pass that in the function - I forgot you could pass values like that in HTML (I’ve been in React Native world too long). Why idx? Because it will identify which element in the array needs adjusting.

#7

How would it look in the function?

const outputHtml = matches => {
    if (matches.length > 0) {
        const lookUpItem = matches.map((match, index) => `
        <div class="foodInfo">
                <h4 id="title">${match.foodDesc}</h4>
                <small><span class="foodDetails">
                    <li>Protein: ${match.Protein} g</li>
                    <li>Calories: ${match.Calories} cals</li>
                    <li>Total Fat: ${match.Fat} g</li>
                    <li><button onclick="minus('amountNumber_${index}')" id="minus">-</button>
                        <span id="amount">Amount: <span id="amountNumber_${index}">${match.amount1}</span> / ${match.msreDesc1} </span>
                        <button onclick="add('amountNumber_${index}')" id="add_${index}">+</button> </li>
                    <button onclick="submit()" id="submit">Add to Diary</button>
                </span></small>
        </div>
        `
).join('');
        itemList.innerHTML = lookUpItem;
    }
}

function add(el) {
    {
        amountNum = parseInt(document.getElementById(el)) + 1;

        document.getElementById(el).innerText = amountNum;

        console.log(amountNum.innerText)

    }
}
#8

Yeah, probably something like that. Although, since you are passing it directly, you can probably just pass the index and receive it as the parameter in the add function.

#9

How can I add the number to the parameter, becuz i dont want to only add the amount, but by increasing the amount other list items, should also change?

#10

You’re going to have to be more specific. What does “number” mean in that sentence. And I’m not sure what the rest of that sentence means. What do you want that button to do and what information does it need to accomplish that?

#11

By number i meant the amount, means the amount is now set on the value it has in the json file, by clicking on the add button, the amount adds 1 value, means from 1 to 2, but it also by incresing amount increases for example the protein/fat value (not by one but by value)…

1bread = 23g fat
2bread = 46g fat

What i dont know is how to increase the values like that for each good/element