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