javascript - JS - 比较 2 个对象数组

Question

我正在基于 JSON feed 创建表格 View ，因此最大的问题之一是当我的标签(行)保持一致时，我的列上的表格数据会发生变化

请引用下图

如您所见，第二条记录值 1:Three 应放置在第 1 列

这是我的对象数组:

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'}]
         ]

我希望能够对它们进行比较，以便我可以指出哪一个没有相应的标签。因此我可以用空 <td></td> 替换它们

因此，作为建议之一，这是我的尝试:

    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)

我希望我的 JSON 会像这样:

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

如果有人能提出更好的解决方案，请告诉我

提前致谢!

Answer 1

我认为您正在尝试“合并”对象，然后从中生成表行。考虑到您的对象实际上是这样的:

  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 将包含如下内容:

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

然后，如果您想渲染带有标签的 td 元素，请执行以下操作:

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