將對象中的數組轉換為單個字符串

Question

如何在object之間分割images array ？

例如，使用下面的JSON 。 如何生成每個itemUrl及其關聯的productCode的return string ？

這個JSON

{
  "products": [
    {
      "productCode": "ID1",
      "images": [
        {
          "id": 1,
          "itemUrl": "https://img.com/1.JPG"
        },
        {
          "id": 2,
          "itemUrl": "https://img.com/2.JPG"
        }
      ]
    },
    {
      "productCode": "ID2",
      "images": [
        {
          "id": 3,
          "itemUrl": "https://img.com/3.JPG"
        },
        {
          "id": 4,
          "itemUrl": "https://img.com/4.JPG"
        },
        {
          "id": 5,
          "itemUrl": "https://img.com/5.JPG"
        }
      ]
    }
  ]
}

成為

https://img.com/1.JPG
https://img.com/2.JPG
https://img.com/3.JPG
https://img.com/4.JPG
https://img.com/5.JPG

目前，如果我要使用

for (const tour of data.products) {
  console.log(tour.images[0].itemUrl);
  ...

回報顯然會return

https://img.com/1.JPG
https://img.com/3.JPG

但是，當

let imageEach = tour.images;
let output = [];
imageEach.forEach(item => {
  output.push(item.itemUrl);
});
  ...

我得到了return

[{
  https://img.com/1.JPG,
  https://img.com/2.JPG
}]

[{
  https://img.com/3.JPG
  https://img.com/4.JPG
  https://img.com/5.JPG
}]

Answer 1

您可以通過嘗試這樣的事情Array.reduce遍歷產品和Array.map要經過項目並獲得itemUrl ：

 const data = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] } const result = data.products.reduce((r,{images}) => { r.push(...images.map(x => x.itemUrl)) return r }, []) console.log(result.join('\\n')) 

甚至更短，如@Prassana所建議的那樣，通過使用ES6數組傳播更多：

 const data = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] } const result = data.products.reduce((r,{images}) => [...r, ...images.map(x => x.itemUrl)], []) console.log(result.join('\\n')) 

Answer 2

嘗試

var result = [];
for (var i = 0; i < data.products.length; i++) {
    for (var j = 0; j < data.products[i].images.length; j++){
        result.push(data.products[i].images[j].itemUrl);
    }
}
console.log(result);

Answer 3

您需要Array.concat

 const data = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] } let urls = [] data.products.forEach(item => { urls = urls.concat(item.images.map(img => img.itemUrl)) }) console.log(urls) 

Answer 4

你可以試試看。

 let json = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] } json.products.forEach(product => { console.log(product.productCode + ": ") product.images.forEach(i => console.log(i.itemUrl)) }); // or json.products.forEach(product => { product.images.forEach(i => console.log(product.productCode + " : " + i.itemUrl)) }); 

Answer 5

products.reduce((urls, product, i) => {
  const imageURLs = product.images.map(img => img.itemUrl);
  urls = urls.concat(imageURLs);
  return urls;
}, []);

嘗試這個

Answer 6

您可以嘗試我的代碼產生以下結果

{
 "ID1" : ["https://img.com/1.JPG","https://img.com/2.JPG"],
 "ID2" : ["https://img.com/3.JPG","https://img.com/4.JPG","https://img.com/5.JPG"]
}

下面是代碼。 讓您將您提到的JSON數據作為“ obj”（變量）

 obj.products.reduce((acc, product)=>{
   acc[product.productcode] = product.images.map(img => img.itemUrl)
   return acc
 }, {})