javascript - Vue.js - 在计算属性中迭代 json 以创建新对象

Question

这是 vue.js 中的计算属性：

shopCart() {
      var scart = [],
        group,
        node;
      scart.push({
        payMethod: 0,
        transactionReference: "",
        RoomNumber: 0,
        addressId: 0,
        deliveryMinutes: 0,
        comment: "",
        posList: [],
      });
      for (var x = 0; x < this.items.length; x++) {
        group = this.items[x].selectedOptions;
        scart[0].posList.push({
          articleId: this.items[x].id,
          quantity: this.items[x].quantity,
          singlePrice: this.items[x].price,
          variantList: [],
          parent: true,
          name: this.items[x].name,
        });
        for (var y = 0; y < group.length; y++) {
          node = group[y].options;
          for (var z = 0; z < node.length; z++) {
            scart[0].posList[0].variantList += node[z].id + ",";
          }
        }
      }
      scart = scart.map(function (e) {
        return JSON.stringify(e);
      });
      scart = scart.join(",");
      return scart;
    },

它写入以下对象：

{
  "payMethod": 0,
  "transactionReference": "",
  "RoomNumber": 0,
  "addressId": 0,
  "deliveryMinutes": 0,
  "comment": "",
  "posList": [
    {
      "articleId": 20001,
      "quantity": 1,
      "singlePrice": 8.99,
      "variantList": "2001,4001,5001,2003,4003,",
      "parent": true,
      "name": "Fisch Filet"
    },
    {
      "articleId": 20002,
      "quantity": 1,
      "singlePrice": 8.99,
      "variantList": "",
      "parent": true,
      "name": "Cheese Burger"
    }
  ]
}

我需要这个：

{
  "payMethod": 0,
  "transactionReference": "",
  "RoomNumber": 0,
  "addressId": 0,
  "deliveryMinutes": 0,
  "comment": "",
  "posList": [
    {
      "articleId": 20001,
      "quantity": 1,
      "singlePrice": 8.99,
      "variantList": "2001,4001,5001,",
      "parent": true,
      "name": "Fisch Filet"
    },
    {
      "articleId": 20002,
      "quantity": 1,
      "singlePrice": 8.99,
      "variantList": "2003,4003,",
      "parent": true,
      "name": "Cheese Burger"
    }
  ]
}

最后一个嵌套循环仅将我的字符串写入“variantList”的第一次出现。我似乎找不到解决上一个循环中出现“variantList”的正确方法。有人能指出我正确的方向吗？

项目.json：

[
  {
    "id": 20001,
    "name": "Fisch Filet",
    "quantity": 1,
    "selectedOptions": [
      {
        "id": 1,
        "name": "Beilage",
        "options": [
          {
            "id": 2001,
            "optionQuantity": 1
          }
        ]
      },
      {
        "id": 2,
        "name": "Salate",
        "options": [
          {
            "id": 4001,
            "optionQuantity": 1
          }
        ]
      },
      {
        "id": 3,
        "name": "Ketchup/Mayo",
        "options": [
          {
            "id": 5001,
            "optionQuantity": 1
          }
        ]
      }
    ]
  },
  {
    "id": 20002,
    "name": "Cheese Burger",
    "quantity": 1,
    "selectedOptions": [
      {
        "id": 1,
        "name": "Beilage",
        "options": [
          {
            "id": 2003,
            "optionQuantity": 1
          }
        ]
      },
      {
        "id": 2,
        "name": "Salate",
        "options": [
          {
            "id": 4003,
            "optionQuantity": 1
          }
        ]
      }
    ]
  }
]

标签： javascriptjsonvue.jsvuejs2

Answer 1

根据输入的项目和所需的结果，我建议使用以下解决方案map：

shopCart() {
      var scart = [],
        group,
        node;
      scart.push({
        payMethod: 0,
        transactionReference: "",
        RoomNumber: 0,
        addressId: 0,
        deliveryMinutes: 0,
        comment: "",
        posList: this.items.map(item=>{
                       item={
                       articleId: item.id,
                         quantity: item.quantity,
                         singlePrice:item.price,
                                            
                      variantList:item.selectedOptions.map(opt=>opt.options[0].id).join(),
                         parent: true,
                         name: item.name,
                       }; 
                     return item;
                   }) ,
      });

return scart;

}