Vue.js - in computed property iterate through json to create new object

Question

this is computed property in a 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;
    },

It writes following object:

{
  "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"
    }
  ]
}

I need this:

{
  "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"
    }
  ]
}

The last nested loop writes my string only into the first occurrence of "variantList". I cant seem to find the proper way to address the occurrence of "variantList' in the previous loop. Can anybody point me in the right direction.

items.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
          }
        ]
      }
    ]
  }
]

scart[0].posList[0] yes, that will always be the first one. — Keith
– Keith, Commented Nov 5, 2020 at 12:08
True, I thought it didn't relate to the question, but since it is clearly showing bad practice, it becomes relevant. I remove my comment. — trincot
– trincot, Commented Nov 5, 2020 at 12:13

Boussadjra Brahim · Accepted Answer · 2020-11-05 12:51:02Z

Based on the input items and the needed result, i suggest the following solution using map method :

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;

}

Collectives™ on Stack Overflow

Vue.js - in computed property iterate through json to create new object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related