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

Una vez te has formado con el curso de XML y el tutorial de JSON, es necesario practicar tus habilidades con ejercicios JSON. En esta sección encontrarás una recopilación de ejercicios JSON que incluyen prácticas resueltas y exámenes de ejemplo. En los ejercicios finales necesitarás también tener conocimientos básicos de HTML, CSS y JavaScript. Estos recursos están diseñados para ayudarte a consolidar tus conocimientos y para practicar para un examen de Lenguajes de Marcas y Sistemas de Gestión de la Información.

1. Ejercicios JSON: prácticas resueltas

Con este 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 curso XML.

1.1. Ejercicio JSON resuelto: Información de productos

Partiendo del siguiente fragmento de código XML que representa información de productos:

<productos>
  <producto>
    <nombre>Camiseta</nombre>
    <precio>19.99</precio>
    <disponible>true</disponible>
    <detalles>
      <color>Rojo</color>
      <talla>M</talla>
    </detalles>
  </producto>
  <producto>
    <nombre>Pantalón</nombre>
    <precio>29.99</precio>
    <disponible>false</disponible>
    <detalles>
      <color>Azul</color>
      <talla>L</talla>
    </detalles>
  </producto>
</productos>

1. Utilizando los conocimientos aprendidos sobre XML, crea una estructura JSON que represente la misma información de los productos.
2. Escribe el código JSON resultante.

Solución:

La estructura JSON equivalente al fragmento de código XML se puede representar de varias formas, según si se eliminan o no las etiquetas raíz.

[
   {
      "nombre": "Camiseta",
      "precio": "19.99",
      "disponible": "true",
      "detalles": {
         "color": "Rojo",
         "talla": "M"
      }
   },
   {
      "nombre": "Pantalón",
      "precio": "29.99",
      "disponible": "false",
      "detalles": {
         "color": "Azul",
         "talla": "L"
      }
   }
]

Otra forma de representar el JSON:

{
   "productos": {
      "producto": [
         {
            "nombre": "Camiseta",
            "precio": "19.99",
            "disponible": "true",
            "detalles": {
               "color": "Rojo",
               "talla": "M"
            }
         },
         {
            "nombre": "Pantalón",
            "precio": "29.99",
            "disponible": "false",
            "detalles": {
               "color": "Azul",
               "talla": "L"
            }
         }
      ]
   }
}

La forma de representar el JSON más usual:

{
  "productos": [
    {
      "nombre": "Camiseta",
      "precio": 19.99,
      "disponible": true,
      "detalles": {
        "color": "Rojo",
        "talla": "M"
      }
    },
    {
      "nombre": "Pantalón",
      "precio": 29.99,
      "disponible": false,
      "detalles": {
        "color": "Azul",
        "talla": "L"
      }
    }
  ]
}

También podríamos representarlo así:

[
{"nombre": "Camiseta", "precio": 19.99, "disponible": true, "detalles": {"color": "Rojo", "talla": "M"}},
{"nombre": "Pantalón", "precio": 29.99, "disponible": false, "detalles": {"color": "Azul", "talla": "L"}}
]

Puedes hacer pruebas con otras posible soluciones con este convertidor online.

1.2. Ejercicio JSON resuelto: Sistema de gestión de inventario

En un sistema de gestión de inventario, se manejan diferentes tipos de productos, cada uno con sus propias características. Cada producto tiene un código, nombre, precio y una categoría a la que pertenece. Además, se almacena información adicional como la fecha de ingreso y el stock disponible.

Crea tanto un archivo XML como un archivo JSON que represente esta información de los productos en el inventario.

1. Define la estructura y contenido del archivo XML que representará la información de los productos. Utiliza etiquetas XML apropiadas para cada elemento y atributos si es necesario.
2. Escribe el código XML resultante.
3. Define la estructura y contenido del archivo JSON que representará la misma información de los productos. Utiliza la estructura de objetos y arrays JSON adecuada.
4. Escribe el código JSON resultante.

Archivo XML resultante:

<inventario>
  <productos>
    <producto codigo="001" categoria="Electrónicos">
      <nombre>Televisor</nombre>
      <precio>599.99</precio>
      <fecha_ingreso>2023-07-15</fecha_ingreso>
      <stock>10</stock>
    </producto>
    <producto codigo="002" categoria="Ropa">
      <nombre>Camiseta</nombre>
      <precio>29.99</precio>
      <fecha_ingreso>2023-07-16</fecha_ingreso>
      <stock>50</stock>
    </producto>
    <producto codigo="003" categoria="Hogar">
      <nombre>Lámpara</nombre>
      <precio>39.99</precio>
      <fecha_ingreso>2023-07-17</fecha_ingreso>
      <stock>20</stock>
    </producto>
  </productos>
</inventario>

Archivo JSON resultante:

{
   "inventario": {
      "productos": {
         "producto": [
            {
               "nombre": "Televisor",
               "precio": "599.99",
               "fecha_ingreso": "2023-07-15",
               "stock": "10",
               "_codigo": "001",
               "_categoria": "Electrónicos"
            },
            {
               "nombre": "Camiseta",
               "precio": "29.99",
               "fecha_ingreso": "2023-07-16",
               "stock": "50",
               "_codigo": "002",
               "_categoria": "Ropa"
            },
            {
               "nombre": "Lámpara",
               "precio": "39.99",
               "fecha_ingreso": "2023-07-17",
               "stock": "20",
               "_codigo": "003",
               "_categoria": "Hogar"
            }
         ]
      }
   }
}

También podríamos comprimirlo y representarlo de la siguiente manera, dependiendo de el diseño específico que necesitemos para recoger los datos:

[
  {"nombre": "Televisor", "precio": "599.99", "fecha_ingreso": "2023-07-15", "stock": "10", "_codigo": "001", "_categoria": "Electrónicos"},
  {"nombre": "Camiseta", "precio": "29.99", "fecha_ingreso": "2023-07-16", "stock": "50", "_codigo": "002", "_categoria": "Ropa"},
  {"nombre": "Lámpara", "precio": "39.99", "fecha_ingreso": "2023-07-17", "stock": "20", "_codigo": "003", "_categoria": "Hogar"}
]

1.3. Ejercicio JSON resuelto: Aplicación de gestión de empleados

En una aplicación de gestión de empleados, se requiere almacenar la información de diferentes empleados, cada uno con sus datos personales y detalles laborales. Cada empleado tiene un número de empleado, nombre, apellido, fecha de nacimiento, puesto y departamento al que pertenece.

Crea tanto un archivo XML como un archivo JSON que represente esta información de los empleados en la aplicación.

1. Define la estructura y contenido del archivo XML que representará la información de los empleados. Utiliza etiquetas XML apropiadas para cada elemento y atributos si es necesario.
2. Escribe el código XML resultante.
3. Define la estructura y contenido del archivo JSON que representará la misma información de los empleados. Utiliza la estructura de objetos y arrays JSON adecuada.
4. Escribe el código JSON resultante.

Solución:

1. Archivo XML resultante:

<empleados>
  <empleado numero="001">
    <nombre>John</nombre>
    <apellido>Doe</apellido>
    <fecha_nacimiento>1985-05-20</fecha_nacimiento>
    <puesto>Gerente de Proyectos</puesto>
    <departamento>Desarrollo</departamento>
  </empleado>
  <empleado numero="002">
    <nombre>Jane</nombre>
    <apellido>Smith</apellido>
    <fecha_nacimiento>1990-09-15</fecha_nacimiento>
    <puesto>Analista de Datos</puesto>
    <departamento>Análisis</departamento>
  </empleado>
  <empleado numero="003">
    <nombre>Michael</nombre>
    <apellido>Johnson</apellido>
    <fecha_nacimiento>1988-12-10</fecha_nacimiento>
    <puesto>Programador</puesto>
    <departamento>Desarrollo</departamento>
  </empleado>
  <!-- Agrega más empleados según sea necesario -->
</empleados>

2. Archivo JSON resultante:

{
   "empleados": {
      "empleado": [
         {
            "nombre": "John",
            "apellido": "Doe",
            "fecha_nacimiento": "1985-05-20",
            "puesto": "Gerente de Proyectos",
            "departamento": "Desarrollo",
            "_numero": "001"
         },
         {
            "nombre": "Jane",
            "apellido": "Smith",
            "fecha_nacimiento": "1990-09-15",
            "puesto": "Analista de Datos",
            "departamento": "Análisis",
            "_numero": "002"
         },
         {
            "nombre": "Michael",
            "apellido": "Johnson",
            "fecha_nacimiento": "1988-12-10",
            "puesto": "Programador",
            "departamento": "Desarrollo",
            "_numero": "003"
         }
      ]
   }
}

También podríamos comprimirlo y representarlo de la siguiente manera, dependiendo de el diseño específico que necesitemos para recoger los datos:

[
  {"nombre": "John", "apellido": "Doe", "fecha_nacimiento": "1985-05-20", "puesto": "Gerente de Proyectos", "departamento": "Desarrollo", "_numero": "001"},
  {"nombre": "Jane", "apellido": "Smith", "fecha_nacimiento": "1990-09-15", "puesto": "Analista de Datos", "departamento": "Análisis", "_numero": "002"},
  {"nombre": "Michael", "apellido": "Johnson", "fecha_nacimiento": "1988-12-10", "puesto": "Programador", "departamento": "Desarrollo", "_numero": "003"}
]

1.4. Ejercicio JSON resuelto: feed.xml a feed.json

Partiendo de un archivo XML que contiene varias entradas en formato RSS, se requiere convertir manualmente esta información a formato JSON. El objetivo es comprender la estructura y sintaxis de ambos formatos y realizar la conversión de manera manual.

feed.xml:

<rss version="2.0">
  <channel>
    <title>Ejemplo de Feed RSS</title>
    <link>https://www.ejemplo.com/rss</link>
    <description>Este es un ejemplo de un feed RSS.</description>
    <item>
      <title>Artículo 1</title>
      <link>https://www.ejemplo.com/articulo1</link>
      <description>Este es el primer artículo del feed.</description>
    </item>
    <item>
      <title>Artículo 2</title>
      <link>https://www.ejemplo.com/articulo2</link>
      <description>Este es el segundo artículo del feed.</description>
    </item>
    <!-- Agrega más entradas según sea necesario -->
  </channel>
</rss>

feed.json:

{
   "rss": {
      "channel": {
         "title": "Ejemplo de Feed RSS",
         "link": "https://www.ejemplo.com/rss",
         "description": "Este es un ejemplo de un feed RSS.",
         "item": [
            {
               "title": "Artículo 1",
               "link": "https://www.ejemplo.com/articulo1",
               "description": "Este es el primer artículo del feed."
            },
            {
               "title": "Artículo 2",
               "link": "https://www.ejemplo.com/articulo2",
               "description": "Este es el segundo artículo del feed."
            }
         ]
      },
      "_version": "2.0"
   }
}

2. Ejercicios JSON: exámenes de ejemplo

2.1. Examen JSON empleados

Crea un JSON que represente los siguientes datos sobre varios empleados en diferentes ubicaciones.

Datos:

Employee	Name	Age	Position	Department	Salary	Location
Employee 1	Juan Pérez	35	Senior Developer	Technology	75000	Madrid, Spain
Employee 2	María Rodríguez	28	Graphic Designer	Design	60000	Paris, France
Employee 3	Carlos Gómez	40	Project Manager	Project Management	90000	Berlin, Germany

2.2. Examen JSON Recetas de cocina, convertir de XML a JSON

Convierte este XML de recetas de cocina en formato JSON.

XML:

<recipes>
  <recipe>
    <name>Spaghetti Bolognese</name>
    <ingredients>
      <ingredient>
        <name>Ground beef</name>
        <quantity>500g</quantity>
      </ingredient>
      <ingredient>
        <name>Tomato sauce</name>
        <quantity>400g</quantity>
      </ingredient>
      <ingredient>
        <name>Onion</name>
        <quantity>1</quantity>
      </ingredient>
      <ingredient>
        <name>Garlic</name>
        <quantity>2 cloves</quantity>
      </ingredient>
      <ingredient>
        <name>Spaghetti</name>
        <quantity>300g</quantity>
      </ingredient>
      <ingredient>
        <name>Olive oil</name>
        <quantity>2 tablespoons</quantity>
      </ingredient>
      <ingredient>
        <name>Salt</name>
        <quantity>To taste</quantity>
      </ingredient>
      <ingredient>
        <name>Black pepper</name>
        <quantity>To taste</quantity>
      </ingredient>
    </ingredients>
    <instructions>
      <step>Cook the spaghetti according to package instructions.</step>
      <step>Heat olive oil in a pan and sauté chopped onion and minced garlic until golden brown.</step>
      <step>Add ground beef and cook until browned.</step>
      <step>Pour in tomato sauce and let it simmer for 15 minutes.</step>
      <step>Season with salt and black pepper to taste.</step>
      <step>Serve the Bolognese sauce over cooked spaghetti.</step>
    </instructions>
  </recipe>
  <recipe>
    <name>Vegetarian Buddha Bowl</name>
    <ingredients>
      <ingredient>
        <name>Quinoa</name>
        <quantity>1 cup</quantity>
      </ingredient>
      <ingredient>
        <name>Chickpeas</name>
        <quantity>1 can (15 oz)</quantity>
      </ingredient>
      <ingredient>
        <name>Broccoli florets</name>
        <quantity>2 cups</quantity>
      </ingredient>
      <ingredient>
        <name>Carrots</name>
        <quantity>2, julienned</quantity>
      </ingredient>
      <ingredient>
        <name>Avocado</name>
        <quantity>1, sliced</quantity>
      </ingredient>
      <ingredient>
        <name>Cucumber</name>
        <quantity>1, sliced</quantity>
      </ingredient>
        <name>Cherry tomatoes</name>
        <quantity>1 cup</quantity>
      </ingredient>
      <ingredient>
        <name>Hummus</name>
        <quantity>1/2 cup</quantity>
      </ingredient>
      <ingredient>
        <name>Tahini dressing</name>
        <quantity>1/4 cup</quantity>
      </ingredient>
      <ingredient>
        <name>Sesame seeds</name>
        <quantity>1 tablespoon</quantity>
      </ingredient>
    </ingredients>
    <instructions>
      <step>Rinse quinoa and cook according to package instructions.</step>
      <step>Roast chickpeas with a drizzle of olive oil and your favorite spices until crispy.</step>
      <step>Steam broccoli florets and julienne carrots.</step>
      <step>Assemble bowls with cooked quinoa, roasted chickpeas, steamed broccoli, julienned carrots, sliced avocado, cucumber, and cherry tomatoes.</step>
      <step>Drizzle with hummus and tahini dressing.</step>
      <step>Sprinkle sesame seeds on top for added crunch.</step>
      <step>Enjoy your nutritious and delicious Vegetarian Buddha Bowl!</step>
    </instructions>
  </recipe>
</recipes>

2.3. Examen JSON Productos electrónicos

Crea un JSON que represente la siguiente información de manera estructurada, considerando que los precios deben estar en euros (EUR). Define la estructura del JSON y organiza los detalles de cada producto de una manera fácil de entender. Asegúrate de incluir todos los detalles relevantes de la tabla, como el ID, nombre del producto, categoría, precio unitario en euros, stock disponible, fabricante, peso en kilogramos y fecha de lanzamiento en tu representación JSON.

Datos:

ID	Product Name	Category	Unit Price (EUR)	Stock Available	Manufacturer	Weight (kg)	Release Date
1	Laptop HP	Electronics	800	15	HP	2.5	2022-05-15
2	Smartphone Samsung	Electronics	500	20	Samsung	0.3	2022-04-01
3	Book «1984»	Books	20	50	N/A	N/A	1949-06-08
4	Canon Camera	Electronics	600	10	Canon	1.2	2022-03-20
5	Sony Headphones	Electronics	100	30	Sony	0.5	2022-02-10
6	Wacom Tablet	Electronics	300	12	Wacom	0.7	2022-06-05
7	Athletic Shoes	Fashion	80	25	Nike	0.8	N/A
8	Samsung Refrigerator	Appliances	1000	8	Samsung	80.0	2022-01-15

2.4. Examen JSON Almacén

En una tienda que vende varios artículos, hay diferentes tipos de objetos almacenados en varios estantes y en diferentes categorías. Cada objeto tiene atributos específicos, y hay restricciones en la categoría del estante donde se pueden almacenar. Crea un archivo JSON que represente esta información sobre objetos, estantes y categorías.

Datos:

ID	Name	Price (EUR)	Material	Category
1	Smartphone	500	Plastic	Electronics
2	Laptop	1200	Metal	Electronics
3	Novel	20	Paper	Books
4	Science Book	25	Paper	Books
5	T-shirt	15	Cotton	Clothing
6	Jeans	30	Denim	Clothing
7	Doll	10	Plastic	Toys
8	Building Set	25	Plastic	Toys

3. Ejercicios JSON, HTML, CSS y JS

3.1. Investigación de datos JSON de una biblioteca JavaScript

Investiga dónde se encuentran los datos JSON en el siguiente código HTML, CSS y JavaScript. Agrega dos libros más a la biblioteca.

3.2. Lista de libros JSON, HTML y CSS

Se te proporciona un archivo JSON llamado data.json que contiene información sobre una lista de libros junto con sus respectivos precios. El objetivo es crear una página web que muestre estos datos de manera estructurada. Tienes un archivo HTML index.html que incluye un contenedor div donde se mostrarán los datos y está vinculado a un archivo JavaScript script.js. Además, se utiliza un archivo CSS styles.css para dar estilo a los elementos.

JSON:

{
  "books": [
    {"title": "The Alchemist", "price": 15.99},
    {"title": "One Hundred Years of Solitude", "price": 12.50},
    {"title": "Harry Potter and the Philosopher's Stone", "price": 20.00},
    {"title": "1984", "price": 10.25},
    {"title": "Pride and Prejudice", "price": 14.75},
    {"title": "Don Quixote", "price": 18.00},
    {"title": "The Shadow of the Wind", "price": 16.50},
    {"title": "To Kill a Mockingbird", "price": 13.80},
    {"title": "The Da Vinci Code", "price": 22.99},
    {"title": "The Hunger Games", "price": 17.25}
  ]
}

Instrucciones:

• Crea una página web que muestre información sobre los libros y sus precios.
• Utiliza el JSON proporcionado.
• Implementa el código JavaScript para obtener los datos del archivo JSON y mostrarlos en el contenedor designado.
• Usa el archivo CSS para dar estilo a los elementos y asegurar una presentación adecuada en la página.

Esperamos que esta sección te haya sido útil para mejorar tus habilidades en JSON. ¡Sigue practicando y estudiando nuevas oportunidades para profundizar tu dominio en los Lenguajes de Marcas y Sistemas de Gestión de la Información a través de nuestros tutoriales y cursos.