Уменьшите массив объектов для отображения дополнительных строк в таблице.

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. Я хочу сделать каждый дополнительный 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;
}, []);

У меня есть коды и поле с кодом здесь

Вот картинка с моим желаемым результатом, с красными линиями, обозначающими гдедополнительные serialNumber(s) должны быть предоставлены.

Answer 1

1. Первый фрагмент не совсем то, что вы хотели, но я думаю, что все в порядке. Я создал таблицу для serialNumbers внутри ячейки.

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>

Второй фрагмент - это то, что вы просили. В таблице есть строки в соответствии с serialNumber s, но отображаются только данные в первой строке licenseId (за исключением serialNumber ).

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>