Question

我正在基于JSON feed创建表视图，所以最大的问题之一就是当我的标签（行）保持一致时，cols上的表数据会更改

请参考下图

如您所见，在第二条记录值1上：应在第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>

Answer 2

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

JS-比较2个对象数组

2 个答案: