Resumen: Entrega nº14 del curso "Tutorial básico del programador web: Ajax desde cero".
Codificación aprenderaprogramar.com: CU01214F

 

 

EJEMPLOS JSON

JSON es un formato estándar para datos que destaca por ser ligero y rápido (por tanto muy útil para desarrollos web). Los datos en formato JSON pueden ser utilizados por prácticamente todos los lenguajes de programación (como Java, C#, C, C++, PHP, JavaScript, Python, etc.). Veremos ejemplos de datos o archivos de datos en formato json y herramientas de conversión on line a formato XML.

logo ajax

 

ARCHIVOS JSON

Los archivos JSON son simples archivos de texto con extensión json. Por ejemplo un nombre de archivo podría ser estudiantes.json ó colores.json. Un archivo json se puede crear con cualquier editor de texto plano. Hay que tener cuidado de usar siempre texto plano. Ten en cuenta que procesadores de texto avanzados como Microsoft Word no trabajan con texto plano y por tanto no serán útiles para trabajar con archivos json.

 

 

EJEMPLOS JSON Y DISEÑO DE DATOS JSON

A continuación mostramos el contenido de lo que podrían ser distintos archivos json:

Archivo colores1.json Archivo colores2.json Archivo colores3.json
{
    "arrayColores":[{
            "nombreColor":"rojo",
            "valorHexadec":"#f00"
        },
        {
            "nombreColor":"verde",
            "valorHexadec":"#0f0"
        },
        {
            "nombreColor":"azul",
            "valorHexadec":"#00f"
        },
        {
            "nombreColor":"cyan",
            "valorHexadec":"#0ff"
        },
        {
            "nombreColor":"magenta",
            "valorHexadec":"#f0f"
        },
        {
            "nombreColor":"amarillo",
            "valorHexadec":"#ff0"
        },
        {
            "nombreColor":"negro",
            "valorHexadec":"#000"
        }
    ]
}
{
    "arrayColores":[{
            "rojo":"#f00",
            "verde":"#0f0",
            "azul":"#00f",
            "cyan":"#0ff",
            "magenta":"#f0f",
            "amarillo":"#ff0",
            "negro":"#000"
        }
    ]
}
{
    "rojo":"#f00",
    "verde":"#0f0",
    "azul":"#00f",
    "cyan":"#0ff",
    "magenta":"#f0f",
    "amarillo":"#ff0",
    "negro":"#000"
}

 

 

Los ejemplos anteriores representan lo que podrían ser archivos JSON conteniendo datos en formato JSON.

Se trata de 3 archivos que contienen aproximadamente la misma información. ¿Cuál es la diferencia entre ellos?

En el archivo colores1.json existe un único objeto de datos donde el nombre es arrayColores y el valor un array (arreglo) de objetos JSON. Cada objeto del array está formado  por los pares nombreColor y su valor, y valorHexadec y su valor. En este ejemplo en concreto el array consta de 7 elementos con información correspondiente a 7 colores.

En el archivo colores2.json existe un único objeto de datos donde el nombre es arrayColores y el valor un array (arreglo) que contiene un único objeto JSON formado por siete pares nombre – valor que representa información sobre siete colores.

En el archivo colores3.json existe un único objeto de datos que está formado por siete pares nombre – valor que representa información sobre siete colores.

¿Cuál de los 3 archivos nos conviene usar? ¿Cuál es el mejor?

Estas preguntas no tienen una respuesta directa. La respuesta es: depende. Un archivo de datos se puede organizar de múltiples maneras. Cómo hacerlo entra dentro del campo de lo que se denomina “diseño de datos”. En cada aplicación, programa, desarrollo web, etc. debe tomarse en consideración cuál es el diseño de datos más adecuado para alcanzar los objetivos propuestos.

 

 

EJEMPLO JSON MINIFICADO

En muchas ocasiones se trabaja con archivos JSON donde todos los espacios y saltos de línea han sido eliminados buscando ocupar el mínimo espacio posible. Esta técnica se llama “minificado”. Minificar es conseguir que un fichero sea menos pesado modificando ciertos elementos: espacios innecesarios, saltos de línea, tabulaciones, comentarios, etc ... Al minificar el fichero se vuelve confuso a la hora de ser leído o interpretado por humanos, pero los computadores leen la información de forma más rápida y los archivos ocupan menos espacio.

 

Ejemplo (todo este texto es una sola línea sin espacios):

{"marcadores":[{"latitude":40.416875,"longitude":-3.703308,"city":"Madrid","description":"PuertadelSol"},{"latitude":40.417438,"longitude":-3.693363,"city":"Madrid","description":"PaseodelPrado"},{"latitude":40.407015,"longitude":-3.691163,"city":"Madrid","description":"EstacióndeAtocha"}]}

 

Hay diferentes webs donde se puede introducir un contenido JSON y obtener la equivalencia minificada. Para ello basta introducir en un buscador las palabras “json minifier”. Obtendremos resultados como http://www.webtoolkitonline.com/json-minifier.html ó http://www.httputility.net/json-minifier.aspx

 

 

EJEMPLOS JSON RESPUESTA

En muchas ocasiones realizamos desarrollos web o programas donde tenemos que recibir datos enviados por un servidor a través de una API facilitada por un tercero. Algunas APIs famosas nos pueden servir datos en formato JSON, o aunque no nos sirvan datos en formato JSON nosotros podemos almacenar información relativa a estos servicios usando JSON. Entre estos casos tendríamos datos de Google Maps, Twitter, Facebook, Flikr, YouTube, etc.

Veamos un ejemplo de archivo de datos o respuesta de este tipo. En este ejemplo el archivo de datos o respuesta JSON guarda datos sobre puntos en un mapa. Cada marcador de punto queda definido por una latitud, longitud, ciudad y descripción:

{
    "marcadores": [
      {
        "latitude": 40.416875,
        "longitude": -3.703308,
        "city": "Madrid",
        "description": "Puerta del Sol"
      },
      {
        "latitude": 40.417438,
        "longitude": -3.693363,
        "city": "Madrid",
        "description": "Paseo del Prado"
      },
      {
        "latitude": 40.407015,
        "longitude": -3.691163,
        "city": "Madrid",
        "description": "Estación de Atocha"
      }
    ]
}

 

 

CONVERTIDORES ON LINE DE JSON A XML Y DE XML A JSON

Con frecuencia tenemos datos o archivos en formato XML y queremos transformarlos a formato JSON, o al revés. Para ello existen multitud de posibilidades:

- Librerías o herramientas propias de los lenguajes que permiten la conversión automática.

- Scripts desarrollados por programadores disponibles para muchos lenguajes.

- Programas de escritorio que permiten la conversión automática de un formato a otro.

- Páginas web que permiten introducir datos en un formato y obtener la conversión a otro. Un ejemplo de estas webs es http://www.utilities-online.info/xmltojson/ y otro es http://json.online-toolz.com/tools/xml-json-convertor.php

Para encontrar webs con convertidores on line basta escribir en un buscador “xml to json converter on line” ó “json to xml converter on line”.

Nota: a la hora de convertir nos podemos encontrar errores debido a que xml no admite espacios dentro de sus etiquetas (equivalentes a los name de JSON). Por ejemplo "  description  ": "Puerta del Sol" nos puede dar lugar a un fallo de conversión. Para corregirlo debemos eliminar los espacios dejando "description": "Puerta del Sol"

 

 

EJERCICIO

Analiza el siguiente código y responde a las preguntas indicadas más abajo:

{
    "ResultSet": {
        "totalResultsAvailable": "1827221",
        "totalResultsReturned": 2,
        "firstResultPosition": 1,
        "Result": [
            {
                "Title": "potato jpg",
                "Summary": "Kentang Si bungsu dari keluarga Solanum tuberosum L ini ternyata memiliki khasiat untuk mengurangi kerutan  jerawat  bintik hitam dan kemerahan pada kulit  Gunakan seminggu sekali sebagai",
                "Url": "http://www.aprenderaprogramar.com/spaw/uploads /images/potato.jpg",
                "ClickUrl": "http://www. aprenderaprogramar.com/spaw/uploads/images/potato.jpg",
                "RefererUrl": "http://www.mediaindonesia.com/mediaperempuan/index.php?ar_id=Nzkw",
                "FileSize": 22630,
                "FileFormat": "jpeg",
                "Height": "362",
                "Width": "532",
                "Thumbnail": {
                    "Url": "http://thm-a01.yimg.com/nimage/557094559c18f16a",
                    "Height": "98",
                    "Width": "145"
                }
            },
            {
                "Title": "potato jpg",
                "Summary": "Introduction of puneri aloo This is a traditional potato preparation flavoured with curry leaves and peanuts and can be eaten on fasting day  Preparation time   10 min",
                "Url": "http://www.infovisual.info/01/photo/potato.jpg",
                "ClickUrl": "http://www.infovisual.info/01/photo/potato.jpg",
                "RefererUrl": "http://aprenderaprogramar.com.com/puneri-aloo-indian-%20recipe",
                "FileSize": 119398,
                "FileFormat": "jpeg",
                "Height": "685",
                "Width": "1024",
                "Thumbnail": {
                    "Url": "http://thm-a01.yimg.com/nimage/7fa23212efe84b64",
                    "Height": "107",
                    "Width": "160"
                }
            }
        ]
    }
}

 

 

a) Obtén el código XML equivalente usando 2 webs de conversión on-line. Indica qué webs has utilizado, el resultado obtenido y si el resultado es el mismo con ambas herramientas. Si no es el mismo indica por qué crees que no es el mismo.

b) Minifica los datos JSON. ¿Cuántos caracteres ocupan los datos minificados JSON? Minifica los datos XML. ¿Cuántos caracteres ocupan los datos minificados XML?

c) Explica qué crees que representan los datos y da una breve explicación de cómo se organizan.

d) Indica cuántos datos numéricos (number según la especificación oficial JSON) se pueden encontrar, en total, en el archivo.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: