如何以编程方式向JS对象添加内容?

时间:2014-01-15 01:34:42

标签: javascript shopify

我正在使用Shopify,必须将Qubit添加到客户端站点。

在任何给定时间都有一个“篮子”对象,显示用户购物车中的产品。

如何动态地将对象插入此json结构?

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

取自:http://tools.qubitproducts.com/uv/demosite/guide.html

它可能是一个产品,或两个产品等...我将如何动态迭代购物车中的可用产品(伪代码很好),然后显示一些值?


如果我定义了上面的json结构,我将如何动态地执行它?只是在代码之间放一个循环? (感觉很脏?)

2 个答案:

答案 0 :(得分:2)

获得数据后 - 应该相当简单(基于上述网站的数据) -

window.universal_variable["basket"]["line_items"].push(myProductObj);

myProductObj将如下:

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

答案 1 :(得分:1)

您提供的代码不是JSON。这是一个javascript对象缺少{,因为missingno声明。您可以使用Kelly J Andrews的答案向对象添加项目或复制对象并向其添加项目以创建更新的对象。要将对象转换为JSON,您可以使用JSON.stringify()之类的

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

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

但在你的情况下,你已经有了一个对象。您提供的代码包含换行符,而不是字符串,因此我们可以轻松地抛出var obj =(加上您遗漏的{)并拥有:

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
  }]
};

现在我们可以使用Kelly的解决方案并在对象中添加东西:

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

当我们将所有产品添加到对象时,如果我们需要将对象作为JSON发送回服务器,我们可以JSON.stringify()

var jsonString = JSON.stringify(obj);

如果您有一个实际的JSON字符串,您可以使用JSON.parse(),如

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

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

然后添加对象。