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, 2022 in HTML by Tejashwini
 • 3,770 points • 3,087 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 Aug 8, 2022 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

Aug 10, 2022 in HTML by Deepak
 • 940 points • 179 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, 2022 in HTML by Tejashwini
 • 3,770 points • 120 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, 2022 in HTML by Ashwini
 • 3,590 points • 94 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 • 1,052 views
0 votes
0 answers

JQUERY: Getting JSON Data from URL

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

Aug 12, 2022 in Web Development by gaurav
 • 22,970 points • 300 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,510 points • 545 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,840 points • 11,260 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,840 points • 19,128 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, 2022 in HTML by Deepak
 • 940 points • 920 views
0 votes
1 answer

how to use font awesome icons in HTML?

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

answered Aug 8, 2022 in HTML by Vikas
 • 183 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.