When parsing json data - using only javascript - no data shows up?

Question

I have a json data url pulling from an api. I'm trying to pull that data, using only javascript, into a table into HTML. I've tried multiple things, but no matter what, the table isn't poulating with the data from the JSON file. I was wondering if anything stood out to anyone that is clearly not working? I've just made up the url for this purpose (the real url is pulling the json file).

When I run it through developer tools, it gives me the following error:

testingjson.html:7 Uncaught ReferenceError: $ is not defined

<html>
   <head>
      <script>
         $(function() {
         var people = [];

         $.getJSON('https://api.url.come', function(data) {
            $.each(data.person, function(i, f) {
               var tblRow = "<tr>" + "<td>" + f.organization + "</td>" +
                "<td>" + f.service_url + "</td>" + "<td>" + f.account + "</td>" + "<td>" + f.created_at + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata tbody");
          });
         });             
         });
      </script>
   </head>
   <body>
      <div class="wrapper">
         <div class="profile">
            <table id= "userdata" border="2">
               <thead>
                  <th>Organization</th>
                  <th>URL</th>
                  <th>Account</th>
                  <th>Created</th>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

After reading and trying all of the suggestions: this one seems the closest, but isn't pulling any data yet:

<html>
   <head>
   </head>
   <body>
      <div class="wrapper">
         <div class="profile">
            <table id= "userdata" border="2">
               <thead>
                  <th>Organization</th>
                  <th>URL</th>
                  <th>Account</th>
                  <th>Created</th>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
            <script>
         (function() {

         var table = document.getElementById("userdata"); 

         var people = [];

         fetch('https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200')
                    .then(data => data.json())
                    .then(json => json.map(f=>{
                    var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
                "<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
                table.innerHTML += tblRow;


                    }))
                    })();
         </script>
   </body>
</html>

Now, I tried this and it still doesnt work:

<html>
<head>


<script type="text/javascript">
var url = "https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200";
var tableBody = document.getElementById("userdataBody");

var req = new XMLHttpRequest();
req.open("GET", url, true);
req.onload = function(data) {

    if (req.status === 200) {
        console.log("Success");

        var persons = JSON.parse(req.response);
        var newContent = "";

        persons.forEach(function(person) {
            var tblRow = "<tr>" + "<td>" + person.organization + "</td>" +
                "<td>" + person.account + "</td>" + "<td>" + person.service_url + "</td></tr>";
            newContent += tblRow;
        });

        tableBody.innerHTML += newContent;
    } else {
        console.log("Error : %d (%s)", req.status, req.statusText);
    }



}
req.send();
</script>








</head>

<body>


   <div class="wrapper">
         <div class="profile">
            <table id="userdata" border="2">
               <thead>
                  <th>Name</th>
                  <th>Unsername</th>
                  <th>Email</th>
               </thead>
               <tbody id="userdataBody">
               </tbody>
            </table>
         </div>
      </div>


</body>
</html>

I need to do this without using jQuery...

Jennifer Cook
– Jennifer Cook

2018-06-18 17:11:40 +00:00
Commented Jun 18, 2018 at 17:11 — Jennifer Cook
– Jennifer Cook, Commented Jun 18, 2018 at 17:11

Emeeus · Accepted Answer · 2018-06-18 18:40:31Z

2

UPDATE Try this: https://jsfiddle.net/nz810m4r/24/ I think one of the problems is the url, I think that API doesn't support that kind of queries like ?agencies=2200:

(function() {

         var table = document.getElementById("userdata"); 

         var people = [];
        var xhttp = new XMLHttpRequest();
           xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
              var res = JSON.parse(this.responseText);
              console.log(res.results);
               res.results.map(f=>{
              var tblRow = "<tr>" + "<td>" + f.account + "</td>" +
                                    "<td>" + f.service_url + "</td>" + "<td>" + f.created_at + "</td>" + "<td>" + f.id + "</td>" + "</tr>"
                                    table.innerHTML += tblRow;
              }); 
             }
           };
           xhttp.open("GET", "https://api.gsa.gov/systems/digital-registry/v1/social_media.json", true);
           xhttp.send(); 
                    })();

Here a functional example https://jsfiddle.net/nz810m4r/

It's not the sole solution of course, but in this case I've replaced $.getJSON for fetch() and promises, and $.each for map().

(function() {

         var table = document.getElementById("userdata"); 

         var people = [];

         fetch('https://jsonplaceholder.typicode.com/posts')
                    .then(data => data.json())
                    .then(json => json.map(f=>{
                    var tblRow = "<tr>" + "<td>" + f.userId + "</td>" +
                     "<td>" + f.id + "</td>" + "<td>" + f.title + "</td>" +  "<td>" + f.body + "</td>" + "</tr>"
                    table.innerHTML += tblRow;
                    }))
                    })();

edited Jun 18, 2018 at 18:40

answered Jun 18, 2018 at 17:31

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

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

7 Comments

Jennifer Cook Over a year ago

Thank you again! For some reason it's only working in Chrome - but I need it to work in IE 11 too - anything you can think of?

Emeeus Over a year ago

I think cache could be the problem, try removing the cache

Jennifer Cook Over a year ago

Thanks but tried that and didn't work....thank you though! I wonder if because I'm calling a https api, and the site im putting this page on is http only

Emeeus Over a year ago

I'm not sure if ie11 support XMLHttpRequest(), so try the response of this stackoverflow.com/questions/38590353/… and yes, you could have a problem with mixed content https and http

Jennifer Cook Over a year ago

aparently its because I'm using the arrows. Any idea what I can use other than arrows

|

Kartikey Singh · Accepted Answer · 2018-06-18 17:31:40Z

0

What does i do in your function(i,f) declaration ??

Also, you are using the append() method entirely wrong.

It should be:

$('#userdata tbody').append(tblRow);

Also, check the below link:

Opening JSON without using jQuery

answered Jun 18, 2018 at 17:31

Kartikey Singh

89010 silver badges23 bronze badges

3 Comments

Kartikey Singh Over a year ago

Did you try with correct implementation of append() method ?

Kartikey Singh Over a year ago

Also, your URL has no attributes like organization, account etc. So that might be why it's not showing anything.

Kartikey Singh Over a year ago

Does your URL require API key ?

Undo · Accepted Answer · 2018-06-19 01:46:16Z

-2

Adding this inside the script tag helps:

type="text/javascript"

edited Jun 19, 2018 at 1:46

Undo♦

25.7k38 gold badges114 silver badges132 bronze badges

answered Jun 18, 2018 at 17:13

Rakshith Jk

1511 gold badge3 silver badges12 bronze badges

2 Comments

t.niese Over a year ago

If type is not specified then it defaults to text/javascript, so this would not make any difference.

Jennifer Cook Over a year ago

missed that. added type="text/javascript" and still not populating.

Collectives™ on Stack Overflow

When parsing json data - using only javascript - no data shows up?

3 Answers 3

7 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related