0

http://jsfiddle.net/hbrennan72/0urqaee9/

I have taken a very simple W3Schools JSON example and modified it ever so slightly. I am having trouble displaying just the contents contents of the JSON file. The external JSON file is referenced in the JS but I also copied the contents into the CSS frame on JSFiddle. Any help would be appreciated.

var xmlhttp = new XMLHttpRequest();
var url = "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + 
        arr[i].president + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
user3837357
  • 23
  • 4
  • What do you mean by "having trouble displaying it"? Do you mean referencing the properties in the object? – ron tornambe Aug 10 '14 at 18:11
  • Yes, I want to display the full contents of the JSON file in a table on a separate web page. – user3837357 Aug 10 '14 at 18:14
  • The response is not in array format, it's object, so you don't get `length` property of it. Your looping use `length` that make it loop nothing because `arr.length` is undefined. Are you sure you get the right data? – Iqbal Fauzi Aug 10 '14 at 18:16
  • Yes the data in the JSON file is accurate if that's what you mean. – user3837357 Aug 10 '14 at 18:17
  • Here is a different example I am working on: http://jsfiddle.net/hbrennan72/0urqaee9/7/ – user3837357 Aug 10 '14 at 18:18
  • You actually need to iterate through arr.presidents, see http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript for more pointers, because president is basically a collection of presidents. See what you get when you do arr.presidents.president[0].term. – John Powell Aug 10 '14 at 18:21

2 Answers2

0

For the XML references, ex. xmlns:xsi, you will need to use bracket notation. You can reference the presidents list objects as you would any JavaSscript object.

Forked jsfiddle

You can display the properties in any format you like.

function myFunction(arr) {
    alert(arr.presidents["xmlns:xsi"]);
    alert(arr.presidents.president[0].number + ". " + arr.presidents.president[0].name);
    ...
}

EDIT

I have amended the jsfiddle to create a table. I did not include all the fields you specified, but will get the general idea.

ron tornambe
  • 10,452
  • 7
  • 33
  • 60
  • Erm, are you sure it has anything to do with the xml namespace and not the fact that it is a collection of presidents called president? – John Powell Aug 10 '14 at 18:32
  • I am looking to something like this: http://www.w3schools.com/json/tryit.asp?filename=tryjson_server_sql_style – user3837357 Aug 10 '14 at 19:11
  • Ok I almost have it where it displays the full list of US presidents: http://jsfiddle.net/hbrennan72/0urqaee9/52/ – user3837357 Aug 10 '14 at 20:01
  • Thanks for your help Ron! I reapply appreciate it. Now I can't figure out the header. Probably something simple but heck if I know...http://jsfiddle.net/hbrennan72/0urqaee9/90/ – user3837357 Aug 11 '14 at 04:57
  • It appears above every record vs. just the first one. – user3837357 Aug 11 '14 at 16:46
  • You just need to move the header columns outside of the loop - jsfiddle: http://jsfiddle.net/s9zyacq9/ - you can also replace the "td" tags with "th" and remove the "b" tags since "th" tags are centered and bold. – ron tornambe Aug 11 '14 at 17:05
0

You need to iterate through arr.presidents.president

function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.presidents.president.length; i++) {
    out += JSON.stringify(arr.presidents.president[i]) + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
Hermenegida
  • 23
  • 8
  • Ok, thanks! That displays the contents of the JSON file. http://jsfiddle.net/hbrennan72/0urqaee9/10/However, Now I want to make it "pretty". I am guessing I need to set up some kind of a table (even though I have read tables are frowned on in HTML5) – user3837357 Aug 10 '14 at 18:36
  • That is a different question. @Hermenegida, are you going to explain why, as I did in my comment saying the same thing? – John Powell Aug 10 '14 at 18:37
  • More specifically, I want to only display the number, name, birthday, took office and left office elements as columns in a table. – user3837357 Aug 10 '14 at 18:57
  • Ok, So now I am having trouble with something that is probably simple. I want to display the table header once at the top but it keeps repeating for each element. Any thoughts? http://jsfiddle.net/hbrennan72/0urqaee9/89/ – user3837357 Aug 11 '14 at 04:36
  • You have to move the table header outside the loop. – Hermenegida Aug 11 '14 at 07:12
  • Ok thanks for the help! Now I am having trouble displaying just the vice president in a separate table. I keep getting undefined errors for the name of each vp. – user3837357 Aug 12 '14 at 20:34
  • The JSON file is located here: http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json I used JSONLint to verify the data and make it more presentable... – user3837357 Aug 12 '14 at 21:07
  • So some entries have one president but 2 vps. I am trying to get both VPs to show for one prez. See http://jsfiddle.net/0urqaee9/112/ CSS frame for JSON snipplet. .out += "" + arr.presidents.president[i].number + "" + "" + arr.presidents.president[i].term.vice_president + ""; } – user3837357 Aug 13 '14 at 16:00
  • So if arr.presidents.president[i].term isArray [see link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) then you have to iterate through `arr.presidents.president[i].term[j]` – Hermenegida Aug 14 '14 at 05:45
  • I have added var j; but am receiving the following error message in the console: arr.presidents.president[i].term[j] is undefined – user3837357 Aug 14 '14 at 21:15