Recoger datos con JSON

La construcción de un sitio web desde cero. Parte VII:
Recoger datos con JSON.

Lo que haremos

En este capítulo vamos a:

El archivo de JSON

El siguiente archivo se almacena en nuestro servidor web:

http://dwva.es//Customers_JSON.php

Este archivo contiene

Datos Clientes
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

Cambiar la pagina clientes para usar Jason

En la carpeta DemoWeb, editar el archivo llamado datos.html

Insertar el siguiente contenido al archivo datos.html:

datos.html
<!DOCTYPE html>
<html>
<head>
<title> Our Company</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"> </nav>
<div id="main">
<h1> Customers</h1>
<div id="id01"> </div>
<footer id="foot01"> </footer>
</div>
<script src="Script.js"> </script>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_JSON.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 arr = JSON.parse(response);
var i;
var out = "<table> <tr> <th> Name</th> <th> City</th> <th> Country</th> </tr> ";
for(i = 0; i < arr.length; i++) {
out += "<tr> <td> " +
arr[i].Name +
"</td> <td> " +
arr[i].City +
"</td> <td> " +
arr[i].Country +
"</td> </tr> "; }
out += "</table> "
document.getElementById("id01").innerHTML = out;
}
</script>
</body>
</html>

Privacidad | Legal | Sitemap | Google+