how to use json file in html code

0 votes

To show the data in tables in an HTML website, I need to know how to use the json file I received from the server. The json file is being parsed using JavaScript. I'm fresh to this industry. Please provide a hand.

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

I have a json file called mydata.json that contains json-encoded data.

I want to get this information and process it using JavaScript in the file index.html. But how can I embed a connect.json file in an HTML document?

Please tell me. I have my json file here:

Aug 5 in HTML by Tejashwini
• 1,660 points
20 views

1 answer to this question.

0 votes
<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!!!

answered 6 days ago by Vikas

Related Questions In HTML

0 votes
0 answers

How to view an HTML file in the browser with Visual Studio Code?

With the new Microsoft Visual Studio Code, ...READ MORE

4 days ago in HTML by Deepak
• 760 points
11 views
0 votes
0 answers

How to use HTML script tags to code while they have a source link?

I have seen that  <script src="..."></script> does not allow ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
7 views
0 votes
0 answers

How to use <form:form> </form:form> TAG using HTML in Spring MVC?

How to utilize the <form:form> </form:form> In Spring MVC ...READ MORE

Jul 26 in HTML by Ashwini
• 1,160 points
13 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
886 views
0 votes
0 answers

JQUERY: Getting JSON Data from URL

I am trying to use $.getJSON() to get JSON ...READ MORE

2 days ago in Web Development by gaurav
• 17,580 points
3 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,840 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,825 views
0 votes
1 answer

how to use font awesome icons in HTML

First, you have to write this in ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
18 views
0 votes
1 answer

how to use font awesome icons in HTML?

You must first write this down in the ...READ MORE

answered 6 days ago in HTML by Vikas
11 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP