How do I change the value of the array in the object in the array?-CodePudding

When I press the button, I want to nullify the values of the items in the itemSold and itemGet in the customers. How do I do this?

What should be done?
1- I have to press the button
2- When the button is pressed, the values inside should be null
I want to do this :

    let customers = [{
        active: true,
        id: 1,
        product: {
          itemSold: [null, null],
          itemGet: [null, null],
        },
      },
      {
        active: true,
        id: 2,
        product: {
          itemSold: [null, null],
          itemGet: [null, null],
        },
      },
    ];

let customers = [{
    active: true,
    id: 1,
    product: {
      itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
      itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
      itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
    },
  },
];


  
let clickButton = document.querySelector("#clickButton");
let products = [];


clickButton.addEventListener("click", removeProducts()});

function removeProducts(){}

<button id="clickButton" >Click
</button>

CodePudding user response：

You can use Array.map() to create a new array populated with the results of calling a provided function on every element in the calling array.

let customers=[{active:!0,id:1,product:{itemSold:[{id:1,name:"car"},{id:2,name:"home"}],itemGet:[{id:3,name:"phone"},{id:4,name:"fly"}]}},{active:!0,id:2,product:{itemSold:[{id:5,name:"lamb"},{id:6,name:"mouse"}],itemGet:[{id:7,name:"mouse pad"},{id:8,name:"tv"}]}}];

document.querySelector("#clickButton").addEventListener("click", removeProducts);

function removeProducts() {
  customers = customers.map(customer => ({
    ...customer,
    product: {
      itemSold: customer.product.itemSold.map(i => null),
      itemGet: customer.product.itemGet.map(i => null)
    }
  }))
  console.log(customers)
}

<button id="clickButton">Click
</button>

CodePudding user response：

I am not sure why you want to do this, but here is a way without knowing the itemSold or itemGet keys

Also please note how to add a function as an event handler. Note the () is not on the parameter unless the handler function returns a function

const removeProducts = () => {
  customers.forEach(({product}) => Object.keys(product)
    .forEach(key => product[key] = product[key].map(item => null))
  )
  console.log(customers)
};
const clickButton = document.getElementById("clickButton");
clickButton.addEventListener("click", removeProducts);

<button id="clickButton">Click</button>

<script>
  // moving it here for decluttering
let customers = [{
    active: true,
    id: 1,
    product: {
      itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
      itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
      itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
    },
  },
];  
</script>

CodePudding user response：

Without having to loop multiple times, you can do this

let customers = [{
    active: true,
    id: 1,
    product: {
      itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
      itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
      itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
    },
  },
];

let clickButton = document.querySelector("#clickButton");
let products = [];


clickButton.addEventListener("click", removeProducts);

function removeProducts() {
   customers.forEach((customer) => {
    customer.product.itemSold = new Array(customer.product.itemSold.length).fill(null)
   customer.product.itemGet = new 
    Array(customer.product.itemGet.length).fill(null)
})

console.log(customers)

}

<button id="clickButton" >Click
</button>

CodePudding user response：

You can update the array by iteration Try this code

var customers = [{
    active: true,
    id: 1,
    product: {
      itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
      itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
      itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
    },
  },
];
let clickButton = document.querySelector("#clickButton");
var products = [];
/* unction removeProducts(){
  alert("coming")
} */
$("#clickButton").click(function(){
    console.log(customers[0]);
  for (var i =0; i< customers.length;i  ){
    customers[i].product.itemSold = [null,null]
    products.push(customers[i])
  }
  console.log("sssssssssssssss")
console.log(products);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="clickButton" >Click
</button>

CodePudding user response：

What you are asking for can be easily done just setting to null the properties of the object and such logic was factored in this demo like this:

function nullifyCustomerData(customer){  
  customer.product.itemSold = nullifyArrayItems(customer.product.itemSold);
  customer.product.itemGet = nullifyArrayItems(customer.product.itemSold);
}

function nullifyArrayItems(array){
  return array.map( item => null );  
}

The challenge here is how to determine the id of the customer willing to be nullified in the original data structure.

This is the way I'll find a given customer inside the array:

customer = customers.find( customer => customer.id == customerId );

This demo takes care of rendering the object inside a table with a remove button one for each customer having the data-customerid data attribute that will be used by the corresponding click event handler to understand which customer id should be nullify in the customers array.

The same event handlers expect such data attribute to be set to ALL in case the wish is to nullify all the customers and not just a specific id.

let customers = [
  {
    active: true,
    id: 1,
    product: {
      itemSold: [{id:1,name : 'car'}, {id:2,name : 'home'}],
      itemGet: [{id:3,name : 'phone'}, {id:4,name : 'fly'}],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [{id:5,name : 'lamb'}, {id:6,name : 'mouse'}],
      itemGet: [{id:7,name : 'mouse pad'}, {id:8,name : 'tv'}],
    },
  },
];

//on document ready
document.addEventListener('DOMContentLoaded',()=>{
  //shows the customers data
  renderCustomers();
  
  //add click event listener to removeAll button
  const removeAllButton = document.getElementById('removeAll');
  removeAllButton.addEventListener("click", removeProducts);  
});

//renders the customers data inside the #customers table
function renderCustomers(){  
  const customersTable = document.querySelector('#customers > tbody');  
  customersTable.innerHTML = '';    
  customers.forEach(customer => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${customer.id}</td>
      <td>${JSON.stringify(customer.product.itemSold)}</td>
      <td>${JSON.stringify(customer.product.itemGet)}</td>`;

    const removeButton = document.createElement('button');
    removeButton.dataset.customerid = customer.id;
    removeButton.innerText = 'Remove';
    removeButton.addEventListener('click', removeProducts);    
    const td = document.createElement('td');
    td.append(removeButton);    
    tr.append(td);
    
    customersTable.append(tr);
  });
}

//function to mullify the customer data belonging to the data attribute data-customerid of the remove button clicked
function removeProducts(event){
  
  //retrieves the customerid bound to the given button
  const customerId = event.target.dataset.customerid;  
  
  if(customerId == 'ALL'){
    customers.forEach(customer => {
      nullifyCustomerData(customer);
    });
  }
  else{
    //finds the customer having the specific id inside the customers array
    customer = customers.find( customer => customer.id == customerId );  
    nullifyCustomerData(customer);
  }  
  
  //refreshes the customers data in the table
  renderCustomers();
}

//function to nullify the customer object passed as argument
function nullifyCustomerData(customer){  
  customer.product.itemSold = nullifyArrayItems(customer.product.itemSold);
  customer.product.itemGet = nullifyArrayItems(customer.product.itemSold);
}

//function to nullify every item in the array passed as argument
function nullifyArrayItems(array){
  return array.map( item => null );  
}

#customers{
  border-collapse: collapse;
}

#customers th,
#customers td {
   border: solid 1px;
   padding: 1em;
}

button {
  cursor: pointer;
  padding: 1em;
}

<button id="removeAll" data-customerid='ALL'>Remove ALL</button>

<table id="customers">
  <thead>
    <tr>
      <th colspan="4">Customers</th>
    </tr>
    <tr>
      <th>ID</th>
      <th>ItemsSold</th>
      <th>ItemsGet</th>
      <th></th>
    </tr>
  </thead>
  <tbody>    
  </tbody>
</table>