How to get specific array of that button when I click from array in JavaScript

Question

I am making a super simple shopping cart application in JavaScript. But I'm stuck in one place that When I run a loop of objects, I want to get the array of the specific product out of all the arrays of objects when I am clicking. Can someone tell me how to get that button array and match it with the array

<ul id="laundry-value"></ul>
<ul id="new-laundry-value"></ul>

<script>
        var laundryValue = [
            {id: 1, name: 'Sunglasses', price: 25},
            {id: 2, name: 'Jeans', price: 10},
            {id: 3, name: 'Shirts', price: 15},
            {id: 4, name: 'Cables', price: 20}
        ]
        
        var newLaundryValue = [];

        for (var i in laundryValue) {
            document.getElementById('laundry-value').innerHTML += '<li>' + '<div class="laundry-name">' + laundryValue[i].name + '</div>' + '<div class="laundry-price">' + laundryValue[i].price + '</div>' + '<button class="laundry-btn" onclick="getLaundryClick()">' + 'Add' + '</button>' +  '</li>';
        }
        
        function getLaundryClick() {
            for (var obj = 0; obj < laundryValue.length; obj++) {
                var newValue = laundryValue[obj].id =;
            }
            console.log(newValue)
        }

    </script>

`laundryValue` is an array so in order to iterate on it you need to use for..of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of — Mario, Jul 04 '20 at 02:52
In this line `var newValue = laundryValue[obj].id =;` you get a `Uncaught SyntaxError` — Mario, Jul 04 '20 at 02:56
I have to write the same button array thats why i left empty space — Ali Asger, Jul 04 '20 at 02:59
what is 'all the arrays of the JSON ' ? is it the laundryValue array? Then you have `var newLaundryValue = [];` but that var isn't reused anywhere. Or is newValue supposed to be that? — Salix, Jul 04 '20 at 03:09
if you have the id of the product, you can find it's index (https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition) and then use splice. — Salix, Jul 04 '20 at 03:12
There is no JSON here. JSON is a text format. You have an array of objects. — Heretic Monkey, Jul 04 '20 at 03:44

score 0 · Accepted Answer · answered Jul 04 '20 at 02:57

I think you may want to use for...of inside the loop instead of for...in

<ul id="laundry-value"></ul>
<ul id="new-laundry-value"></ul>

<script>
    var laundryValue = [
        {id: 1, name: 'Sunglasses', price: 25},
        {id: 2, name: 'Jeans', price: 10},
        {id: 3, name: 'Shirts', price: 15},
        {id: 4, name: 'Cables', price: 20}
    ]

    var newLaundryValue = [];

    for (var item of laundryValue) {
        document.getElementById('laundry-value').innerHTML += 
        '<li>' + 
            '<div class="laundry-name">' + item.name + '</div>' + 
            '<div class="laundry-price">' + item.price + '</div>' + 
            '<button class="laundry-btn" onclick="getLaundryClick(' + item.id + ')">' + 'Add' + '</button>' +  
        '</li>';
    }

    function getLaundryClick(id) {
        console.log(id);            
        console.log('item:', laundryValue.find(x => x.id == id));
    }

</script>

thanks but What is the role of x in laundryValue.find(x => x.id == id) — Ali Asger, Jul 04 '20 at 03:01
@AliAsger Because we have already passed the id via `getLaundryClick` function, we can use it to find specific item/product in the array. For more information about `find` method, you can go [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) — Tân, Jul 04 '20 at 03:04

score 0 · Answer 2 · answered Jul 04 '20 at 03:07

Please try the following example

const laundryValueNode = document.getElementById("laundry-value");
const laundryValue = [
  { id: 1, name: "Sunglasses", price: 25 },
  { id: 2, name: "Jeans", price: 10 },
  { id: 3, name: "Shirts", price: 15 },
  { id: 4, name: "Cables", price: 20 },
];

laundryValueNode.innerHTML = laundryValue
  .map(
    ({ id, name, price }) => `<li>
  <div class="laundry-name">
    ${name}
  </div>
  <div class="laundry-price">
    ${price}
  </div>
  <button onClick="getLaundryClick(${id})">Add</button>
</li>`
  )
  .join("");

function getLaundryClick(id) {
  const newValue = laundryValue.find((entry) => entry.id === id);

  console.log(newValue);
}

<ul id="laundry-value"></ul>
<ul id="new-laundry-value"></ul>

See

Array.prototype.find()

How to get specific array of that button when I click from array in JavaScript

2 Answers2