Parse local JSON file with jQuery and Javascript

Question

I'm trying to parse a JSON file located on my computer. I want to parse it. The JSON file has this structure:

{
  "sites": {
    "site": [
      {
        "id": "01",
        "name": "Sito 1",
        "src": "localhost/root/coupon/sito1",
        "expiryDate": "29 Ago 2013"
      },
      {
        "id": "02",
        "name": "Sito 2",
        "src": "localhost/root/coupon/sito2",
        "expiryDate": "30 Ago 2013"
      },
      {
        "id": "Sito 3",
        "name": "Sito 3",
        "src": "localhost/root/coupon/sito2",
        "expiryDate": "31 Ago 2013"
      }
    ]
  }
}

In my html I import the jQuery library and I made a function that will load when the page is loaded. The code is below:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>  
        <title>Lista coupon</title>
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            function loadJson() {
                window.alert("Carico il contenuto del file JSON per popolare la lista");
                $(document).ready(function()
                    {
                        $.getJSON('data.json', function(json) {
                            console.log(json);
                        });
                    });
                }
        </script>
    </head>
    <body onload="loadJson();">
        <div id="header">
            <h1>Lista coupon salvati</h1>
        </div>
        <div id="content">
            <p>Di seguito trovi tutte le promozioni salvate</p>

        </div>
        <div id="footer">

        </div>
    </body>
</html>

Now I saw on firebug console that it can read correctly the JSON file, but I don't know how to parse this JSON. I searched in google, but I found a lot of example that use a remote JSON. Can you help me to understand how to parse a local JSON file? Thank you

PS: note the site I post on here it's made for mobile browser.

getJson makes a HTTP call to the server not to your computer. Read the documentation api.jquery.com/jQuery.getJSON — Liam
– Liam, Commented Jul 30, 2013 at 10:21
do a console.log on the 'obj'-variable and check how it's built. Will make you understand how you should use it. — ninja
– ninja, Commented Jul 30, 2013 at 10:21

Quentin · Accepted Answer · 2013-07-30 10:22:19Z

12

getJSON will parse it for you.

Just remove the var obj = $.parseJSON(json); line (since that will stringify the object and try to parse it as JSON (which it won't be)).

answered Jul 30, 2013 at 10:22

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

11 Comments

lucgian84 Over a year ago

Ok i removed it, but now how I can access to the object? Now I want to "capture" the entry "name" and "src"

Quentin Over a year ago

json is the object. Access it like any other. (json.sites.etc)

lucgian84 Over a year ago

so I've to do simply json.name and json.src to get the name and the link? I tried it with an alert, but it says me undefined...

Quentin Over a year ago

No, since name and src are not properties of the object stored in json. You have to drill down the hierarchy. You might want to read Objects in JavaScript.

Sharad Over a year ago

use json.sites.site[0].src ,json.sites.site[1].src

|

Sharad · Accepted Answer · 2013-07-30 10:25:26Z

2

I don't think you need to parse the json. It will automatically parse the json since you are using $.getJSON().

answered Jul 30, 2013 at 10:25

Sharad

7432 gold badges14 silver badges23 bronze badges

4 Comments

Sharad Over a year ago

use json.sites.site[0].src ,json.sites.site[1].src

lucgian84 Over a year ago

Now how I can put the value of name and src in an array? It's right to use $.each?

lucgian84 Over a year ago

OK and how I can recognize if I'm reading "name" or "src" or "id" or "expiryDate"? I made so $.each(json, function(key, value) { });

Sharad Over a year ago

$.each(json.sites.site,function(index,value){ alert(value.src);})

Collectives™ on Stack Overflow

Parse local JSON file with jQuery and Javascript

2 Answers 2

11 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related