Como Leer un Archivo JSON con Multiples Objetos y Arreglos con JS

Conocimiento es poder!

Como Leer un Archivo JSON con Multiples Objetos y Arreglos con JS

Si has tratado o estás tratando de leer un archivo JSON con multiples objetos y arreglos ya sabras el dolor de cabeza es eso.

Lo se por que yo tambien pase por eso cuando intente leer con JavaScript un archivo JSON con más de 400 MIL (400,000) líneas con cientos de objetos y arreglos 😮.

Estuve como 3 dias tratando de “descifrar” el archivo y poder leer toda la data con JavaScript.

Para que tengas una idea de la complejidad del archivo JSON aquí les dejo el link para que vean de qué estoy hablando. Demo JSON file.

Pero la sensación de alivio cuando lo logras, no tiene precio.

Por esas razones voy ahorrarte bastante tiempo y frustacion con el siguiente post.

Para mantener las cosas organizadas necesitamos solo 3 paginas,

  • index.html
  • programmingLanguages.js
  • programmingLanguages.json

Código HTML

No te preocupes si ves mucho codigo HTML, es solo el template de Bootstrap 4. En este archivo lo mas importante es <p id=”displayData”></p>.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Como Leer un Archivo JSON con Multiples Objetos y Arreglos con JavaScript</title>
  </head>

  <body>
    <div class="container mt-3">
      <div class="row">
        <div class="col-sm-12">
          <div class="shadow p-3 mb-5 rounded border border-info">
            <h1 class="mt-3 text-center">Lenguajes de Programación mas famosos</h1>
            <hr>
            <p id="displayData"></p>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <script src="programmingLanguages.js"></script>
  </body>
</html>

Código JavaScript

El primer “for loop” interactúa sobre el arreglo principal que se llama “programming_languages”.

El segundo “for loop” interactua sobre el arreglo que se llama “description”.

Hay que crear este segundo “for loop” para poder leer la data del arreglo “description” que a su vez esta dentro del arreglo “programming_languages”.

var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (this.readyState == 4 &amp;&amp; this.status == 200)
        {
            var dataArray = JSON.parse(this.responseText);

            var i, j;
            var displayData = "";

            for (i in dataArray.programming_languages)
            {
                for (j in dataArray.programming_languages[i].description)
                {
                    displayData += "<b>Name: </b> " + dataArray.programming_languages[i].name + "<br>";
                    displayData += "<b>Designed by: </b> " + dataArray.programming_languages[i].designed_by + "<br>";
                    displayData += "<b>Latest Release: </b> " + dataArray.programming_languages[i].latest_release + "<br>";
                    displayData += "<b>Object Oriented: </b> " + dataArray.programming_languages[i].paradigm.object_oriented + "<br>";
                    displayData += "<b>Description: </b> " + dataArray.programming_languages[i].description[j].description_data + "<br>";
                    displayData += "<br><hr>";
                }
            }
        }

        document.getElementById("displayData").innerHTML = displayData;
        };
        
        xmlhttp.open("GET", "programmingLanguages.json", true);
        xmlhttp.send();

JSON data

El archivo JSON contiene 1 arreglo principal llamado “programming_languages” 3 objetos que son los 3 lenguajes de programacion y dentro de cada uno de estos objetos hay otro objeto llamado “paradigm” y un arreglo llamado “description”.

{
    "programming_languages" : [ 
        {
            "name" : "JAVA",
            "designed_by" : "James Gosling",
            "latest_release" : "JAVA 10",

            "paradigm" : {
                "object_oriented" : true
            },
            "description" : [ {
                "description_data" : "Java is a general-purpose computer-programming language that is concurrent, class-based, object-oriented, and specifically designed to have as few implementation dependencies as possible."
            } ]
        },
        {
            "name" : "C++",
            "designed_by" : "Bjarne Stroustrup",
            "latest_release" : "ISO/IEC 14882:2017",

            "paradigm" : {
                "object_oriented" : true
            },
            "description" : [ {
                "description_data" : "C++ is a general-purpose programming language. It has imperative, object-oriented and generic programming features, while also providing facilities for low-level memory manipulation."
            } ]
        },
        {
            "name" : "C",
            "designed_by" : "Dennis Ritchie",
            "latest_release" : "C18 / June 2018",

            "paradigm" : {
                "object_oriented" : false
            },
            "description" : [ {
                "description_data" : "C is a general-purpose, imperative computer programming language, supporting structured programming, lexical variable scope and recursion, while a static type system prevents many unintended operations."
            } ]
        }

    ]
}    

Gracias por leer y compartir, espero les ayude en algo.

Aqui les dejo el source code por si lo quieren descargar.

Salida del programa.

salida del programa

Tags: ,

Deja tus comentarios o preguntas!

This site uses Akismet to reduce spam. Learn how your comment data is processed.