CODEWITHSUNDEEP
javascriptjquery
Felix
Felix

Reputation: 93

How to get specific values a particular key in a JSON array and display the values in checkboxes

i am working on this code to get ItemName and Price values for a selected Category to be displayed in check boxes but i'm failing. any assistance will appreciated. here's my script

function data() {
var text = '{"DataArray":[{"ItemName":"Salmon Puffs","Price":5,"Category":"Delicious Treats"},{"ItemName":"Beans on Toast Sandwich","Price":200,"Category":"Delicious Treats"},{"ItemName":"Whole Mashed Potatoes","Price":50,"Category":"Delicious Treats"},{"ItemName":"Calamari","Price":20,"Category":"Delicious Treats"},{"ItemName":"Egyptian Decor Pack","Price":300,"Category":"Decoration"},{"ItemName":"Marie Biscuits","Price":80,"Category":"Delicious Treats"},{"ItemName":"Middle Eastern Decor Pack","Price":390,"Category":"Decoration"},{"ItemName":"Star Wars Decor Pack","Price":360,"Category":"Decoration"},{"ItemName":"Hipster Decor Pack","Price":350,"Category":"Decoration"},{"ItemName":"Pears shaped liked Apples","Price":1000,"Category":"Delicious Treats"},{"ItemName":"Flowers","Price":20,"Category":"Decoration"},{"ItemName":"Dance Floor","Price":60,"Category":"Entertainment"},{"ItemName":"Clowns","Price":20.35,"Category":"Entertainment"},{"ItemName":"Fire Dancers","Price":80,"Category":"Entertainment"},{"ItemName":"Cantina Band","Price":2000,"Category":"Entertainment"},{"ItemName":"Improved Salmon Puffs","Price":5,"Category":"Delicious Treats"}]}';

obj = JSON.parse(text);
for (i = 0; i < obj.DataArray.length; i++) {
    if (obj.DataArray[i].Category == $("#txt").val())
    var $ctrl = $('<input/>').attr({ type: 'checkbox', name: 'chk', value: obj.DataArray[i].Price, id: 'chkbox' }).addClass("chk");
    $(".category").append($ctrl).append($("<label for='chkbox'>" + obj.DataArray[i].ItemName + "</label>"));
}

}

And here's my html to display the check boxes 

<div class="category"></div><input type="text" name="Category" onClick="getItemName();" style="margin:2%;margin-left:3%;cursor:pointer;" id="txt" class="cat" value="Delicious Treats" readonly="readonly">

data() is included in the called getItemName() thanks

Upvotes: 1

Views: 27

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

IDs must be unique. That means, before creating a new element test if it already exists. In order to simply the creation of new element you can follow jQuery doc. An example you can see there is (create a div with a class and an event handler and append such new element to the body):

$( "<div/>", {
   "class": "my-div",
   on: {
      click: function( event ) {
         // Do something
    }
  }
 }).appendTo( "body" );

The snippet: 

function data() {
        var text = '{"DataArray":[{"ItemName":"Salmon Puffs","Price":5,"Category":"Delicious Treats"},{"ItemName":"Beans on Toast Sandwich","Price":200,"Category":"Delicious Treats"},{"ItemName":"Whole Mashed Potatoes","Price":50,"Category":"Delicious Treats"},{"ItemName":"Calamari","Price":20,"Category":"Delicious Treats"},{"ItemName":"Egyptian Decor Pack","Price":300,"Category":"Decoration"},{"ItemName":"Marie Biscuits","Price":80,"Category":"Delicious Treats"},{"ItemName":"Middle Eastern Decor Pack","Price":390,"Category":"Decoration"},{"ItemName":"Star Wars Decor Pack","Price":360,"Category":"Decoration"},{"ItemName":"Hipster Decor Pack","Price":350,"Category":"Decoration"},{"ItemName":"Pears shaped liked Apples","Price":1000,"Category":"Delicious Treats"},{"ItemName":"Flowers","Price":20,"Category":"Decoration"},{"ItemName":"Dance Floor","Price":60,"Category":"Entertainment"},{"ItemName":"Clowns","Price":20.35,"Category":"Entertainment"},{"ItemName":"Fire Dancers","Price":80,"Category":"Entertainment"},{"ItemName":"Cantina Band","Price":2000,"Category":"Entertainment"},{"ItemName":"Improved Salmon Puffs","Price":5,"Category":"Delicious Treats"}]}';

        obj = JSON.parse(text);
        for (i = 0; i < obj.DataArray.length; i++) {
            if ($('#chkbox' + i).length == 0) {
                var o = obj.DataArray[i];
                if (o.Category == $("#txt").val()) {
                    $(".category").append($('<input/>', {
                        type: 'checkbox',
                        name: 'chk',
                        value: o.Price,
                        id: 'chkbox' + i,
                        class: 'chk'
                    }))
                    .append($("<label/>", {'for': 'chkbox' + i, text: o.ItemName}))
                    .append($('<br/>'));
                }
            }
        }
    }

    function getItemName() {
        data();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="category"></div>
<input type="text" name="Category" onClick="getItemName();" style="margin:2%;margin-left:3%;cursor:pointer;" id="txt"
       class="cat" value="Delicious Treats" readonly="readonly">

Upvotes: 1

Rob Zuber
Rob Zuber

Reputation: 131

Have you tried adding brackets for your if statement, like this?

for (i = 0; i < obj.DataArray.length; i++) {
    if (obj.DataArray[i].Category == $("#txt").val()) {
        var $ctrl = $('<input/>').attr({ type: 'checkbox', name: 'chk', value:obj.DataArray[i].Price, id: 'chkbox' }).addClass("chk");
        $(".category").append($ctrl).append($("<label for='chkbox'>" + obj.DataArray[i].ItemName + "</label>"));
    }
}

Upvotes: 0

Related Questions