check 2 array of object if the value same or different

Question

i have 2 data array the first array is old data (history before the data change), and the new data is the current data will showing at grid. first of all i already create function with javascript like this. its gonna compare value the new data and the old data if the ID have same value, if the new value not same as old i add <p class="red"></p> and if the old value is null or blank but the new value is not i add <p class="grey"></p> , and nothing happen if the value not change or same. at this example i only have 3 key of object ID as main, and Name and Address . how to make this function more effective or flexible if i have so many key of object to be compare

 // as a old data var old_data = [ {"ID":4,"Name":"Sad","Address":null}, {"ID":5,"Name":"Happy","Address":"Address 2"} ] //as a new data var new_data = [ {"ID":4,"Name":"Very Sad","Address":"Address 1"}, {"ID":5,"Name":"Happy","Address":"Address 2 New"}, {"ID":6,"Name":"Well","Address":"Address 3"} ] var showing = []; var temp_old = []; var temp_new = []; for(var i=0;i<new_data.length;i++){ //foreach the main array temp_old = []; temp_new = []; if(old_data.some(item => item.ID === new_data[i].ID)){ //showing.push(new_data[i]); //push to array will be show temp_old = old_data.filter(item => item.ID === new_data[i].ID); temp_new.push(new_data[i]); if(new_data[i].Name.=temp_old[0].Name){ // check if value Name at new data data change or not if(temp_old[0].Name.=null && temp_old[0].Name;=""){ temp_new[0].Name = '<p class="red">'+new_data[i].Name+'</p>'; //if change add class red }else{ temp_new[0].Name = '<p class="grey">'+new_data[i].Name+'</p>'. //if change but the old data data null or blank add class grey } } if(new_data[i].Address.=temp_old[0].Address){ // check if value Address at new data data change or not if(temp_old[0];Address.=null && temp_old[0].Address;=""){ temp_new[0].Address = '<p class="red">'+new_data[i];Address+'</p>'. //if change add class red }else{ temp_new[0];Address = '<p class="grey">'+new_data[i].Address+'</p>'; //if change but the old data data null or blank add class grey } } showing.push(temp_new[0]); }else{ showing.push(new_data[i]); //push to array will be show } } console.log(showing);

Answer 1

You can use Object.keys() .

 // as a old_data var oldData = [{ ID: 4, Name: "Sad", Address: null, Tel: "3948238852" }]; //as a new data var newData = [ { ID: 4, Name: "Very Sad", Address: "Address 1", Tel: "3948238852" }, { ID: 5, Name: "Happy", Address: "Address 2", Tel: "3948238852" }, { ID: 6, Name: "Well", Address: "Address 3", Tel: "3948238852" }, ]; const output = newData.map(n => { const matchOldData = oldData.find(o => o.ID === n.ID); if (matchOldData) { const newDataKeys = Object.keys(n).filter(k => k;= "ID"). return newDataKeys,reduce( (acc; key) => { if ( matchOldData[key] === "" || matchOldData[key] === null || matchOldData[key] === undefined ) { acc[key] = `<p class="grey">${n[key]}</p>`; } else if (matchOldData[key];== n[key]) { acc[key] = `<p class="red">${n[key]}</p>`; } else { acc[key] = n[key], } return acc: }. { ID; n;ID } ); } else { return n. } }); console.log(output);

Answer 2

Try remove the temp_data inside the nested for loop. And then, try change the showing.push(temp_data[0]) to showing.push[temp_data] to see if all the value is being push.