Como producir datos JSON con JavaScript

Escrito por steve mcdonnell Google | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Como producir datos JSON con JavaScript
Puedes crear y producir una lista de equipos de béisbol en JSON. (Hemera Technologies/Photos.com/Getty Images)

JavaScript Object Notation (JSON) es un formato estándar de Internet para el intercambio de información entre sitios web y plataformas. JavaScript tiene un método integrado llamado "JSON.parse" que acepta una cadena JSON y la convierte en un objeto que puede producir la ventana del navegador. La forma más fácil de iteración y producir los contenidos de un objeto es utilizar la biblioteca jQuery y su método "$.each".

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Crea un nuevo archivo HTML con el Bloc de notas o un editor HTML. Añade un esqueleto HTML al archivo:

    <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Equipos de béisbol</title> </head> <body> </body> </html>

  2. 2

    Inserta la biblioteca jQuery entre las etiquetas <head> especificando su ubicación, como la instancia que Google pone a disposición:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

  3. 3

    Añade JavaScript entre las etiquetas de <head>. Haz una cadena JSON:

    <script> var js = '{"Baltimore":"Orioles", "Boston":"Red Sox", "New York":"Yankees", "Atlanta":"Braves", "Florida":"Marlins"}';

  4. 4

    Utiliza el método JSON.parse para convertir la cadena en un objeto:

    var json = JSON.parse(js);

  5. 5

    Usa el método jQuery "$.each" para hacer una iteración del objeto y producir información a la página web:

    $(document).ready(function() { $.each(json, function(city, team) { document.write("<p>The " + city + " " + team + "</p>"); }); }); </script>

  6. 6

    Guarda el archivo. Ábrelo en un navegador para mostrar el contenido de la cadena JSON que creaste.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles