EniunEniunEniunEniun
  • Inicio
  • Blog
  • Cursos
  • Contactar
  • DTD
✕
            Sin resultados Ver todos los resultados

            Tutorial JSON: conversión a XML y viceversa

            • Inicio
            • XML y otros formatos JSON
            • Tutorial JSON: conversión a XML y viceversa
            10/07/2023
            Tutorial JSON

            Tutorial JSON

            En este tutorial JSON, estudiaremos JSON (JavaScript Object Notation), un formato de intercambio de datos muy utilizado en aplicaciones web y móviles.

            Contenidos del artículo

            Toggle
            • 1. Tutorial JSON: Introducción
              • 1.1. Por qué usar JSON
              • 1.2. Ejemplos de uso
            • 2. Diferencias entre XML y JSON
            • 3. Ejemplo JSON
            • 4. Estructura de un JSON
              • 4.1. Valores de las claves
              • 4.2. Estructura de un JSON: Inicio con { o [
                • 4.2.1. JSON de objeto (encerrado en llaves {})
                • 4.2.2. JSON de matriz (encerrado en corchetes [])
              • 4.3. Elección entre un objeto ({}) y una matriz ([])
              • 4.4. Representar un atributo XML en un JSON
            • 5. Herramientas para convertir de XML a JSON
            • 6. Validar archivo JSON
            • 7. Leer JSON desde JavaScript
            • 8. Tutorial JSON: Ejercicios resueltos

            Comenzaremos por comprender los conceptos básicos de JSON, incluyendo su sintaxis y estructura. Aprenderemos cómo representar datos simples y complejos en JSON. Luego, veremos las técnicas de conversión de datos de XML a JSON y viceversa y veremos diferentes herramientas que nos facilitan esta tarea, así como su validación.

            El tutorial de JSON es una excelente continuación después de aprender sobre HTML, CSS, XML y RSS.

            1. Tutorial JSON: Introducción

            JSON es un formato ligero de intercambio de datos. Se basa en una estructura de pares clave-valor y se utiliza para representar datos de forma legible. JSON ha ganado terreno debido a su simplicidad, flexibilidad y soporte en diferentes lenguajes de programación.

            1.1. Por qué usar JSON

            Existen varias razones por las que se utiliza JSON:

            • Independencia del lenguaje de programación: JSON es independiente del lenguaje de programación utilizado en tu sistema, a pesar de estar derivado de JavaScript.
            • Representación universal de datos: JSON representa datos que comparten elementos comunes de muchos lenguajes de programación, lo que lo convierte en una forma universal de representación de datos comprensible por todos los sistemas.
            • Legibilidad: JSON es legible por humanos cuando se formatea adecuadamente, lo que facilita la comprensión y el análisis de los datos.
            • Compacidad: El formato de datos JSON no utiliza una estructura de marcado completa como XML, lo que lo hace más compacto y eficiente en términos de tamaño de archivo y uso de ancho de banda.
            • Facilidad de análisis: JSON se puede desglosar fácilmente en componentes sintácticos lógicos, especialmente en entornos de programación como JavaScript.
            • Disponibilidad de bibliotecas: Existen numerosas bibliotecas de JSON disponibles para la mayoría de los lenguajes de programación, lo que facilita su implementación y manipulación en diferentes entornos de desarrollo.

            1.2. Ejemplos de uso

            Algunos ejemplos de uso comunes de JSON son los siguientes:

            1. Comunicación entre cliente y servidor: JSON se utiliza en aplicaciones web y móviles para enviar y recibir datos entre el cliente y el servidor. Por ejemplo, una aplicación de redes sociales puede enviar una solicitud HTTP al servidor para obtener los datos de un usuario y recibir la respuesta en formato JSON, que luego se procesa y muestra en la interfaz de usuario.
            2. Almacenamiento de datos en bases de datos: JSON se utiliza como formato de almacenamiento en bases de datos NoSQL, como MongoDB. Los documentos JSON se pueden guardar directamente en la base de datos, lo que permite una estructura flexible y una fácil manipulación de los datos.
            3. Configuración de aplicaciones: JSON se utiliza para almacenar la configuración de aplicaciones, como opciones de personalización, preferencias del usuario y configuraciones de aplicaciones. Esto permite una fácil lectura y escritura de la configuración en formato JSON.
            4. Transferencia de datos entre servicios web: JSON es utilizado en servicios web para intercambiar datos entre diferentes sistemas. Por ejemplo, una API RESTful puede recibir una solicitud en formato JSON, procesarla y devolver una respuesta en formato JSON.
            5. Almacenamiento en caché de datos: JSON se utiliza para almacenar datos en caché en aplicaciones web y móviles. Los datos se pueden serializar en formato JSON y guardar en la memoria o en sistemas de almacenamiento en caché, lo que permite un acceso más rápido a los datos.

            2. Diferencias entre XML y JSON

            XML y JSON son formatos de intercambio de datos con algunas diferencias:

            • JSON no utiliza etiquetas de cierre.
            • JSON es más conciso en comparación con XML.
            • JSON tiene una mayor velocidad de lectura y escritura.
            • JSON puede utilizar matrices para representar datos.
            • XML requiere un analizador específico, mientras que JSON se puede analizar con una función estándar de JavaScript.

            3. Ejemplo JSON

            El siguiente ejemplo JSON define un objeto alumnos, con una serie de 3 registros:

            Ejemplo de JSON:

            {
              "alumnos": [
                {"nombre": "Juan", "apellido": "Pérez"},
                {"nombre": "María", "apellido": "Gómez"},
                {"nombre": "Pedro", "apellido": "López"}
              ]
            }

            Ejemplo de XML:

            <alumnos>
              <alumno>
                <nombre>Juan</nombre>
                <apellido>Pérez</apellido>
              </alumno>
              <alumno>
                <nombre>María</nombre>
                <apellido>Gómez</apellido>
              </alumno>
              <alumno>
                <nombre>Pedro</nombre>
                <apellido>López</apellido>
              </alumno>
            </alumnos>

            XML anterior convertido a JSON:

            {
                "alumnos": {
                    "alumno": [
                        {
                            "nombre": "Juan",
                            "apellido": "Pérez"
                        },
                        {
                            "nombre": "María",
                            "apellido": "Gómez"
                        },
                        {
                            "nombre": "Pedro",
                            "apellido": "López"
                        }
                    ]
                }
            }

            Como has visto en el ejemplo anterior, la estructura de JSON puede ser diferente de la de XML, y a menudo no es necesario utilizar etiquetas adicionales como en XML. En JSON, la estructura de datos es más flexible y no requiere etiquetas de apertura y cierre para cada elemento. En el ejemplo anterior, podemos ver que en JSON no hay necesidad de agregar una etiqueta adicional para cada alumno <alumno>.

            Ejemplo de JSON simplificado al máximo: Como ves, dependiendo de cómo esté estructurado el código que usa el fichero JSON, podrías no necesitar la clave "alumnos" para acceder a los datos y podríamos simplificarlo de la siguiente manera.

            [
              {"nombre": "Juan", "apellido": "Pérez"},
              {"nombre": "María", "apellido": "Gómez"},
              {"nombre": "Pedro", "apellido": "López"}
            ]

            4. Estructura de un JSON

            La estructura básica de un JSON consiste en pares clave-valor encerrados entre llaves {}. Cada clave se representa como una cadena de caracteres y se separa de su valor por dos puntos (:). Los pares clave-valor se separan entre sí por comas (,). Para evitar problemas, se omite la coma después del último elemento en la lista de pares clave-valor.

            4.1. Valores de las claves

            El valor de las claves puede ser de diferentes tipos:

            Tipo de ValorDescripciónEjemplo
            NúmeroPuede ser entero o de coma flotante. Los decimales usan el punto (.) como separador.10, 3.14, -5
            CadenaDebe ir entre comillas dobles (")."Hola", "123", "true"
            BooleanoRepresenta valores lógicos: verdadero o falso.true, false
            Matriz (Array)Lista de valores separados por comas y encerrados en corchetes ([]).["rojo", "azul", "verde"] (cadenas)
            [1, 2, 3, 4] (números)
            [true, false, true] (booleanos)
            [{"nombre": "Ana"}, {"nombre": "Luis"}] (objetos)
            ObjetoConjunto de pares clave-valor encerrados en llaves ({}).{"nombre": "Ana", "edad": 25}
            NuloRepresenta la ausencia de valor.null
            Tabla 1: Tipos de valores en un JSON

            Ejemplo:

            En el siguiente ejemplo pretendemos dejar claro cómo se representa cada clave según su valor. Para ello, se muestra un número entero con la clave «numero», un número flotante con la clave «flotante, una cadena de texto con la clave «cadena», un valor booleano verdadero con la clave «booleano», una matriz de números con la clave «matriz», un objeto con la clave «objeto» que contiene subclaves y valores, y finalmente, el valor nulo con la clave «nulo».

            {
              "numero": 42,
              "flotante": 9.99,
              "cadena": "Hola Mundo",
              "booleano": true,
              "matriz": [1, 2, 3, 4, 5],
              "objeto": {
                "clave": "valor",
                "subobjeto": {
                  "atributo": "dato"
                }
              },
              "nulo": null
            }

            4.2. Estructura de un JSON: Inicio con { o [

            La estructura básica de un JSON comienza con un símbolo distintivo que indica si el JSON representa un objeto o una matriz. La elección entre llaves {} o corchetes [] determina el tipo principal de estructura que se está utilizando.

            En JSON, solo puede haber un único objeto raíz, y este debe comenzar con llaves {} o corchetes [], dependiendo de la estructura principal.

            4.2.1. JSON de objeto (encerrado en llaves {})

            Cuando un JSON empieza con llaves, representa un objeto. Un objeto es una colección de pares clave-valor donde cada clave es una cadena de caracteres. El valor asociado a cada clave puede ser de diversos tipos, como números, cadenas, booleanos, matrices, objetos o null.

            Ejemplo de JSON de tipo objeto:

            En este ejemplo, el JSON representa un objeto que contiene información sobre un libro, como el título, el autor, el año de publicación, valoraciones, una reseña y la presencia o ausencia de premios.

            {
              "titulo": "El Principito",
              "autor": "Antoine de Saint-Exupéry",
              "publicacion": 1943,
              "genero": "Fábula",
              "valoraciones": [4.8, 4.9, 5.0],
              "resena": {
                "resumen": "La historia de un pequeño príncipe que viaja por el universo.",
                "opiniones": [
                    {"usuario": "Lector123", "opinion": "Una historia encantadora que me hizo reflexionar sobre la vida."},
                    {"usuario": "Viajero789", "opinion": "Un relato profundo, pero me costó conectar con algunos personajes."}
                ]
              },
              "premios": null
            }

            4.2.2. JSON de matriz (encerrado en corchetes [])

            Cuando un JSON empieza con corchetes, representa una matriz. Una matriz es una colección ordenada de valores, donde cada elemento puede ser de cualquier tipo permitido en JSON.

            Ejemplo de JSON de Matriz:

            En este ejemplo, cada elemento de la matriz representa información sobre una película, incluyendo título, director, año de lanzamiento y género. Al iniciar con corchetes, este JSON representa una lista ordenada de películas (Lista ordenada de objetos película).

            [
              {
                "titulo": "Inception",
                "director": "Christopher Nolan",
                "lanzamiento": 2010,
                "genero": ["Acción", "Ciencia Ficción"]
              },
              {
                "titulo": "The Shawshank Redemption",
                "director": "Frank Darabont",
                "lanzamiento": 1994,
                "genero": ["Drama"]
              },
              {
                "titulo": "Pulp Fiction",
                "director": "Quentin Tarantino",
                "lanzamiento": 1994,
                "genero": ["Crimen", "Drama"]
              }
            ]

            Ejemplo de JSON con errores: Un array no puede tener pares clave-valor, los pares clave-valor van entre llaves.

            Ejemplo de JSON con errores: Un array no puede tener pares clave-valor, los pares clave-valor van entre llaves.
            [
              "lenguaje": "JavaScript",
              "paradigma": "Multiparadigma",
              "popularidad": 1,
              "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
            ]
            

            ¿Por qué es erróneo?

            • El array ([]) no puede contener pares clave-valor directamente.
            • Los pares clave-valor deben estar dentro de un objeto ({}).

            Forma correcta:

            Si la intención es que el array contenga un solo objeto, la corrección sería:

            [
              {
                "lenguaje": "JavaScript",
                "paradigma": "Multiparadigma",
                "popularidad": 1,
                "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
              }
            ]
            

            Si el array debe contener varios objetos, podría estructurarse de la siguiente forma:

            [
              {
                "lenguaje": "JavaScript",
                "paradigma": "Multiparadigma",
                "popularidad": 1,
                "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
              },
              {
                "lenguaje": "Python",
                "paradigma": "Multiparadigma",
                "popularidad": 2,
                "usos": ["Inteligencia artificial", "Desarrollo web", "Automatización"]
              }
            ]

            Ejemplo de JSON con errores: Si eliminas los corchetes y dejas solo llaves ({}) repetidas, JSON se vuelve inválido, ya que JSON solo permite un único objeto raíz.

            JSON con errores: JSON solo permite un único objeto raíz.
            {
              "lenguaje": "JavaScript",
              "paradigma": "Multiparadigma",
              "popularidad": 1,
              "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
            },
            {
              "lenguaje": "Python",
              "paradigma": "Multiparadigma",
              "popularidad": 2,
              "usos": ["Inteligencia artificial", "Desarrollo web", "Automatización"]
            },
            {
              "lenguaje": "C++",
              "paradigma": "Multiparadigma",
              "popularidad": 3,
              "usos": ["Sistemas embebidos", "Desarrollo de videojuegos", "Software de alto rendimiento"]
            }

            JSON válido con un nivel más:

            [
              {
                "lenguaje": {
                  "nombre": "JavaScript",
                  "paradigma": "Multiparadigma",
                  "popularidad": 1,
                  "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
                }
              },
              {
                "lenguaje": {
                  "nombre": "Python",
                  "paradigma": "Multiparadigma",
                  "popularidad": 2,
                  "usos": ["Inteligencia artificial", "Desarrollo web", "Automatización"]
                }
              }
            ]

            JSON válido con dos niveles más: al estilo XML.

            {
              "lenguajes": [
                {
                  "lenguaje": {
                    "nombre": "JavaScript",
                    "paradigma": "Multiparadigma",
                    "popularidad": 1,
                    "usos": ["Desarrollo web", "Aplicaciones móviles", "Back-end"]
                  }
                },
                {
                  "lenguaje": {
                    "nombre": "Python",
                    "paradigma": "Multiparadigma",
                    "popularidad": 2,
                    "usos": ["Inteligencia artificial", "Desarrollo web", "Automatización"]
                  }
                }
              ]
            }

            4.3. Elección entre un objeto ({}) y una matriz ([])

            La elección entre un objeto ({}) y una matriz ([]) en JSON depende de la naturaleza de los datos que se están representando y de la estructura que mejor se ajuste a esos datos. Veamos algunas consideraciones comunes sobre cómo y por qué se toma esa decisión:

            Tipo de datos:

            1. Objeto ({}):
            • Se elige un objeto cuando los datos pueden organizarse de manera lógica en pares clave-valor.
            • Cada propiedad (clave) en el objeto describe una característica específica, y su valor asociado puede ser de cualquier tipo de dato permitido en JSON, incluyendo números, cadenas, booleanos, objetos, matrices o null.
            • Útil para representar entidades individuales con propiedades distintas.

            Ejemplo:

               {
                 "nombre": "Juan",
                 "edad": 25,
                 "ciudad": "Madrid"
               }
            1. Matriz ([]):
            • Se elige una matriz cuando se tiene una lista ordenada de elementos.
            • Cada elemento de la matriz puede ser de cualquier tipo de dato permitido en JSON, incluyendo números, cadenas, booleanos, objetos, matrices o null.
            • Útil para representar conjuntos de datos como listas o colecciones.

            Ejemplo:

               [
                 "Manzanas",
                 "Plátanos",
                 "Uvas",
                 "Fresas"
               ]

            Ejemplos combinados:

            • Objeto anidado en matriz: En este ejemplo, cada elemento de la matriz es un objeto que representa a una persona.
              [
                {"nombre": "Juan", "edad": 25},
                {"nombre": "María", "edad": 30},
                {"nombre": "Carlos", "edad": 22}
              ]
            • Objeto anidado en matriz con un nivel más (personas): En este ejemplo, un objeto contiene una matriz de objetos, organizando la información de personas.
              {
                "personas": [
                  {"nombre": "Juan", "edad": 25},
                  {"nombre": "María", "edad": 30},
                  {"nombre": "Carlos", "edad": 22}
                ]
              }

            El siguiente JSON también sería válido:

            [
              {
                "persona": {
                  "nombre": "Juan",
                  "edad": 25
                }
              },
              {
                "persona": {
                  "nombre": "María",
                  "edad": 30
                }
              },
              {
                "persona": {
                  "nombre": "Carlos",
                  "edad": 22
                }
              }
            ]

            Y el siguiente JSON con dos niveles más que el primero también sería correcto:

            {
              "personas": [
                {
                  "persona": {
                    "nombre": "Juan",
                    "edad": 25
                  }
                },
                {
                  "persona": {
                    "nombre": "María",
                    "edad": 30
                  }
                },
                {
                  "persona": {
                    "nombre": "Carlos",
                    "edad": 22
                  }
                }
              ]
            }

            La elección entre objeto y matriz depende de la estructura y la relación de los datos que se están representando, así como de las necesidades específicas de la aplicación o contexto en el que se utiliza JSON. Nosotros somos quiénes decidimos cómo organizan la información. Es recomendable evitar niveles innecesarios en la estructura del JSON. Mantener el diseño simple facilita el trabajo con el documento, mejora la legibilidad y puede optimizar el rendimiento en aplicaciones que manejan datos JSON.

            4.4. Representar un atributo XML en un JSON

            En XML, los atributos se representan dentro de una etiqueta utilizando la sintaxis nombre="valor". Sin embargo, en JSON, la estructura es diferente y no hay una representación directa de atributos. En JSON, los datos se almacenan como pares clave-valor, y los atributos de XML a menudo se representan como propiedades en el objeto.

            Veamos un ejemplo de cómo podríamos representar los atributos de XML en JSON:

            Ejemplo de XML con Atributos:

            <alumno id="1" curso="A">
              <nombre>Juan</nombre>
              <apellido>Pérez</apellido>
            </alumno>

            Representación en JSON:

            {
              "alumno": {
                "id": 1,
                "curso": "A",
                "nombre": "Juan",
                "apellido": "Pérez"
              }
            }

            En este ejemplo, los atributos id y curso se han convertido en propiedades dentro del objeto JSON correspondiente. Cada propiedad en el objeto JSON es una clave seguida de un valor. Este enfoque mantiene la estructura de pares clave-valor que es común en JSON.

            Es importante señalar que esta es una convención común, pero no hay una regla estricta sobre cómo convertir atributos XML a JSON. La elección puede depender de la estructura específica de tus datos y de cómo prefieras organizar la información en JSON.

            5. Herramientas para convertir de XML a JSON

            Existen varias herramientas y bibliotecas que puedes utilizar para convertir de XML a JSON. Algunas de ellas son:

            1. xml2json: Es una biblioteca JavaScript que permite convertir fácilmente documentos XML a objetos JSON. Puedes utilizarla tanto en aplicaciones web como en aplicaciones Node.js.
            2. Jackson: Es una biblioteca de Java que proporciona funcionalidades para el procesamiento de XML y JSON. Puedes utilizarla para convertir documentos XML a objetos JSON en aplicaciones Java.
            3. xmltodict: Es una biblioteca de Python que convierte documentos XML en diccionarios JSON. Es fácil de usar y admite diferentes estilos de procesamiento.
            4. XSLT: XML Transformation Language (XSLT) también se puede utilizar para convertir documentos XML a JSON. Puedes escribir una hoja de estilo XSLT que realice la transformación deseada.
            5. Online XML to JSON converters: Hay varias herramientas en línea disponibles que te permiten cargar un archivo XML y obtener el resultado JSON. Por ejemplo: convertjson.com/xml-to-json.htm.

            Es importante destacar que muchos conversores automáticos de XML a JSON pueden generar resultados con estructuras extensas. En ocasiones, este código resultante puede contener información redundante o etiquetas XML que no son esenciales en el contexto de la representación JSON. En este caso, puede valer la pena realizar una transformación manual o utilizar técnicas específicas para compactar el JSON resultante. Esto implica eliminar etiquetas XML que no son necesarias en el contexto de la representación JSON y ajustar la estructura para que sea más concisa y fácil de entender.

            6. Validar archivo JSON

            La validación de JSON se puede realizar utilizando herramientas específicas que verifican si un JSON cumple con la sintaxis y estructura correctas. Algunas de las herramientas populares para validar JSON son:

            1. Herramienta online: Existen diversas herramientas en línea que validan la sintaxis de un JSON y muestra errores y advertencias si los hay. Por ejemplo jsonlint.com
            2. IDE o editores de texto: Muchos IDE y editores de texto populares tienen extensiones o complementos que incluyen funciones de validación de JSON. Algunos ejemplos son Visual Studio Code con la extensión «JSON Tools» y Sublime Text con la extensión «JSONLint».
            3. Lenguajes de programación: Muchos lenguajes de programación ofrecen bibliotecas y métodos para validar JSON.

            7. Leer JSON desde JavaScript

            En este apartado, veremos cómo JavaScript puede leer y manipular datos estructurados en formato JSON. A través de varios ejemplos prácticos, verás cómo cargar datos JSON en una página web y mostrarlos de manera dinámica.

            Ejemplo práctico: mostrar datos de un archivo externo JSON con JS en un documento HTML con estilos CSS

            En este ejemplo contamos con un archivo data.json con una serie de datos que queremos mostrar en nuestra página web de manera estructurada.

            JSON: Contamos con un archivo JSON con una lista de personas, incluyendo sus nombres y edades.

            data.json

            {
              "items": [
                {"name": "Andrea", "age": 30},
                {"name": "Jorge", "age": 25},
                {"name": "Luis", "age": 28},
                {"name": "Sofía", "age": 22},
                {"name": "Marta", "age": 26},
                {"name": "Carlos", "age": 32},
                {"name": "Lucía", "age": 24},
                {"name": "Manuel", "age": 29},
                {"name": "Ana", "age": 27},
                {"name": "David", "age": 31}
              ]
            }

            HTML: Disponemos de una página HTML básica que incluye un contenedor div donde se mostrarán los datos y un enlace a un archivo JavaScript.

            index.html

            <!DOCTYPE html>
            <html lang="es">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <link rel="stylesheet" href="styles.css">
            </head>
            <body>
                <h1>Nombres y edades</h1>
                <div id="data-container"></div>
                <script src="script.js"></script>
            </body>
            </html>
            

            CSS: Usamos CSS para dar estilo a los div que contendrán los nombres y edades.

            styles.css

            #data-container div {
                margin-bottom: 10px;
                font-family: Arial, sans-serif;
                border: 1px solid grey;
                padding: 10px;
            }

            JavaScript: Utilizamos JS para obtener los datos del archivo data.json.

            script.js

            // Escucha el evento 'DOMContentLoaded', que se dispara cuando el DOM está completamente cargado
            document.addEventListener('DOMContentLoaded', function() {
                // Realiza una solicitud fetch para obtener los datos del archivo 'data.json'
                fetch('data.json')
                .then(response => response.json()) // Convierte la respuesta en formato JSON
                .then(data => {
                    // Busca el contenedor en el DOM donde se mostrarán los datos
                    const container = document.getElementById('data-container');
                    // Itera sobre cada item en la propiedad 'items' del JSON
                    data.items.forEach(item => {
                        // Crea un nuevo div para cada item
                        const div = document.createElement('div');
                        // Asigna el texto del div para mostrar el nombre y la edad del item
                        div.textContent = `Nombre: ${item.name}, Edad: ${item.age}`;
                        // Agrega el div al contenedor
                        container.appendChild(div);
                    });
                })
                .catch(error => console.error('Error:', error)); // Captura y muestra cualquier error que ocurra durante la solicitud fetch o el procesamiento de los datos
            });

            Ejemplo práctico: mostrar datos con JSON directamente dentro de JavaScript en un documento HTML con estilos CSS

            Para trabajar con JSON directamente dentro de JavaScript, como se muestra en el ejemplo siguiente, puedes integrar datos JSON en tu script JS asignando el objeto JSON a una variable. Esto es útil para trabajar con datos estáticos sin necesidad de cargarlos desde un archivo externo. Puedes iterar sobre estos datos usando bucles o métodos de array como forEach, creando elementos DOM para mostrar la información en la página web.

            Este enfoque facilita la manipulación y presentación de datos sin realizar solicitudes de red, ideal para ejemplos, demos o cuando los datos no necesitan ser actualizados dinámicamente desde una fuente externa.

            En este ejemplo trabajamos los mismos datos que en el ejemplo anterior pero en este caso no usamos el archivo data.json, ya que lo integramos mediante una variable en el documento JS:

            script.js

            document.addEventListener('DOMContentLoaded', function() {
                // Datos JSON integrados directamente en el archivo JS
                const jsonData = {
                  "items": [
                    {"name": "Andrea", "age": 30},
                    {"name": "Jorge", "age": 25},
                    {"name": "Luis", "age": 28},
                    {"name": "Sofía", "age": 22},
                    {"name": "Marta", "age": 26},
                    {"name": "Carlos", "age": 32},
                    {"name": "Lucía", "age": 24},
                    {"name": "Manuel", "age": 29},
                    {"name": "Ana", "age": 27},
                    {"name": "David", "age": 31}
                  ]
                };
            
                const container = document.getElementById('data-container');
                jsonData.items.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = `Nombre: ${item.name}, Edad: ${item.age}`;
                    container.appendChild(div);
                });
            });

            Ejemplo en CodePen

            8. Tutorial JSON: Ejercicios resueltos

            Después de practicar con el tutorial JSON es momento de ponernos a practicar con ejercicios. Con el siguiente conjunto de ejercicios prácticos resueltos podrás poner en práctica tus habilidades sobre JSON y XML. Si aún no sabes XML te recomendamos hacer el tutorial de XML.

            Ver ejercicios JSON resueltos y tipo examen

            Confiamos en que este tutorial sobre JSON haya sido de ayuda para practicar para tus exámenes y aplicarlo a tus propios proyectos. ¡Sigue practicando con más tutoriales y cursos para seguir ampliando tu conocimiento y experiencia!

            Navegación de entradas

            Ejercicios JSON: prácticas resueltas y exámenes de ejemplo →

            Cursos XML y otros formatos

            • 1. XML
              • Ejercicios resueltos XML
            • 2. DTD
              • Ejercicios DTD
            • 3. XPath
              • Ejercicios XPath
            • 4. XSD
              • Ejercicios XSD
            • 5. XSLT
              • Ejercicios XSLT
            • 6. RSS
            • 7. JSON
              • Ejercicios JSON
            • 8. Markdown
              • Ejercicios Markdown
            Ver más cursos

            ¡Invítanos a un café!

            ¿Cómo donar?
            Ayúdanos a seguir creando contenido relacionado con la informática y el diseño y desarrollo web en Eniun. ¡Gracias por tu apoyo!
            Eniun

            info@eniun.com
            Reportar un error

            Servicios

            Desarrollo Web
            Diseño Web
            Marketing Digital
            Social Media
            Experiencia de Usuario
            Cursos formativos

            Suscríbete a la newsletter

            Únete a nuestra comunidad para recibir contenido exclusivo y relevante para diseñadores y desarrolladores web.

            Apuntarme

            © 2026 Eniun | Política de privacidad y cookies

                      Sin resultados Ver todos los resultados