Load JSON to modal
tmblog

tmblog @tmblog

About: I get around putting code together from different parts of the web :-)

Location:
London, England
Joined:
Aug 12, 2019

Load JSON to modal

Publish Date: Nov 1 '19
6 2

Hi, I need a bit help loading some JSON onto a modal window using Javascript. Here's the JSON:

{
"Shirts":[{"id":63, "name":"Winter Style", "price":9.99,
"options": [{"name":"large", "price":2.99},{"name":"Small", "price":1.99}]
}]
}

I create markup with the parent product above e.g. Winter Shirt and price with an add to cart button, I would like to load a modal with the options and then add to the price of the parent product e.g. 9.99 + 1.99.

What would be a good way to go about loading the options on a modal and then matching it up with its parent product. There will be a few products that may or may not have the options.

EDIT:
Currently I have some items without the options which gets added to an array items with a javascript event. The item data are loaded onto a button with data attributes:

<button class="proAdd btn-sm" data-id="2117" data-price="3.45" data-name="Basic Jeans">Add</button>

On the event handler:

var name = $(this).attr("data-name");
var price = parseFloat($(this).attr("data-price"));
var id = parseInt($(this).attr("data-id"));

var item = {"id":id, "name": name,"price": price}

This is just part of the code:

cartItems.items.push(item);

I suppose I'd need to somehow check if the product contains options then combine it with the item object, I'd imagine it'd look something like this after adding the options:

var item = {"id":id, "name": name,"price": price, "options":[{"name":large, "price":2.95}]}

Not entirely sure how to go about it, Any help/techniques would be highly appreciated.

Comments 2 total

  • Si
    SiNov 4, 2019

    What have you tried so far?

    • tmblog
      tmblogNov 4, 2019

      Hey! Thanks for asking it's a very familiar question from SO :-) I've updated my question, hopefully it makes more sense now.

Add comment