DEV Community

tmblog
tmblog

Posted on • Edited on

2 1

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (2)

Collapse
 
devdrake0 profile image
Si

What have you tried so far?

Collapse
 
tmblog profile image
tmblog

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay