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

Question

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

gaetanoM · Accepted Answer · 2017-06-20 18:31:05Z

1

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">

edited Jun 20, 2017 at 18:31

answered Jun 20, 2017 at 17:44

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

3 Comments

Felix Over a year ago

thats great. however how can i display them on a new line with <br/>

Felix Over a year ago

I added a new input element for another category and i'm have a challenge of displaying the related ItemName and Price. i added the ID of the second input tag but still not working. (o.Category == $("#txt,#txt1").val()) {

gaetanoM Over a year ago

@Felix This is wrong (o.Category == $("#txt,#txt1").val()) because $("#txt,#txt1").val() returns the value of txt field. You can write, instead, o.Category == $("#txt").val() && o.Price == $("#txt1").val() if it must match together. Fiddle here. Let me know

Rob Zuber · Accepted Answer · 2017-06-20 17:44:03Z

0

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>"));
    }
}

answered Jun 20, 2017 at 17:44

Rob Zuber

1313 bronze badges

1 Comment

Felix Over a year ago

Ha!! its working. thanks however i wanna stop it from displaying several times when clicked more than once.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related