Read Json
Showing posts with label Read Json. Show all posts
Showing posts with label Read Json. Show all posts

Saturday, 30 April 2016

Parse Json file In Jquery Ajax

21:23 No Comments

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

21:18 No Comments

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>

How To Read Json File Into Javascript Arrray

04:09 No Comments


Contacts.json File 


{
    "ppl1":{
        "Name":"Jhon",
        "Surname":"Kenneth",
        "mobile":329129293,
        "email":"jhon@gmail.com"
    },
    "ppl2":{
        "Name":"Thor",
        "Surname":"zvalk",
        "mobile":349229293,
        "email":"thor@gmail.com"
    },
    "ppl3":{
        "Name":"Mila",
        "Surname":"Kvuls",
        "mobile":329121293,
        "email":"mila@gmail.com"
    }
}

Read / Parse Json File into Javascript Array


Use The Code Below To Read Json File ( Contacts.json  ) . File Data Shown Above into Javascript Array

$.getJSON('contacts.json', function (json) {
var array = [];
for (var key in json) {
    if (json.hasOwnProperty(key)) {
        var item = json[key];
        array.push({
            name: item.Name,
            surname: item.Surname,
            mobile: item.mobile,
            email: item.email
        });            
    }
}
});
Here getJSON will make a ajax request to contacts.json file and file contents is shown above in the post . Ajax request will get json data from the file and output that data to 'json' object . In code i am making an empty array then opening a for loop through the json object that contains data that ajax request has read from contacts.json file then we are pushing data from json object to newly created array
 That way we will be having data in new created Javascript array from json file
Subscribe to: Posts (Atom)