parsing a JSON file in javascript

Question

This is a file (data.json) containing data formated in JSON :

{
  [
    {"nom" : "marteau" , "desc" : "pour en enfoncer des clous" , "qte" : "87" , "prix" : "9"},
    {"nom" : "cle de 12" , "desc" : "pour les boulons du camion" , "qte" : "25" , "prix" : "12"}
  ] 
}

I try to parse these data in JavaScript this way :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title> catalogue outillage </title>
        <script type="text/javascript" src="oXHR.js"></script>
        <script type="text/javascript">
            function request(callback) {
                var xhr = getXMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                        callback(xhr.responseText);
                    }
                }

                xhr.open("GET", "data.json", true);
                xhr.send();
            }

            function readData(oData) {              
                var catalogue = JSON.parse(oData);
                document.getElementById("nom").innerHTML = catalogue[0].nom;
                document.getElementById("desc").innerHTML = catalogue[0].desc;
                document.getElementById("qte").innerHTML = catalogue[0].qte;
                document.getElementById("prix").innerHTML = catalogue[0].prix;  
            }

</script>
    </head>
    <body>
        <form>
            <label>Name</label> : <label id = "nom"></label><br>
            <label>Description</label> : <label id = "desc"></label><br>
            <label>Quantité</label> : <label id = "qte"></label><br>
            <label>Prix</label> : <label id = "prix"></label><br>
            <button onclick="request(readData)">Afficher json</button>
        </form>

    </body>
</html>

Unfortunately, xhr.responseText seem to be void.

@epascarello I receive this message in developer console : SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

@ShanRobertson I removed the first set of curly braces. But that doesn't work.

I've found the mistake : I removed the first set of form tag

Thanks for all

What do you see when you look at the request in the network panel/developer console? — epascarello
– epascarello, Commented Oct 26, 2015 at 17:33
so in fact it's not a JSON parsing problem at all, but an AJAX problem... — Alnitak
– Alnitak, Commented Oct 26, 2015 at 17:33
Your JSON doesn't validate. Try here: jsonlint.com or here: jsonformatter.curiousconcept.com — Mark
– Mark, Commented Oct 26, 2015 at 17:33
Why don't use jQuery for your HTTP request? That would make it easier than dealing with low level APIs. Nobody writes XMLHttpRequests manually anymore. — alcfeoh
– alcfeoh, Commented Oct 26, 2015 at 17:34

Shan Robertson · Accepted Answer · 2015-10-26 17:35:55Z

3

Your JSON isn't valid. You just need to remove the first set of curly braces.

[
    {
        "nom": "marteau",
        "desc": "pour en enfoncer des clous",
        "qte": "87",
        "prix": "9"
    },
    {
        "nom": "cle de 12",
        "desc": "pour les boulons du camion",
        "qte": "25",
        "prix": "12"
    }
]

Other than that your code looks fine.

answered Oct 26, 2015 at 17:35

Shan Robertson

2,7423 gold badges26 silver badges46 bronze badges

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

1 Comment

Mark Over a year ago

Thief! But an upvote anyway, I didn't post this as an answer myself because I was hoping by linking him to the validators he would figure it out himself.

Collectives™ on Stack Overflow

parsing a JSON file in javascript

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related