Leer archivo JSON con Javascript y JQuery

Espacio con cosas que deseo compartir, principalmente código fuente, sé que existen lugares ya dedicados a eso, pero a mi me gusta hacerlo de esta manera. Advertencia: Algunos códigos son básicos y solo tienen la intención de dar una idea de como hacer las cosas.

Leer archivo JSON con Javascript y JQuery

Primero una explicación de JSON

JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo. Está basado en un subconjunto del Lenguaje de Programación JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999. JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son ampliamente conocidos por los programadores de la familia de lenguajes C, incluyendo C, C++, C#, Java, JavaScript, Perl, Python, y muchos otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio de datos.

Referencia: http://www.json.org/json-es.html

Para el ejemplo tenemos los datos de usuarios en formato JSON (archivo: usuarios.json)

            
  {
    "usuarios": [
    {"nombre" : "Juan Torres Contreras", "correo" : "juan@elcorreo.com", "nacimiento" : "17/03/1991"},
    {"nombre" : "Esther Mendez Villegas", "correo" : "esther@elcorreo.com", "nacimiento" : "02/06/1994"},
    {"nombre" : "Minerva Ruiz Quezada", "correo" : "minerva@elcorreo.com", "nacimiento" : "12/01/1992"},
    {"nombre" : "Rodolfo Callejas Pineda", "correo" : "rodolfo@elcorreo.com", "nacimiento" : "11/11/1990"}
    ]
  }

El código Javascript y Jquery

            
      var usuarios = [];
      $(document).ready(function ()
      {
        $.getJSON( "/data/usuarios.json", function( json )
        {        
          var datos = json.usuarios;        
          for(i in datos)
          {                    
            usuarios.push([datos[i].nombre, datos[i].correo,datos[i].nacimiento]);          
          }          
        });
      });      
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(dibujaTabla);
      function dibujaTabla()
      {        
        var tabla = new google.visualization.Table(document.getElementById('tablaUsuarios'));        
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'nombre');
        data.addColumn('string', 'correo');
        data.addColumn('string', 'nacimiento');
        data.addRows(usuarios);
        tabla.draw(data);
      }

El código HTML

            
              <div id="tablaUsuarios"></div>

Los datos de los usuarios son mostrados en la tabla, tal como se aprecia aqui, para dar salida de los datos en esta tabla he usado el framework Google Charts que es la API de gráficos de Google. Referencia: https://developers.google.com/chart/?hl=es

ZeroBytes