Htykuut

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!

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>

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

}