Json Array Elements to html page

Question

I'm new to using JSON and I'm trying to do something that I'm convinced is very simple but I've been looking for a while and haven't yet found the right way to do it. I have two files, a html page and a json file with an array inside it. The contents of the JSON file looks like this:

[
{ "name": "EXAMPLE1",
      "description": "this is a sample description"},
{ "name": "EXAMPLE2",
  "description": "This is a second sample description"}
]

What I'm trying to do fetch the array elements and display them on the html page with "name" being a heading (h1) and "description" being a paragraph (p).

Below is the code I have so far in my html file and I wouldn't be surprised if I've totally misunderstood how to go about this:

<!DOCTYPE html>
<html>
    <head>
        <title>Json Arrays</title>  
    </head>

    <body>


    </body>
    <script>
    $(document).ready(function(){

$.getJSON("testarray.json", function(data){
$.each(data, function)(){
$("body").append("<h1>"+this['name']+<br>"</h1>""<p>"+this['description']+<br>"</p>");
}
}
}
        </script>
</html>

Any suggestions would be very appreciated.

It doesn't work that way. You will need a server to serve the json. You can set up a server on your machine which returns the json file and then this would work. You can also look into this if you don't want to set up your server: jsontest.com — Azeem Bande-Ali
– Azeem Bande-Ali, Commented May 16, 2014 at 3:31

Santhosh Kumar · Accepted Answer · 2014-05-16 03:33:32Z

1

You got to parse it properly. Here is the code I tweaked.

<!DOCTYPE html>
<html>
    <head>
        <title>Json Arrays</title>  
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>

    <body>


    </body>
    <script>
    $(document).ready(function(){

            $.getJSON("testarray.json", function(data){
                console.log(data);
                $.each(data, function(i, field){

                    $("body").append("<h1>"+field.name+"<br></h1><p>"+field.description+"<br></p>");
                    });

            })
        });
        </script>
</html>

after each each and everything will be object so just use field.name

answered May 16, 2014 at 3:33

Santhosh Kumar

1903 silver badges10 bronze badges

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

4 Comments

Deoff Over a year ago

I'm not entirely sure what you mean by "and everything will be object so just use field.name"

Santhosh Kumar Over a year ago

You tired to get the value object as array.. instead get the object and it's property

Deoff Over a year ago

I'm still not getting any output on the page? Just checking but appending on body should work right?

Santhosh Kumar Over a year ago

List of steps you got to follow. 1) Are you trying to do this in any kind of server MAMP, LAMP, XAMPP? 2) create .json and paste the JSON. 3)Copy paste the html 4) Run via localhost. still getting error check the console find what error you are facing

Collectives™ on Stack Overflow

Json Array Elements to html page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related