JSON Variables into jquery/HTML

Question

I am looking to reference some JSON variables on page load. Based on a value being true/false, append a class to an html element.

Can't getting this to work, would appreciate some help - being new to jquery and all.

// html
<form id="add_form">
<script type="application/json" data-type="product"
{"product_options": [
{"sku": "ABC123", "price": "$10", "in_stock": true, "can_order": true, "option1": "Small"},
{"sku": "DEF456", "price": "$20", "in_stock": false, "can_order": false, "option1": "Medium"}], "id": 31, "name": "Some Shirt style"}
</script>...</form>

I'd like to iterate through the elements of the .size_options class and add a class to the li element based on the "in_stock" value in the JSON; i.e. if the value is true, add a class.

// parse JSON data
var obj = JSON.parse($("#add_form script[type='application/JSON']").html());

$(".size_options li").each() {
    some code
});

I'd appreciate any help here.

You'll need some way to get the id from the li element. Would that be possible? — Patrick Steadman
– Patrick Steadman, Commented Nov 20, 2015 at 7:08
You'll need a way to match up each product_options element with each .size_options li element and use .addClass(...) — JCOC611
– JCOC611, Commented Nov 20, 2015 at 7:08
In a task like this I would use AngularJS, it simplify many things when working with JSON and manipulating the DOM — Mat
– Mat, Commented Nov 20, 2015 at 7:23

ozil · Accepted Answer · 2015-11-20 07:13:10Z

1

In this case number of li and length of obj.product_options should be equal.

$(".size_options li").each(function (index) {
    if (obj.product_options[index].in_stock) {
        $(this).addClass("classToBeAdd");
    }
});

answered Nov 20, 2015 at 7:13

ozil

7,1639 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tincdawg Over a year ago

Thanks! Works perfectly.

Deepanshu Gupta · Accepted Answer · 2015-11-20 08:14:18Z

0

You need to append a data-attribute as 'data-can_order' with the same JSON value, then iterate the element and according to the True value append a class.

But i will suggest prior to check the 'in_stock' attribute with the 'can_order', then append the class.

answered Nov 20, 2015 at 8:14

Deepanshu Gupta

2401 silver badge5 bronze badges

Collectives™ on Stack Overflow

JSON Variables into jquery/HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related