JS - Comparing 2 Array of Objects

Question

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

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!

sdabrutas · Accepted Answer · 2018-11-23 03:22:59Z

1

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>

answered Nov 23, 2018 at 3:22

sdabrutas

1,5273 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amy Lee Over a year ago

Awesome! yeah that's what i want, lemme try it

Amy Lee Over a year ago

Hey Sandy, thanks for the solution, i think im almost there but i realised that i've pasted in the wrong code, so here's my issue i'm able to pump in the label into each object inside an array, but i can't seems to pump in dummy object just to ensure it fill in void <td></td>, just wondering if you'll be able to help me to solve my additional issue, thanks heaps again!

Amy Lee Over a year ago

I just have, let me know if it's still unclear. Thanks again for your help

Atul Bansode · Accepted Answer · 2018-11-23 03:20:09Z

0

// 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
}

edited Nov 23, 2018 at 3:20

answered Nov 23, 2018 at 3:12

Atul Bansode

2291 silver badge5 bronze badges

Collectives™ on Stack Overflow

JS - Comparing 2 Array of Objects

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related