Felix Felix - 1 month ago 7
Javascript Question

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

Answer Source

IDs must be unique. That means, before create a new element test if it already exists.

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()) {
                    var $ctrl = $('<input/>', {
                        type: 'checkbox',
                        name: 'chk',
                        value: o.Price,
                        id: 'chkbox' + i,
                        class: 'chk'
                    });
                    $(".category").append($ctrl).append($("<label for='chkbox" + i + "'>" + o.ItemName + "</label><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">