CODEWITHSUNDEEP
javascriptjson
user1444393
user1444393

Reputation: 233

Parsing an external JSON file

I am trying to parse this external JSON file using JQuery:

var items={ "menu" : [ 
   {"id": "TN", "value": "ar"} ,
    {"id": "FR", "value": "fr"} ,
    {"id": "GB", "value": "en"} ,
    {"id": "US", "value": "en"} 
]
}

with this HTML file, I wander if there is a mistake with the syntax:

<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
    body { background-color:white; color:black }
</style>
<script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
    //hide splash screen
    intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
 <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: "pays.json",
                //force to handle it as text
                dataType: "json",
                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 items
                    $('#results').html('Country: ' + json.items.menu[0].id + '<br  />Language: ' + json.items.menu[0].value);
                }
            });
        });
        });
    });
</script>

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

The problem is that I didn't get anything on the output. What is the mistake? Thanks in advance!

Upvotes: 0

Views: 962

Answers (2)

Murugan Pandian
Murugan Pandian

Reputation: 778

change this 

   var json = $.parseJSON(data);
                    //now json variable contains data in json format
                    //let's display a few items
                    $('#results').html('Country: ' + json.items.menu[0].id + '<br  />Language: ' + json.items.menu[0].value);
                }

to

                //now json variable contains data in json format
                     var menu=data.items.menu;
                   for(var i in menu)
                      {
                         //let's display a few items
                       $('#results').html('Country: ' + menu[i].id + '<br     />Language: ' +menu[i].value);

}

            }

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

If that first part is supposed to be the contents of the "external JSON" file, that's not JSON. That's just JavaScript to declare an object inside a file. Remove the var items= part so it's actually valid JSON, then you'd do:

$.ajax({
    url: "pays.json",
    //force to handle it as text
    dataType: "json",
    success: function (data) {
        $('#results').html('Country: ' + data.menu[0].id + '<br  />Language: ' + data.menu[0].value);
    }
});

I've taken out the call to $.parseJSON() because it's not needed. If you specify dataType: 'json' for the AJAX request the response is automatically parsed as JSON, and then the result (if parsing doesn't fail) is passed as the first argument to the success function. That means that inside of that function data is your object.

There's also no items property declared in your object, only menu, so I've changed it from json.items.menu to just data.menu.

Upvotes: 2

Related Questions