How to use Json in an html

Question

How to use Json in an html

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (1 votes)

3

What about people? 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

asked by anonymous 02.12.2015 / 14:28

4 answers

4

Your arr1 variable is a list of objects and not just an object, you need to enter the índice of each object in the list to access it.

Use for to access all items in that list, within 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>

02.12.2015 / 14:39

1

You must use for to access the array items.

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

02.12.2015 / 14:41

1

Or use the foreach concept:

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

02.12.2015 / 15:26

Variable control with Javascript for html How to use fonts on my Site?

score 2 · Accepted Answer

You need to access each index of your json object. you can do this with a simple for. then just do an innerHTML when finished, it is recommended for performance sake do not manipulate the DOM inside the for, then just concatenate, 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 only access the first index, just do the following:

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;
}