Как отобразить массив один-ко-многим в Javascript

Question

Я пытаюсь преобразовать следующие JSON данные с помощью функции карты в соответствующий вывод

[{"jobId":100049,"name":"Drilling","jobNumber":"1222455","address":"Ahmedabad","city":"Ahmedabad","state":"1","zip":"38003","active":true,"jobOwnerId":100002,"jobOwnerName":"Troy Thomson","createdBy":"","createdOn":"2020-03-15T18:42:25.6533333","modifiedBy":"","modifiedOn":"2020-03-16T13:21:53.0333333","members":[{"memberId":100001,"memberName":"Hardik Gondalia"},{"memberId":100004,"memberName":"Micheal T. Angelo"}],"assets":[{"assetId":100004,"assetName":"Minima ullam non mol"}]},{"jobId":100051,"name":"Drilling The Hole","jobNumber":"11111","address":"201, AA 333 Steet, Time Square","city":"Boston","state":"1","zip":"11111","active":true,"jobOwnerId":100001,"jobOwnerName":"Hardik Gondalia","createdBy":"","createdOn":"2020-03-25T11:12:13.89","modifiedBy":"","modifiedOn":"2020-03-25T11:12:32.1266667","members":[{"memberId":100002,"memberName":"Troy Thomson"}],"assets":[{"assetId":100005,"assetName":"Drill Machine P2222"}]}]

Желаемый вывод:

[{"jobid":100049,"memberid":100001],{"jobid":100049,"memberid":100004],{"jobid":100051,"memberid":100002]}

Как вы видите, задание является json объектом и иметь массив членов и активов внутри него. Я хочу повторить jobid, если он имеет несколько членов или ресурсов.

Я попробовал:

const assignmentAssetModel = this.jobList.map(i => ({ jobid: i.jobId, assetid: i.assets.map(j => j.assetId) }));

Но он дает мне следующий вывод:

[{"jobid":100049,"memberid":[100001,100004]},{"jobid":100051,"memberid":[100002]}]

Как вы можете, я хочу повторить jobid, если он имеет более одного memberid

Answer 1

Вы можете взять Array#flatMap и отобразить внешние и внутренние свойства.

var data = [{ jobId: 100049, name: "Drilling", jobNumber: "1222455", address: "Ahmedabad", city: "Ahmedabad", state: "1", zip: "38003", active: true, jobOwnerId: 100002, jobOwnerName: "Troy Thomson", createdBy: "", createdOn: "2020-03-15T18:42:25.6533333", modifiedBy: "", modifiedOn: "2020-03-16T13:21:53.0333333", members: [{ memberId: 100001, memberName: "Hardik Gondalia" }, { memberId: 100004, memberName: "Micheal T. Angelo" }], assets: [{ assetId: 100004, assetName: "Minima ullam non mol" }] }, { jobId: 100051, name: "Drilling The Hole", jobNumber: "11111", address: "201, AA 333 Steet, Time Square", city: "Boston", state: "1", zip: "11111", active: true, jobOwnerId: 100001, jobOwnerName: "Hardik Gondalia", createdBy: "", createdOn: "2020-03-25T11:12:13.89", modifiedBy: "", modifiedOn: "2020-03-25T11:12:32.1266667", members: [{ memberId: 100002, memberName: "Troy Thomson" }], assets: [{ assetId: 100005, assetName: "Drill Machine P2222" }] }],
    result = data.flatMap(({ jobId, members }) =>
        members.map(({ memberId }) => ({ jobId, memberId })));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Вместо этого следует использовать метод .reduce:

this.jobList.reduce((acc, { members, jobId }) => {
   return [...acc, ...members.map(({ memberId }) => ({ jobId, memberId }))]; 
}, []);

Если вы ориентируетесь на более новую версию javascript (ES2019), вы также можете использовать flatMap:

this.jobList.flatMap(({ members, jobId }) => members.map(({ memberId }) => ({ jobId, memberId })));

Answer 3

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

const jobList = [{"jobId":100049,"name":"Drilling","jobNumber":"1222455","address":"Ahmedabad","city":"Ahmedabad","state":"1","zip":"38003","active":true,"jobOwnerId":100002,"jobOwnerName":"Troy Thomson","createdBy":"","createdOn":"2020-03-15T18:42:25.6533333","modifiedBy":"","modifiedOn":"2020-03-16T13:21:53.0333333","members":[{"memberId":100001,"memberName":"Hardik Gondalia"},{"memberId":100004,"memberName":"Micheal T. Angelo"}],"assets":[{"assetId":100004,"assetName":"Minima ullam non mol"}]},{"jobId":100051,"name":"Drilling The Hole","jobNumber":"11111","address":"201, AA 333 Steet, Time Square","city":"Boston","state":"1","zip":"11111","active":true,"jobOwnerId":100001,"jobOwnerName":"Hardik Gondalia","createdBy":"","createdOn":"2020-03-25T11:12:13.89","modifiedBy":"","modifiedOn":"2020-03-25T11:12:32.1266667","members":[{"memberId":100002,"memberName":"Troy Thomson"}],"assets":[{"assetId":100005,"assetName":"Drill Machine P2222"}]}]


const jobsPerMember = jobList.reduce((acc, cur) => {
  cur.members.forEach((member) => acc.push({
      jobid: cur.jobId,
      memberid: member.memberId
  }))
  return acc
},[])

console.log(jobsPerMember)