DEV Community

tmblog
tmblog

Posted on • Updated on

Load JSON to modal

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.

Discussion (2)

Collapse
devdrake0 profile image
Si

What have you tried so far?

Collapse
tmblog profile image
tmblog Author

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