how to use json file in html code

Question

I have json file mydata.json, and in this file is some json-encoded data.

I want obtain this data in file index.html and process this data in JavaScript. But a don't know how to connect.json file in .html file?

Tell me please. Here is my json file:

{
    "items": [
        {
            "movieID": "65086",
            "title": "The Woman in Black",
            "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"
        },
        {
            "movieID": "76726",
            "title": "Chronicle",
            "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"
        }
    ]
}

Thinking that I am getting json file from server, how to use that file in my html, so that I can display the data in tables in html page. I am using JavaScript to parse the json file. I am new to this field. Help out please.

Hi, you might consider adding more detail to your question. Are you using any JavaScript frameworks? (ie: jQuery) What have you tried already? What is the desired end result? A good question with a clear goal will help get good answers and examples from the community! Use the 'edit' link below your question to revise it. — BenSwayne
– BenSwayne, Commented Aug 22, 2012 at 15:20
take a look on the link which also provide the examples also api.jquery.com/jQuery.getJSON — jogesh_pi
– jogesh_pi, Commented Aug 23, 2012 at 6:12

trevorp · Accepted Answer · 2018-09-04 15:06:44Z

74

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

My JSON file:

{
   "person": [
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "roll": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Playboy",
           "roll": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "roll": 40
       }
   ]
}

I succeeded in integrating a JSON file to HTML table after working a day on it!!!

edited Sep 4, 2018 at 15:06

trevorp

1,1681 gold badge14 silver badges20 bronze badges

answered Aug 23, 2012 at 12:03

saikiran

2,4555 gold badges29 silver badges45 bronze badges

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

6 Comments

anon Over a year ago

what if it's a local json file?

saikiran Over a year ago

people.json is local json only. give the absolute url of your local json to $.getJSON

alper Over a year ago

I have provided absolute path for people.json but it did not work. ex: file:///path/people.json

Mohit Over a year ago

just disable the CORS policy and it will work see stackoverflow.com/questions/17711924/…

TOPKAT Over a year ago

CORS origin policy is a real problem in my case. I need my customers to see the page locally, so I can't tell them to disable their CORS origin...

|

Nicolas Brown · Accepted Answer · 2012-08-23 05:19:51Z

27

use jQuery's $.getJSON

$.getJSON('mydata.json', function(data) {
    //do stuff with your data here
});

answered Aug 23, 2012 at 5:19

Nicolas Brown

1,5721 gold badge10 silver badges17 bronze badges

3 Comments

saikiran Over a year ago

how to link up the jquery in my html file.. please help me ! i want full code. i want to display my data in a table in my html page. give a sample code. so i can understand easily. thanking you in anticipation.

alper Over a year ago

Should mydata.json locate on the same directory with the html file?

Skippy le Grand Gourou Over a year ago

It's useful to add an error handler otherwise getJSON will fail silently and you'll struggle to understand why it doesn't work : add .fail(function(jqxhr, status, error) { alert(status + ", " + error);}).

Sathnindu Kottage · Accepted Answer · 2022-04-17 03:59:27Z

You can easily do this without using Jquery or AJAX like below. Here, I used fetch API (Built-in).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<div id="myData"></div>
<script type="text/javascript">
    fetch('data.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        let mainContainer = document.getElementById("myData");
        for (let i = 0; i < data.length; i++) {
            let div = document.createElement("div");
            div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;
            mainContainer.appendChild(div);
        }
    }
</script>
</body>
</html>

data.json

[
  {
    "id": "1",
    "firstName": "John",
    "lastName": "Doe"
  },
  {
    "id": "2",
    "firstName": "Mary",
    "lastName": "Peterson"
  },
  {
    "id": "3",
    "firstName": "George",
    "lastName": "Hansen"
  }
]

Quantum7 · Accepted Answer · 2020-01-15 10:27:25Z

20

You can use JavaScript like... Just give the proper path of your json file...

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="abc.json"></script>
        <script type="text/javascript" >
            function load() {
                var mydata = JSON.parse(data);
                alert(mydata.length);

                var div = document.getElementById('data');

                for(var i = 0;i < mydata.length; i++)
                {
                    div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
                }
            }
        </script>
    </head>
    <body onload="load()">
        <div id="data">

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

Simply getting the data and appending it to a div... Initially printing the length in alert.

Here is my Json file: abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';

edited Jan 15, 2020 at 10:27

Quantum7

3,3353 gold badges38 silver badges49 bronze badges

answered Jul 31, 2017 at 19:53

Javed

1,83320 silver badges16 bronze badges

3 Comments

Israel Cruz Over a year ago

that abc.json is not a valid json file, its actual javascript, so here you are just calling a javascript file "abc.json" and loading it...

Grant Davis Over a year ago

If you want to load an array into a JavaScript variable from this "JSON" you can just remove the outside single quotes. In this case data would be an array containing objects with a name property. No need for JSON.parse() in this case.

user3731930 Over a year ago

This is what exactly I was looking for. It helps in avoiding CORS error in case someone want to read a file from local html page (without having WebServer). Something like: "file:///C:/dir/jsoncors.html. Othewise browser gives following error: "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

Sahan0710 · Accepted Answer · 2022-06-06 10:58:49Z

Here's how to do it in plain JavaScript.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Test Page</title>
    </head>
    <body>
        <h2>Movie List</h2>
        <table id = "tb1" border = "1">
            <tr>
                <th>movieID</th>
                <th>title</th>
                <th>poster</th>
            </tr>
        </table>
        <script>
            fetch("mydata.json")
                .then(response => response.json())
                .then(data => {
                    for (var i = 0; i<data.items.length; i++){
                        let vmovieID = data.items[i].movieID;
                        let vtitle = data.items[i].title;
                        let vposter = data.items[i].poster;
                            document.querySelector("#tb1").innerHTML += `
                                <tr>
                                    <td>${vmovieID}</td>
                                    <td>${vtitle}</td>
                                    <td>${vposter}</td>
                                </tr>`;
                    }
                })
        </script>
    </body>
</html>

mydata.json

{
    "items": [
        {
            "movieID": "65086",
            "title": "The Woman in Black",
            "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"
        },
        {
            "movieID": "76726",
            "title": "Chronicle",
            "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"
        }
    ]
}

Collectives™ on Stack Overflow

how to use json file in html code

5 Answers 5

6 Comments

3 Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

3 Comments

Comments

3 Comments

Comments

Linked

Related