JSON with JavaScript and HTML

Question

From this url: http://api.open-notify.org/astros.json, I am trying to get the name and craft of each person in space. I can't get it working with my URL, but it works with others... Any ideas?

My code:

<html>
<body>
<table id="personDataTable">
    <tr>
        <th>Name</th>
        <th>Craft</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>

$.ajax({
    url: 'http://api.open-notify.org/astros.json',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); 
    row.append($("<td>" + rowData.people.name + "</td>"));
    row.append($("<td>" + rowData.people.craft + "</td>"));
}
</script>

</body>
</html>

What error do you get? Check the console. Also, how are you running this code? — schteppe, May 31 '20 at 09:49
I'm running it in MSEdge as it's an HTML document... This is what the console when you press F12 shows: https://imgur.com/a/Cg3kBNK — Chops Kingsland, May 31 '20 at 10:00
one more issue: drawTable(data), seems to be drawTable(data.people)...thats what will give data to iterate on — Mosd, May 31 '20 at 10:02
find the issue. You api server is http which browser generally dont load. https://stackoverflow.com/questions/37387711/page-loaded-over-https-but-requested-an-insecure-xmlhttprequest-endpoint — Shubham Verma, May 31 '20 at 10:04
how would i change the text of a paragraph to reference the "number" element in the JSON?7 — Chops Kingsland, May 31 '20 at 10:27
@ChopsKingsland can you explain a bit more on what you want to do? — Nish, May 31 '20 at 10:37
@Nish I want to get the number from `"number": 5`, from [this website](http://api.open-notify.org/astros.json). I know I can't use the same code as before, as that referenced stuff from the "people" tags on [this website](http://api.open-notify.org/astros.json), so I was asking, how would I reference the "number" bit from that website? — Chops Kingsland, May 31 '20 at 10:40
@ChopsKingsland I have edited my answer to include your "number" query. Kindly go through that. — Nish, May 31 '20 at 10:45

Nish · Accepted Answer · 2020-05-31T10:44:07.370

If you notice the JSON structure it is like below

{"people": [{"craft": "ISS", "name": "Chris Cassidy"}, {"craft": "ISS", "name": "Anatoly Ivanishin"}, {"craft": "ISS", "name": "Ivan Vagner"}, {"craft": "Crew Dragon C206", "name": "Doug Hurley"}, {"craft": "Crew Dragon C206", "name": "Bob Behnken"}], "number": 5, "message": "success"}

Why you are doing data.length in function drawTable?

It should be data.people.length in for loop and drawRow and drawTable function should be like below

function drawTable(data) {
    for (var i = 0; i < data.people.length; i++) {
        drawRow(data.people[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); 
    row.append($("<td>" + rowData.name + "</td>"));
    row.append($("<td>" + rowData.craft + "</td>"));
}

As per one more ask, the number from the JSON can be fetched simply in your success function of ajax call

success: function(data) {
        var number = data.number;   //Like this you can fetch
        drawTable(data);
    }

score 0 · Answer 2 · answered May 31 '20 at 10:04

Your Code is Ok But some mistake in access values:

Total Access into name is => data.people[index].name

"data" is Json Object Access values by key "people";

sub-level "people" is Json Array Access value by "index";

sub-level is Json Object Access value by key "name";

drawRow(data[i]) => drawRow(data.people[i]);

row.append($("<td>" + rowData.people.name + "</td>")); => row.append($("<td>" + rowData.name + "</td>"));

Note: Some way in HTML Use some variable by Let and try it in the console of browser to find mistakes, here you can put it like below :

<script> let myJson; <============ Here $.ajax({

and

success: function(data) { myJson = data; <============ Here drawTable(data);

Now you can access your Variable 'myJson' in the console of browser.

GoodLuck

JSON with JavaScript and HTML

2 Answers2