How to programmatically add things to JS object?

Question

I'm using Shopify and have to add Qubit to a clients site.

At any given time there's a "basket" object which shows what products are in a users cart.

How do I dynamically insert objects into this json structure?

  "line_items": [{
      "product": {
        "id": "1234567890",
        "sku_code": "0987654321",
        "url": "product.html",
        "name": "Sparkly Shoes",
        "description": "Description about this product",
        "manufacturer": "The Shoe Co",
        "category": "Shoe",
        "subcategory": "Heels",
        "color": "n/a",
        "stock": 3,
        "size": "6",
        "currency": "GBP",
        "unit_price": 130,
        "unit_sale_price": 130,
        "voucher": "MYVOUCHER1"
      },
      "quantity": 1,
      "subtotal": 130,
      "total_discount": 0
    }, {
      "product": {
        "id": "1234567890",
        "sku_code": "0987654321",
        "url": "product-dress.html",
        "name": "Red Dress",
        "description": "Description about this product",
        "manufacturer": "The Dress Co",
        "category": "Dresses",
        "subcategory": "Red dresses",
        "color": "n/a",
        "stock": 3,
        "size": "6",
        "currency": "GBP",
        "unit_price": 200,
        "unit_sale_price": 150,
        "voucher": "MYVOUCHER1"
      },
      "quantity": 1,
      "subtotal": 200,
      "total_discount": 50
    }, {
      "product": {
        "id": "1234567890",
        "sku_code": "0987654321",
        "url": "product-swimwear.html",
        "name": "Bikini",
        "description": "Description about this product",
        "manufacturer": "The Bikini Co",
        "category": "Swimwear",
        "subcategory": "Bikini",
        "color": "n/a",
        "stock": 3,
        "size": "6",
        "currency": "GBP",
        "unit_price": 100,
        "unit_sale_price": 100,
        "voucher": "MYVOUCHER1"
      },
      "quantity": 1,
      "subtotal": 100,
      "total_discount": 0
    }]
  },

Taken from: http://tools.qubitproducts.com/uv/demosite/guide.html

It could be one product, or two products, etc... how would I dynamically iterate through the available products in the shopping cart (psuedo code is fine) and then display a few values?

If I were defining the above json structure how would I do it dynamically? Just put a loop in between the code? (feels dirty?)

DutGRIFF · Accepted Answer

The code you have provided is not JSON. It is a javascript object missing a { as missingno stated. You can use Kelly J Andrews answer to add items to the object or copy the object and add items to it to create an updated object. To get an object to JSON you can use JSON.stringify() like

var jsonString = JSON.stringify({"obj":{"param":"val"}});

or

var obj = {"obj":{"param":"val"}}; 
var jsonString = JSON.stringify(obj);

But in your case you already have an object. The code you provided has line breaks and is not a string so we can easily throw a var obj = (plus the { you left out) and have:

var obj = 
 { "line_items": 
  [{
    "product": {
      "id": "1234567890",
      "sku_code": "0987654321",
      "url": "product.html",
      "name": "Sparkly Shoes",
      "description": "Description about this product",
      "manufacturer": "The Shoe Co",
      "category": "Shoe",
      "subcategory": "Heels",
      "color": "n/a",
      "stock": 3,
      "size": "6",
      "currency": "GBP",
      "unit_price": 130,
      "unit_sale_price": 130,
      "voucher": "MYVOUCHER1"
    },
    "quantity": 1,
    "subtotal": 130,
    "total_discount": 0
  }, {
    "product": {
      "id": "1234567890",
      "sku_code": "0987654321",
      "url": "product-dress.html",
      "name": "Red Dress",
      "description": "Description about this product",
      "manufacturer": "The Dress Co",
      "category": "Dresses",
      "subcategory": "Red dresses",
      "color": "n/a",
      "stock": 3,
      "size": "6",
      "currency": "GBP",
      "unit_price": 200,
      "unit_sale_price": 150,
      "voucher": "MYVOUCHER1"
    },
    "quantity": 1,
    "subtotal": 200,
    "total_discount": 50
  }, {
    "product": {
      "id": "1234567890",
      "sku_code": "0987654321",
      "url": "product-swimwear.html",
      "name": "Bikini",
      "description": "Description about this product",
      "manufacturer": "The Bikini Co",
      "category": "Swimwear",
      "subcategory": "Bikini",
      "color": "n/a",
      "stock": 3,
      "size": "6",
      "currency": "GBP",
      "unit_price": 100,
      "unit_sale_price": 100,
      "voucher": "MYVOUCHER1"
    },
    "quantity": 1,
    "subtotal": 100,
    "total_discount": 0
  }]
};

Now we can use Kelly's solution and add thing to the object:

var productToAdd = {
  "product": {
    "id": "123456789",
    "sku_code": "135792468"
  },
  "quantity": 3,
  "subtotal": 369,
  "total_discount": 0
};
obj["line_items"].push(productToAdd);

When we add all our products to the object we can JSON.stringify() if we need to send the object as JSON back to the server:

var jsonString = JSON.stringify(obj);

If you have an actual JSON string coming in you can use JSON.parse() like

var obj = JSON.parse('{"obj":{"param":"val"}}');

or

var json = '{"obj":{"param":"val"}}'; 
var obj = JSON.parse(json);

then add objects.

How to programmatically add things to JS object?

Answers (2)

Related Questions