CODEWITHSUNDEEP
javascriptreactjsloopsoopecmascript-6
Amy Lee
Amy Lee

Reputation: 275

JS - Comparing 2 Array of Objects

I'm creating table view based on a JSON feed, so one of the biggest is while my labels(row) stays consistent, the table data on my cols changes

Please refer to the image below

enter image description here

As you can see, on the 2nd record value 1:Three should be placed on col 1

This is my array of objects:

const label = [{label: 'test1', labelId:'1'},{label: 'test2', labelId:'2'}]
const cols = [
            [{labelId:'1', value:'One'},{labelId:'2', value:'Two'}],
            [{labelId:'1', value:'Three'}],
            [{labelId:'2', value:'Four'}]
         ]

I wanna be able to compare them so I can indicate which one that doesn't have corresponding label. Thus i'll be able to replace them by empty <td></td>

So as one of the suggestion, here's my attempt:

    const labelCols = cols.map(col => {
        const arrayOfMatch = labels.findIndex(label => label.labelId === col.labelId);
        console.log(col)
        if(arrayOfMatch !== 1) { //matching label exists
        return { ...col, ...labels[arrayOfMatch] };
        } else {
        return { ...col, label: '' }; // insert empty label
        }
    });
    console.log(labelCols)

I'm hopping my JSON will shape up like this:

const cols = [
            [{labelId:'1', value:'One'},{labelId:'2', value:'Two'}],
            [{labelId:'1', value:'Three'},{}],
            [{},{labelId:'2', value:'Four'}]
         ]

Let me know if anyone can come up with better solution

Thanks in advance!

Upvotes: 0

Views: 80

Answers (2)

sdabrutas
sdabrutas

Reputation: 1517

I think you're trying to "merge" your objects then generate table rows out of them. Considering your objects are actually like these:

  const labels = [{label: 'test1', labelId:'1'},{label: 'test2', labelId:'2'}];
  const cols = [{labelId:'1', value:'One'},
                {labelId:'2', value:'Two'},
                {labelId:'3', value:'Three'},
                {labelId:'4', value:'Four'},
              ];

  const labelCols = cols.map(col => {
    const arrayOfMatch = labels.findIndex(label => label.labelId === col.labelId);
    if(arrayOfMatch !== -1) { //matching label exists
      return { ...col, ...labels[arrayOfMatch] };
    } else {
      return { ...col, label: '' }; // insert empty label
    }
  });

labelCols will be containing something like this:

labelCols = [{labelId:'1', value:'One', label: 'test1'},
             {labelId:'2', value:'Two', label: 'test2'},
             {labelId:'3', value:'Three', label: ''},
             {labelId:'4', value:'Four', label: ''},
            ];

Then, if you want to render td elements with labels, do this:

  <table>
    //other codes
    <tr>
      {labelCols.map(item => <td>{item.label}</td>)}
    </tr>
    //other codes
  </table>

Upvotes: 1

Atul Bansode
Atul Bansode

Reputation: 229

// For comparing two array, array must be with same type of same length
var isEqualArray = labels.map((label)=>{
    cols.map((col)=> label.labelId === col.labelId)
}).filer((item) => item === true)
  .length === labels.length;


if (isEqualArray ) {
    // Equal
}

Upvotes: 0

Related Questions