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,820 points
6,101 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
• 980 points
430 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,820 points
380 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
• 5,430 points
218 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,228 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
• 23,260 points
629 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
929 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,880 points
13,909 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,880 points
22,246 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
• 980 points
1,480 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
361 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