Showing posts with label Parse Json Object. Show all posts
Showing posts with label Parse Json Object. Show all posts

Saturday 30 April 2016

Parse Json file In Jquery Ajax


See Running Demo Here -Demo For Parsing Json File In Jquery


Json File Data

 [
    {
        "alignment1": "TM"
    },
    {
        "alignment2": "TLBR"
    },
    {
        "alignment3": "BL"
    },
    {
        "ruleTimer": "6"
    },
    {
        "music": "Enable"
    },
    {
        "rule1": "Rule 1"
    },
    {
        "rule2": "Rule 2"
    },
    {
        "rule3": "Rule 3"
    },
    {
        "rule4": "Rule 4"
    },
    {
        "ID1": "p7ZsBPK656s"
    },
    {
        "name1": "Disfigure - Blank [NCS Release]"
    },
    {
        "ID2": "__CRWE-L45k"
    },
    {
        "name2": "Electro-Light - Symbolism [NCS Release]"
    },
    {
        "ID3": "J2X5mJ3HDYE"
    },
    {
        "name3": "DEAF KEV - Invincible [NCS Release]"
    },
    {
        "color1": ""
    },
    {
        "color2": ""
    },
    {
        "color3": ""
    },
    {
        "color4": ""
    },
    {
        "color5": ""
    }

]


Index.html Code 

 <!doctype html>
<html>
<head>

    <title>How to Parse a JSON file using jQuery</title>
   
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <a href="data.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
           
            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
                       
                        //data downloaded so we call parseJSON function
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few itemscons
                        console.log("data is - "+json);
                       
                       // $.each(json, function(idx, obj) {

//$.each(obj, function(idx, obj) {
//console.log("one-"+obj+" "+idx);
//$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");
//});
//});


function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            //alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");
        }
    });

};

Iterate(json);
                       
                      //  $('#results').html('Plugin name: ' + json.alignment1);
                    }
                });
            });
        });
    </script>

</body>

</html>

Parse Json file In Jquery Ajax With Object Under Object


See Running Demo Here -Demo For Parsing Json File In Jquery


Json File Data

 [
    {
        "alignment1": "TM"
    },
    {
        "alignment2": "TLBR"
    },
    {
        "alignment3": "BL"
    },
    {
        "ruleTimer": "6"
    },
    {
        "music": "Enable"
    },
    {
        "rule1": "Rule 1"
    },
    {
        "rule2": "Rule 2"
    },
    {
        "rule3": "Rule 3"
    },
    {
        "rule4": "Rule 4"
    },
    {
        "ID1": "p7ZsBPK656s"
    },
    {
        "name1": "Disfigure - Blank [NCS Release]"
    },
    {
        "ID2": "__CRWE-L45k"
    },
    {
        "name2": "Electro-Light - Symbolism [NCS Release]"
    },
    {
        "ID3": "J2X5mJ3HDYE"
    },
    {
        "name3": "DEAF KEV - Invincible [NCS Release]"
    },
    {
        "color1": ""
    },
    {
        "color2": ""
    },
    {
        "color3": ""
    },
    {
        "color4": ""
    },
    {
        "color5": ""
    }

]


Index.html Code 

 <!doctype html>
<html>
<head>

    <title>How to Parse a JSON file using jQuery</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <a href="data.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
            
            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
                        
                        //data downloaded so we call parseJSON function 
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few itemscons
                        console.log("data is - "+json);
                        
                       // $.each(json, function(idx, obj) {

//$.each(obj, function(idx, obj) {
//console.log("one-"+obj+" "+idx);
//$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");
//});
//});


function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            //alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");
        }
    });

};

Iterate(json);
                        
                      //  $('#results').html('Plugin name: ' + json.alignment1);
                    }
                });
            });
        });
    </script>

</body>

</html>