减少对象数组以在 table 中呈现额外的行

Question

api 调用

返回了一些数据

    licenseInformation: [
  {
    licenseId: "b6068748363d3400",
    authorizedSerialNumbers: [
      {
        serialNumber: "simulated device"
      },
      {
        serialNumber: "2342432"
      }
    ],
    noneBefore: "*.*.*-0",
    noneAfter: "*.*.*-0"
  },
  {
    licenseId: "a6394523t4599000",
    authorizedSerialNumbers: [
      {
        serialNumber: "simulated device"
      },
      {
        serialNumber: "23412414124141412"
      }
    ],
    noneBefore: "1.*.*-0",
    noneAfter: "2.*.*-0"
  }
]

每个licenseId可以有几个serialNumbers。我想在 table 的新行中渲染每个额外的 serialNumber。我不能完全让 reduce 方法做我想做的事。我尝试了以下操作：

const licenseBySerial = loadedLicenses.reduce((acc, l) => {
const { licenseId, authorizedSerialNumbers } = l;
if (authorizedSerialNumbers.length > 1) {
  const licenseList = authorizedSerialNumbers.map(sn => ({
    licenseId,
    serialNumber: sn.serialNumber
  }));
  acc.concat(licenseList);
  return acc;
}
const license = {
  licenseId,
  serialNumber: authorizedSerialNumbers[0].serialNumber
};
console.log(license);
acc.push(licenseBySerial);
console.log(acc);
return acc;
}, []);

我有一个codesandbox with the code here

这是我想要的结果的图片，红线表示应该渲染额外 serialNumber(s) 的位置。

Answer 1

第一个片段不是您想要的，但我认为还可以。我在单元格内为 serialNumbers 创建了一个 table。

const l = [{
    licenseId: "b6068748363d3400",
    authorizedSerialNumbers: [{
        serialNumber: "simulated device"
      },
      {
        serialNumber: "2342432"
      }
    ],
    noneBefore: "*.*.*-0",
    noneAfter: "*.*.*-0"
  },
  {
    licenseId: "a6394523t4599000",
    authorizedSerialNumbers: [{
        serialNumber: "simulated device"
      },
      {
        serialNumber: "23412414124141412"
      }
    ],
    noneBefore: "1.*.*-0",
    noneAfter: "2.*.*-0"
  }
]

const tableRender = (d) => {
  let html = ''
  html += '<table>'
  d.forEach(e => {
    html += '<tr>'
    html += `<td>${e.licenseId}</td>`
    html += `<td>`
    html += '<table>'
    e.authorizedSerialNumbers.forEach(el => {
      html += '<tr>'
      html += `<td>${el.serialNumber}</td>`
      html += '</tr>'
    })
    html += '</table>'
    html += `</td>`
    html += `<td>${e.noneBefore}</td>`
    html += `<td>${e.noneAfter}</td>`
    html += '</tr>'
  })
  html += '</table>'
  document.getElementById('container').innerHTML = html
}

tableRender(l)

table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<div id="container"></div>

第二个片段就是您要的。 table根据serialNumber有行，但只显示licenseId第一行的数据（除了序列号).

const l = [{
    licenseId: "b6068748363d3400",
    authorizedSerialNumbers: [{
        serialNumber: "simulated device"
      },
      {
        serialNumber: "2342432"
      }
    ],
    noneBefore: "*.*.*-0",
    noneAfter: "*.*.*-0"
  },
  {
    licenseId: "a6394523t4599000",
    authorizedSerialNumbers: [{
        serialNumber: "simulated device"
      },
      {
        serialNumber: "23412414124141412"
      }
    ],
    noneBefore: "1.*.*-0",
    noneAfter: "2.*.*-0"
  }
]

const tableRender = (d) => {
  let html = ''
  html += '<table>'
  d.forEach(e => {
    e.authorizedSerialNumbers.forEach((el, i) => {
      html += '<tr>'
      html += `<td>${i === 0 ? e.licenseId : ''}</td>`
      html += `<td>${el.serialNumber}</td>`
      html += `<td>${i === 0 ? e.noneBefore : ''}</td>`
      html += `<td>${i === 0 ? e.noneAfter : ''}</td>`
      html += '</tr>'
    })
  })
  html += '</table>'
  document.getElementById('container').innerHTML = html
}

tableRender(l)

table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<div id="container"></div>

减少对象数组以在 table 中呈现额外的行

Reduce array of objects to render additional rows in a table

javascript

reactjs

semantic-ui