【问题标题】:Generate specific object from array of object从对象数组生成特定对象
【发布时间】:2018-06-25 09:06:14
【问题描述】:

我有一个类似的数组,

var result = [
  {
    "sItem" : [
      "Pizza Margherita","Pizza marinara"
    ],
    "sImage" : [
   "https://assets.marthastewart.com/styles/wmax-300/d31/pizza-margherita-0606-mla102155/pizza-margherita-0606-mla102155_vert.jpg","https://www.silviocicchi.com/pizzachef/wp-content/uploads/2015/02/m-evid-672x372.jpg"
    ],
    "nQuantity" : 1,
    "eDeliveryStatus" : "n",
    "nPrice" : 215,
    "sReceiptId" : "pRjZpGzIDPpX",
  }
];

想要像对象一样,我正在通过标题数组推送数据运行一个循环。

[  
   {  
      "title":"Pizza Margherita",
      "subtitle":"Pizza Margherita",
      "quantity":1,
      "price":215,
      "currency":"INR",
      "image_url":"https://images.mcdelivery.co.in/hardcastle-restaurants-pvt-ltd/image/upload/q_auto:low,fl_lossy,w_300/v1484907263/Items/2754.png"
   },
   {  
      "title":"Pizza marinara",
      "subtitle":"Pizza marinara",
      "quantity":1,
      "price":215,
      "currency":"INR",
      "image_url":"https://www.silviocicchi.com/pizzachef/wp-content/uploads/2015/02/m-evid-672x372.jpg"
   }
]

这就是我尝试但失败的方式:(,

result.forEach(el => {
  el.sItem.forEach(el2 => {
      elementRec.push({
          "title": el2,
          "subtitle": el2,
          "quantity": el.nQuantity,
          "price": el.nPrice,
          "currency": "INR",
          "image_url": el.sImage
      })
  });
})

我知道这是错误的,但对 Javascript 来说是新的。

【问题讨论】:

  • "image_url": el.sImage"image_url": el.sImage[0] 也许
  • 图像就像一个动态数组的标题
  • 请同时添加想要的结果。
  • 你怎么失败了,正如 Efe 所说,你应该使用el.sImage[0],因为你有 sImage 属性作为数组
  • 请提供数据,而不是抽象的。你从哪里得到数量,第二张图片去哪里,等等。 pp.

标签: javascript arrays json object


【解决方案1】:

你快到了。

在您的forEach 中,添加一个index 参数并使用它从sImage 数组中检索正确的图像:

el.sItem.forEach((el2, index) => {
      elementRec.push({
          "title": el2,
          "subtitle": el2,
          "quantity": el.nQuantity,
          "price": el.nPrice,
          "currency": "INR",
          "image_url": el.sImage[index]
      })
  });

var result = [
  {
    "sItem" : [
      "Pizza Margherita",
      "Pizza marinara"
    ],
    "sImage" : [
      "https://assets.marthastewart.com/styles/wmax-300/d31/pizza-margherita-0606-mla102155/pizza-margherita-0606-mla102155_vert.jpg",
      "https://www.silviocicchi.com/pizzachef/wp-content/uploads/2015/02/m-evid-672x372.jpg"
    ],
    "nQuantity" : 1,
    "eDeliveryStatus" : "n",
    "nPrice" : 215,
    "sReceiptId" : "pRjZpGzIDPpX",
  }
];

var elementRec = [];

result.forEach(el => {
  el.sItem.forEach((el2, index) => {
      elementRec.push({
          "title": el2,
          "subtitle": el2,
          "quantity": el.nQuantity,
          "price": el.nPrice,
          "currency": "INR",
          "image_url": el.sImage[index]
      })
  });
});

console.log(elementRec);

【讨论】:

  • 这里的两张图片都一样
【解决方案2】:

您可以通过一些破坏和短属性将内部sItem 和对应的sImage 映射到新对象。

var data = [{ sItem: ["Pizza Margherita", "Pizza marinara"], sImage: ["https://assets.marthastewart.com/styles/wmax-300/d31/pizza-margherita-0606-mla102155/pizza-margherita-0606-mla102155_vert.jpg", "https://www.silviocicchi.com/pizzachef/wp-content/uploads/2015/02/m-evid-672x372.jpg"], nQuantity: 1, eDeliveryStatus: "n", nPrice: 215, sReceiptId: "pRjZpGzIDPpX" }],
    result = data.reduce((r, { sItem, sImage, nQuantity: quantity, nPrice: price }) =>
        r.concat(sItem.map((title, i) => ({
            title, subTitle: title, quantity, price, currency: 'INR', image_url: sImage[i]
        }))),
        []
    );

console.log(result);

【讨论】:

    【解决方案3】:

    我认为您正在尝试做这样的事情。首先创建一个新数组。我会叫它converted。然后像这样用.forEach()result 对象推入其中。

    var converted = [];
    result.forEach(function(i){
        converted.push({
    
      "title": i.sItem[0],
      "subtitle": i.sItem[0],
      "quantity": i.nQuantity,
      "price": i.nPrice,
      "currency": "INR",
      "image_url": i.sImage[0]
    
      });
    })
    

    试试这个fiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-21
      • 2021-08-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多