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 Jun 18 '18 at 17:11 — Jennifer Cook, Jun 18 '18 at 17:11

Emeeus · Accepted Answer · 2018-06-18T18:40:31.107

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 '18 at 18:40

answered Jun 18 '18 at 17:31

Emeeus

5,072
2
25
37

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? – Jennifer Cook Jun 19 '18 at 17:29
I think cache could be the problem, try removing the cache – Emeeus Jun 19 '18 at 17:43
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 – Jennifer Cook Jun 19 '18 at 18:03
I'm not sure if ie11 support XMLHttpRequest(), so try the response of this https://stackoverflow.com/questions/38590353/xmlhttprequest-file-upload-not-working-in-ie11 and yes, you could have a problem with mixed content https and http – Emeeus Jun 19 '18 at 18:27
aparently its because I'm using the arrows. Any idea what I can use other than arrows – Jennifer Cook Jun 20 '18 at 13:01
@JenniferCook this is without arrow function https://jsfiddle.net/nz810m4r/32/ I've changed this: f=> for this: function(f). IE11 probably doesn't support arrow functions. – Emeeus Jun 20 '18 at 20:55
Yep - you are the best! Appreciate it very much!! – Jennifer Cook Jun 21 '18 at 11:24

score 0 · Answer 2 · answered Jun 18 '18 at 17:31

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 '18 at 17:31

Kartikey Singh

864
10
23

Did you try with correct implementation of append() method ? – Kartikey Singh Jun 18 '18 at 18:36
Also, your [URL](https://api.gsa.gov/systems/digital-registry/v1/social_media.json?agencies=2200) has no attributes like organization, account etc. So that might be why it's not showing anything. – Kartikey Singh Jun 18 '18 at 18:44
Does your URL require API key ? – Kartikey Singh Jun 18 '18 at 18:46

score -2 · Answer 3 · edited Jun 19 '18 at 01:46

-2

Adding this inside the script tag helps:

type="text/javascript"

edited Jun 19 '18 at 01:46

Undo

25,519
37
106
129

answered Jun 18 '18 at 17:13

Rakshith Jk

121
1
2
12

If `type` is not specified then it defaults to `text/javascript`, so this would not make any difference. – t.niese Jun 18 '18 at 17:19
1

missed that. added type="text/javascript" and still not populating. – Jennifer Cook Jun 18 '18 at 17:20

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

3 Answers3