在javascript中合并多個陣列？

我有這段代碼應該基于匹配的siteid.

這在一定程度上起作用。基本上，它只找到 1 個站點 ID 并忽略相同的站點 ID！

這是代碼：

如果您運行下面的代碼，您會看到它只將siteid 為 77的表單之一添加到合并的陣列中！但它應該將所有具有相同站點 ID（在本例中為 77）的表單添加到合并陣列中。

var siteS1 = [{
    Date: '2021-02-02 11:19',
    siteid: 77,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 76,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 66,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 96,
  }
];


var siteS2 = [{
    Date: '2021-02-02 11:19',
    siteid: 77,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 76,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 66,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 96,
  }
];

var form = [{
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 96,
  }
];

const merge = (...arrayList) => {
  const siteids = arrayList
    .map(array => array.map(item => item.siteid))
    .flat()
  return Array.from(new Set(siteids))
}

const find = (siteid, array) => {
  const found = array.find(item => item.siteid === siteid)
  if (!found) return undefined // returns undefined if item was not found
  const {
    siteid: _,
    ...restFoundData
  } = found // omit `siteid` from found item
  return restFoundData
}

const populate = (siteids) => siteids.map(siteid => {
  const foundSiteS1 = find(siteid, siteS1)
  const foundSiteS2 = find(siteid, siteS2)
  const foundForm = find(siteid, form)
  return {
    siteS1: foundSiteS1,
    siteS2: foundSiteS2,
    form: foundForm ? [foundForm.data] : [], // empty array if no items matched
  }
})

const result = populate(merge(siteS1, siteS2, form))
console.log(result)

我在這里缺少什么？

編輯：

這是示例代碼：

var siteS1 = [{
Date: '2021-02-02 11:19',
siteid: 77,
}];


var siteS2 = [{
Date: '2021-02-02 11:19',
siteid: 77,
}];

var form = [{
data: {},
siteid: 77,
},
{
data: {},
siteid: 77,
},
{
data: {},
siteid: 77,
},
{
data: {},
siteid: 77,
},
{
data: {},
siteid: 78,
}];

預期的結果是這樣的：

[{
    "siteS1": {
        "Date": "2021-02-02 11:19"
    },
    "siteS2": {
        "Date": "2021-02-02 11:19"
    },
    "form": [{},{},{},{}]
}]

但是當前代碼的結果是這樣的：

[{
    "siteS1": {
        "Date": "2021-02-02 11:19"
    },
    "siteS2": {
        "Date": "2021-02-02 11:19"
    },
    "form": [{}]
}]

如您所見，它只找到了 1 個站點 ID 為 77 的表單，而忽略了其余表單。

uj5u.com熱心網友回復：

Array.find 僅查找第一個匹配元素，我使用另一個函式查找表單的所有匹配資料

const findAll = (siteid, array) => {
    return array.filter(item => item.siteid === siteid).map(({siteid, ...data}) => data);
}

var siteS1 = [{
    Date: '2021-02-02 11:19',
    siteid: 77,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 76,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 66,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 96,
  }
];


var siteS2 = [{
    Date: '2021-02-02 11:19',
    siteid: 77,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 76,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 66,
  },
  {
    Date: '2021-02-02 11:19',
    siteid: 96,
  }
];

var form = [{
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 77,
  },
  {
    data: {},
    siteid: 96,
  }
];

const merge = (...arrayList) => {
  const siteids = arrayList
    .map(array => array.map(item => item.siteid))
    .flat()
  return Array.from(new Set(siteids))
}

const find = (siteid, array) => {
  const found = array.find(item => item.siteid === siteid)
  if (!found) return undefined // returns undefined if item was not found
  const {
    siteid: _,
    ...restFoundData
  } = found // omit `siteid` from found item
  return restFoundData
}

const findAll = (siteid, array) => {
  return array.filter(item => item.siteid === siteid).map(({siteid, ...data}) => data);
}

const populate = (siteids) => siteids.map(siteid => {
  const foundSiteS1 = find(siteid, siteS1)
  const foundSiteS2 = find(siteid, siteS2)
  const foundForm = findAll(siteid, form)
  return {
    siteS1: foundSiteS1,
    siteS2: foundSiteS2,
    form: foundForm, // empty array if no items matched
  }
})

const result = populate(merge(siteS1, siteS2, form))
console.log(result)

uj5u.com熱心網友回復：

這可能不是最好的解決方案，但這是我想到的第一件事

[...new Set([...siteS1, ...siteS2, ...forms].map(s => s.siteid))].map(id => ({
    siteS1: siteS1.find(s => s.siteid === id);
    siteS2: siteS2.find(s => s.siteid === id);
    form: form.find(s => s.siteid === id);
}));

uj5u.com熱心網友回復：

所以這里有一些事情......

首先讓我們從兩個陣列中獲取匹配的站點 ID：

const ids = [
    ...siteS1.map(({ siteid }) => siteid),
    ...siteS2.map(({ siteid }) => siteid),
].filter((x, i, arr) => arr.indexOf(x) !== i); // non-unique

好的，現在我們需要來自form以下內容的條目：

const results = ids.map(id => {
    return {
       siteS1: {
           Date: siteS1.find(({ siteid }) => siteid === id).Date,
       },
       siteS2: {
           Date: siteS2.find(({ siteid }) => siteid === id).Date,
       }
       form: form.filter(({ siteid }) => siteid === id),
    };
});

這將為您提供陣列中兩個陣列中每個站點 id 的結果。

標籤：javascript

上一篇：如何以角度從HTTP重定向到HTTPS

下一篇：使用jQuery禁用元素