How to use Json in an html

Asked

Viewed 1,837 times

3

Hey guys? I’m new here, could you help me...is returning "Nan"!

<!DOCTYPE html>
<html>
<body>

<h1>Customers</h1>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/customers_mysql.php";

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

function myFunction(response) {
    var arr1 = JSON.parse(response);
    var out = "<h1>";
    out += arr1.Name + arr1.City + arr1.Country;
    out += "</h1>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

javascript html json
  • 1

    What is returning Nan?

  • 1

    Puts the comeback json.

  • My idea was to return only return index 1 of the array ....

4 answers

4

Its variable arr1is a list of objects and not just an object, to access it you need to inform the índice of each object in the list.

Use the forto access all items in this list, within the for the variable i will be the index of each object.

var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/customers_mysql.php";

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

function myFunction(response) {
  var arr1 = JSON.parse(response);
  var out = '';
  for (var i = 0; i < arr1.length; i++) {
    out += "<p>";
    out += arr1[i].Name + " - " + arr1[i].City + " - " + arr1[i].Country;
    out += "</p>";
  }
  document.getElementById("id01").innerHTML = out;
}
<div id="id01"></div>

2


You need to access each input of your json object. you can do this with a simple for. then just make an innerHTML when finished, it is recommended for performance reasons not to manipulate the DOM inside the is, so just concatene, I made an example by printing a list.

Example:

var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/customers_mysql.php";

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

function myFunction(response) {
  var arr1 = JSON.parse(response);
  var out = "<ul>";
  for (i in arr1) {
    out += "<li> Nome: " + arr1[i]['Name'] + " City: " + arr1[i]['City'] + " Country: " + arr1[i]['County'] + "</li>";
  }
  out += "</ul>";
  document.getElementById("id01").innerHTML = out;
}
<h1>Customers</h1>
<div id="id01"></div>

Now if you’re only going to access the first Intel just do so:

function myFunction(response) {
  var arr1 = JSON.parse(response);
  var out = "<ul>";
  out += "<li> Nome: " + arr1[0]['Name'] + " City: " + arr1[0]['City'] + " Country: " + arr1[0]['County'] + "</li>"; // [0] acessa o primeiro indice.
  out += "</ul>";
  document.getElementById("id01").innerHTML = out;
}

  • My idea was to return only return index 1 of the ...array. so I put "arr1" (the "1" wanted q was the index), so it only recognizes if it is a FOR ?

  • 1

    @Johnner No problem, no need to use it for, but why return so many values if you only want to use the first one? I’ll re-edit adding the way to catch only the first.

  • Thank you so much you helped me so much!! was just to put the 1 between brackets ... VLW

1

You have to use the for to access the array().

for(var i=0;i<arr1.length;i++){
    out += arr1[i].Name + ' - ' + arr1[i].City + ' - ' + arr1[i].Country;
}

1

Or use the foreach concept:

for (var i in arr1) {
   out += "<p> " + arr1[i].Name + " - " + arr1[i].City + " - " + arr1[i].Country + " </p>";
}

Browser other questions tagged javascript html json

You are not signed in. Login or sign up in order to post.