Avoid using numerical references to access field values belonging to object arrays in json2html

Question

When the json2html (https://github.com/moappi/json2html) receives a JSON with an array_of_objects. To be able to configure the transformation using the value of some object field. I'm finding that it's mandatory to use the following 'NUMBER' in transformation configuration to solve my transformation. I mean, i'm needing to use next transformation notation for parsing my JSON:

array_of_objects. NUMBER .field_of_object

(last text string used in parser configuration to get the value of one the object's fields)

How can I avoid to use this NUMBER?

See next JSON example. Where you can check some configuration strings, I added to JSON as example, to show you the parse configuration string where I want to avoid using the NUMBER:

"HITS__object. NUMBER .TIPO__object_field"

After you will find the parsing configuration that I am currently using.

Thanks in advance

JSON WITH PARSING CONFIGURATION NOTES 

"hits": [                                   <-- OBJECT'S ARRAY hits
      {                                         <-- OBJECT ELEMENT 1
        "_index": "catalogo",  
        "_type": "default",
        "_id": "WCkCRHABF6tpWazT-hOd",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NO EXISTE", <--TO ACCESS IT'S VALUE YOU NEED TO PUT IN CONFIGURATION: hits.0.Tipo  (I don't want to use the number 0)
          "Título": "doc.odt",
          "Versión": "?",
          "Fecha creación": "2019-11-20T23:00:00Z",
          "Última Edición": "2019-12-09T23:00:00Z",
          "Estado": "NO EXISTE",
          "Clasificación": "NO EXISTE",
          "Utiliza plantilla": "si",
          "Alertar de": " "
        },

      },

      {                                         <-- OBJECT ELEMENT 2
        "_index": "catalogo",    
        "_type": "default",
        "_id": "eikDRHABF6tpWazTChYH",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NA", <--TO ACCESS IT'S VALUE YOU NEED TO PUT IN CONFIGURATION: hits.1.Tipo (I don't want to use the number 1)
          "Título": "doc.odp",
          "Versión": "?",
          "Fecha creación": "2019-10-30T23:00:00Z",
          "Última Edición": "2019-11-04T23:00:00Z",
          "Estado": "NA",
          "Clasificación": "NA",
          "Utiliza plantilla": "NA"
        },

      },
      {                                           <-- OBJECT ELEMENT 3
        "_index": "catalogo",
        "_type": "default",
        "_id": "zykCRHABF6tpWazT8xKK",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "VACIO",   <--TO ACCESS IT'S VALUE YOU NEED TO PUT IN CONFIGURATION: hits.2.Tipo  (I don't want to use the number 2)
          "Título": "otro.odt",
          "Versión": "1.1",
          "Fecha creación": "2019-09-18T22:00:00Z",
          "Última Edición": "2019-09-20T22:00:00Z",
          "Descripción": "Procedimiento",
          "Etiqueta": "sistemas",
          "Estado": "VACIO",
          "Utiliza plantilla": "si"
        },

      },  …   

PARSING CONFIGURATION 

 var transform =  {"tag":"table", "children":[
    {"tag":"tbody","children":[
        {"tag":"tr","children":[
            {"tag":"td","html":"${hits.0.Tipo}"}                  
        ]}
    ]}
]};

**** **** **** NEW CONTENT QUESTION **** **** ****

I'm going to reframe the question, the problem is the same

With the following code I can get the value of the '_index' field

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <title>JSON Visualizer</title>

    <!-- Add jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Bootstrap & Font Awesome  -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

    <!-- Add JSON2HTML -->
    <script src='js/json2html.js' type='text/javascript'></script>
    <script src='js/jquery.json2html.js' type='text/javascript'></script>

    <!-- Le styles -->
    <link href="css/google-code-prettify/prettify.css" rel="stylesheet">
    <link href='css/layout.css' media='all' type='text/css' rel='stylesheet'/>
    <link href='css/index.css' media='all' type='text/css' rel='stylesheet'/>

    <!-- Main Scripts -->

</head>

<body>
 <div id="target_div"></div>

<script type="text/javascript">


var transforms =  {  
    "response":{"tag":"li","children":function() {
        return(json2html.transform(this.response,transforms.hitos));
    }},
    "hitos":{"tag":"li","children":[
        {"tag":"div","html":"${hitas.hits.1._index}"}
    ]}
};


var data = [{response:[

{
  "took": 3007,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hitas": {
    "total": 15000,
    "max_score": null,
    "hits": [
      {
        "_index": "catalogo1",
        "_type": "default",
        "_id": "WCkCRHABF6tpWazT-hOd",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NO EXISTE",
          "Título": "TEST.odt",
          "Versión": "?",
          "Fecha creación": "2019-11-20T23:00:00Z",
          "Última Edición": "2019-12-09T23:00:00Z",
          "Descripción": "Procedimiento",
          "Estado": "NO EXISTE",
          "Clasificación": "NO EXISTE",
          "Utiliza plantilla": "si",
          "Alertar de": " "
        },
        "fields": {
          "Última Edición": [
            "2019-12-09T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-11-20T23:00:00.000Z"
          ]
        },
        "sort": [
          1574290800000
        ]
      },
      {
        "_index": "catalogo2",
        "_type": "default",
        "_id": "eikDRHABF6tpWazTChYH",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NA",
          "Título": "PRE.odp",
          "Versión": "?",
          "Fecha creación": "2019-10-30T23:00:00Z",
          "Última Edición": "2019-11-04T23:00:00Z",
          "Descripción": "Presentacion",
          "Autor": "DESCONOCIDO",
          "Etiqueta": "base de datos",
          "Estado": "NA",
          "Clasificación": "NA",
          "Utiliza plantilla": "NA"
        },
        "fields": {
          "Última Edición": [
            "2019-11-04T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-10-30T23:00:00.000Z"
          ]
        },
        "sort": [
          1572476400000
        ]
      },
      {
        "_index": "catalogo3",
        "_type": "default",
        "_id": "zCkCRHABF6tpWazT8xKK",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "VACIO",
              "Título": "Cambios.odt",
          "Versión": "1.0",
          "Fecha creación": "2019-10-28T23:00:00Z",
          "Última Edición": "2018-10-30T23:00:00Z",
          "Descripción": "Cambios",
          "Etiqueta": "sistemas",
          "Estado": "VACIO",
          "Clasificación": "VACIO",
          "Utiliza plantilla": "si"
        },
        "fields": {
          "Última Edición": [
            "2018-10-30T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-10-28T23:00:00.000Z"
          ]
        },
        "sort": [
          1572303600000
        ]
      },


      .......

$('#target_div').html(json2html.transform(data,transforms.response));

</script>
</body>


</html>


RESPONSE OBTAINED
*
*
catalogo2

But with the following code, to get the value of the _index field, I don't get any result

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <title>JSON Visualizer</title>

    <!-- Add jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Bootstrap & Font Awesome  -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

    <!-- Add JSON2HTML -->
    <script src='js/json2html.js' type='text/javascript'></script>
    <script src='js/jquery.json2html.js' type='text/javascript'></script>

    <!-- Le styles -->
    <link href="css/google-code-prettify/prettify.css" rel="stylesheet">
    <link href='css/layout.css' media='all' type='text/css' rel='stylesheet'/>
    <link href='css/index.css' media='all' type='text/css' rel='stylesheet'/>

    <!-- Main Scripts -->

</head>

<body>
 <div id="target_div"></div>

<script type="text/javascript">


var transforms =  {  
    "response":{"tag":"li","children":function() {
        return(json2html.transform(this.response.hitas.hits,transforms.hitos));
    }},
    "hitos":{"tag":"li","children":[
        {"tag":"div","html":"${_index}"}
    ]}
};


var data = [{response:[

{
  "took": 3007,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hitas": {
    "total": 15000,
    "max_score": null,
    "hits": [
      {
        "_index": "catalogo1",
        "_type": "default",
        "_id": "WCkCRHABF6tpWazT-hOd",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NO EXISTE",
          "Versión": "?",
          "Fecha creación": "2019-11-20T23:00:00Z",
          "Última Edición": "2019-12-09T23:00:00Z",
          "Descripción": "Procedimiento",
          "Etiqueta": "librería",
          "Estado": "NO EXISTE",
          "Clasificación": "NO EXISTE",
          "Utiliza plantilla": "si",
          "Alertar de": " "
        },
        "fields": {
          "Última Edición": [
            "2019-12-09T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-11-20T23:00:00.000Z"
          ]
        },
        "sort": [
          1574290800000
        ]
      },
      {
        "_index": "catalogo2",
        "_type": "default",
        "_id": "eikDRHABF6tpWazTChYH",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "NA",
          "Título": "test.odp",
          "Versión": "?",
          "Fecha creación": "2019-10-30T23:00:00Z",
          "Última Edición": "2019-11-04T23:00:00Z",
          "Descripción": "Test",
          "Autor": "DESCONOCIDO",
          "Etiqueta": "Test",
          "Estado": "NA",
          "Clasificación": "NA",
          "Utiliza plantilla": "NA"
        },
        "fields": {
          "Última Edición": [
            "2019-11-04T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-10-30T23:00:00.000Z"
          ]
        },
        "sort": [
          1572476400000
        ]
      },
      {
        "_index": "catalogo3",
        "_type": "default",
        "_id": "zCkCRHABF6tpWazT8xKK",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "VACIO",
          "Título": "titulo.odt",
          "Versión": "1.0",
          "Fecha creación": "2019-10-28T23:00:00Z",
          "Última Edición": "2018-10-30T23:00:00Z",
          "Descripción": "Título largo",
          "Etiqueta": "sistemas",
          "Estado": "VACIO",
          "Clasificación": "VACIO",
          "Utiliza plantilla": "si"
        },
        "fields": {
          "Última Edición": [
            "2018-10-30T23:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-10-28T23:00:00.000Z"
          ]
        },
        "sort": [
          1572303600000
        ]
      },     
      {
        "_index": "catalogo4",
        "_type": "default",
        "_id": "zykCRHABF6tpWazT8xKK",
        "_version": 1,
        "_score": null,
        "_source": {
          "Tipo": "VACIO",
          "Versión": "1.1",
          "Fecha creación": "2019-09-18T22:00:00Z",
          "Última Edición": "2019-09-20T22:00:00Z",
          "Descripción": "Procedimiento",
          "Estado": "VACIO",
          "Clasificación": "VACIO",
          "Utiliza plantilla": "si"
        },
        "fields": {
          "Última Edición": [
            "2019-09-20T22:00:00.000Z"
          ],
          "Fecha creación": [
            "2019-09-18T22:00:00.000Z"
          ]
        },
        "sort": [
          1568844000000
        ]
      },

       ....

}];



$('#target_div').html(json2html.transform(data,transforms.response));

</script>
</body>


</html>

RESPONSE OBTAINED

 WHITE SCREEN

Response to Edit 1


<html>
<head>
    <meta charset='UTF-8' />
    <title>JSON Visualizer</title>

    <!-- Add jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Bootstrap & Font Awesome  -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

    <!-- Add JSON2HTML -->
    <script src='js/json2html.js' type='text/javascript'></script>
    <script src='js/jquery.json2html.js' type='text/javascript'></script>

    <!-- Le styles -->
    <link href="css/google-code-prettify/prettify.css" rel="stylesheet">
    <link href='css/layout.css' media='all' type='text/css' rel='stylesheet'/>
    <link href='css/index.css' media='all' type='text/css' rel='stylesheet'/>

    <!-- Main Scripts -->

</head>

<body>
 <div id="target_div"></div>

<script>


    var transforms =  {  
        "response":{"<>":"li","html":[
            {"<>":"h3","text":"Hitas ${took}"},
            {"<>":"ul","html":function() {
                return($.json2html(this.hitas.hits,transforms.hitos));
            }}
        ]},
        "hitos":{"<>":"li","html":[
            {"<>":"div","text":"${_index}"}
        ]}
    };


    var data = [

        {
            response:[
                {
                  "took": 3007,
                  "timed_out": false,
                  "_shards": {
                    "total": 1,
                    "successful": 1,
                    "skipped": 0,
                    "failed": 0
                  },
                  "hitas": {
                    "total": 15000,
                    "max_score": null,
                    "hits": [
                      {
                        "_index": "catalogo1",
                        "_type": "default",
                        "_id": "WCkCRHABF6tpWazT-hOd",
                        "_version": 1,
                        "_score": null,
                        "_source": {
                          "Tipo": "NO EXISTE",
                          "Versión": "?",
                          "Fecha creación": "2019-11-20T23:00:00Z",
                          "Última Edición": "2019-12-09T23:00:00Z",
                          "Descripción": "Procedimiento",
                          "Etiqueta": "librería",
                          "Estado": "NO EXISTE",
                          "Clasificación": "NO EXISTE",
                          "Utiliza plantilla": "si",
                          "Alertar de": " "
                        },
                        "fields": {
                          "Última Edición": [
                            "2019-12-09T23:00:00.000Z"
                          ],
                          "Fecha creación": [
                            "2019-11-20T23:00:00.000Z"
                          ]
                        },
                        "sort": [
                          1574290800000
                        ]
                      },
                      {
                        "_index": "catalogo2",
                        "_type": "default",
                        "_id": "eikDRHABF6tpWazTChYH",
                        "_version": 1,
                        "_score": null,
                        "_source": {
                          "Tipo": "NA",
                          "Título": "test.odp",
                          "Versión": "?",
                          "Fecha creación": "2019-10-30T23:00:00Z",
                          "Última Edición": "2019-11-04T23:00:00Z",
                          "Descripción": "Test",
                          "Autor": "DESCONOCIDO",
                          "Etiqueta": "Test",
                          "Estado": "NA",
                          "Clasificación": "NA",
                          "Utiliza plantilla": "NA"
                        },
                        "fields": {
                          "Última Edición": [
                            "2019-11-04T23:00:00.000Z"
                          ],
                          "Fecha creación": [
                            "2019-10-30T23:00:00.000Z"
                          ]
                        },
                        "sort": [
                          1572476400000
                        ]
                      },
                      {
                        "_index": "catalogo3",
                        "_type": "default",
                        "_id": "zCkCRHABF6tpWazT8xKK",
                        "_version": 1,
                        "_score": null,
                        "_source": {
                          "Tipo": "VACIO",
                          "Título": "titulo.odt",
                          "Versión": "1.0",
                          "Fecha creación": "2019-10-28T23:00:00Z",
                          "Última Edición": "2018-10-30T23:00:00Z",
                          "Descripción": "Título largo",
                          "Etiqueta": "sistemas",
                          "Estado": "VACIO",
                          "Clasificación": "VACIO",
                          "Utiliza plantilla": "si"
                        },
                        "fields": {
                          "Última Edición": [
                            "2018-10-30T23:00:00.000Z"
                          ],
                          "Fecha creación": [
                            "2019-10-28T23:00:00.000Z"
                          ]
                        },
                        "sort": [
                          1572303600000
                        ]
                      },     
                      {
                        "_index": "catalogo4",
                        "_type": "default",
                        "_id": "zykCRHABF6tpWazT8xKK",
                        "_version": 1,
                        "_score": null,
                        "_source": {
                          "Tipo": "VACIO",
                          "Versión": "1.1",
                          "Fecha creación": "2019-09-18T22:00:00Z",
                          "Última Edición": "2019-09-20T22:00:00Z",
                          "Descripción": "Procedimiento",
                          "Estado": "VACIO",
                          "Clasificación": "VACIO",
                          "Utiliza plantilla": "si"
                        },
                        "fields": {
                          "Última Edición": [
                            "2019-09-20T22:00:00.000Z"
                          ],
                          "Fecha creación": [
                            "2019-09-18T22:00:00.000Z"
                          ]
                        },
                        "sort": [
                          1568844000000
                        ]
                      }
                     ]
                    }
                }
            ]
        }
    ];


    var response = data[0].response;

    $('#target_div').html(json2html.transform(response,transforms.response));

</script>

</body>


</html>

Thank you

Chad Brown · Answer 1 · 2020-03-26T17:37:50.933

Would be best if you posted your whole code instead, as I'm not too sure what you're trying to transform here. If you want to transform each object within the "hits" array you can do something like this

var transforms =  {  
   "response":{"<>":"li","html":[
    {"<>":"h3","text":"Hitas ${took}"},
    {"<>":"ul","html":function() {
     return($.json2html(this.hitas.hits,transforms.hitos));
    }}
   ]},
   "hitos":{"<>":"li","html":[
    {"<>":"div","text":"${_index}"}
   ]}
  };


  var data = [
   
   {
    response:[
     {
       "took": 3007,
       "timed_out": false,
       "_shards": {
      "total": 1,
      "successful": 1,
      "skipped": 0,
      "failed": 0
       },
       "hitas": {
      "total": 15000,
      "max_score": null,
      "hits": [
        {
       "_index": "catalogo1",
       "_type": "default",
       "_id": "WCkCRHABF6tpWazT-hOd",
       "_version": 1,
       "_score": null,
       "_source": {
         "Tipo": "NO EXISTE",
         "Versión": "?",
         "Fecha creación": "2019-11-20T23:00:00Z",
         "Última Edición": "2019-12-09T23:00:00Z",
         "Descripción": "Procedimiento",
         "Etiqueta": "librería",
         "Estado": "NO EXISTE",
         "Clasificación": "NO EXISTE",
         "Utiliza plantilla": "si",
         "Alertar de": " "
       },
       "fields": {
         "Última Edición": [
        "2019-12-09T23:00:00.000Z"
         ],
         "Fecha creación": [
        "2019-11-20T23:00:00.000Z"
         ]
       },
       "sort": [
         1574290800000
       ]
        },
        {
       "_index": "catalogo2",
       "_type": "default",
       "_id": "eikDRHABF6tpWazTChYH",
       "_version": 1,
       "_score": null,
       "_source": {
         "Tipo": "NA",
         "Título": "test.odp",
         "Versión": "?",
         "Fecha creación": "2019-10-30T23:00:00Z",
         "Última Edición": "2019-11-04T23:00:00Z",
         "Descripción": "Test",
         "Autor": "DESCONOCIDO",
         "Etiqueta": "Test",
         "Estado": "NA",
         "Clasificación": "NA",
         "Utiliza plantilla": "NA"
       },
       "fields": {
         "Última Edición": [
        "2019-11-04T23:00:00.000Z"
         ],
         "Fecha creación": [
        "2019-10-30T23:00:00.000Z"
         ]
       },
       "sort": [
         1572476400000
       ]
        },
        {
       "_index": "catalogo3",
       "_type": "default",
       "_id": "zCkCRHABF6tpWazT8xKK",
       "_version": 1,
       "_score": null,
       "_source": {
         "Tipo": "VACIO",
         "Título": "titulo.odt",
         "Versión": "1.0",
         "Fecha creación": "2019-10-28T23:00:00Z",
         "Última Edición": "2018-10-30T23:00:00Z",
         "Descripción": "Título largo",
         "Etiqueta": "sistemas",
         "Estado": "VACIO",
         "Clasificación": "VACIO",
         "Utiliza plantilla": "si"
       },
       "fields": {
         "Última Edición": [
        "2018-10-30T23:00:00.000Z"
         ],
         "Fecha creación": [
        "2019-10-28T23:00:00.000Z"
         ]
       },
       "sort": [
         1572303600000
       ]
        },     
        {
       "_index": "catalogo4",
       "_type": "default",
       "_id": "zykCRHABF6tpWazT8xKK",
       "_version": 1,
       "_score": null,
       "_source": {
         "Tipo": "VACIO",
         "Versión": "1.1",
         "Fecha creación": "2019-09-18T22:00:00Z",
         "Última Edición": "2019-09-20T22:00:00Z",
         "Descripción": "Procedimiento",
         "Estado": "VACIO",
         "Clasificación": "VACIO",
         "Utiliza plantilla": "si"
       },
       "fields": {
         "Última Edición": [
        "2019-09-20T22:00:00.000Z"
         ],
         "Fecha creación": [
        "2019-09-18T22:00:00.000Z"
         ]
       },
       "sort": [
         1568844000000
       ]
        }
       ]
      }
     }
    ]
   }
  ];


  var response = data[0].response;

  $('#target').html(json2html.transform(response,transforms.response));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.4.0/json2html.min.js"></script>

 <ul id="target"></ul>

– I’m looking for a way to iterate over the array and output elements as
Very grateful for your help. I'll try to explain myself: The code of your 'edition 1' does not work. I'm not getting any results (I just put it in stackoverflow question window). Can you upload it complete? The value of the variable data from my first example was correct. Because I was getting a response from the script to upload my example to stackoverflow. I had to cut a bit of the content of the variable 'data' so as not to make an example too long. — mwso2, Mar 26 '20 at 08:59
Note that if I modify in my first code example a little, just changing 'tag' to '<>', it doesn't work anymore. And I'm having to make changes to my only example that works, little by little, to try to approximate your result. But there are too many changes in your code. And if an error appears I can't see the generated code to debug it. — mwso2, Mar 26 '20 at 08:59
I've added a code snippet that will run .. have a look at that. Keep in mind that you should use the latest version of json2html, I think the one that you have locally is an old version. The latest version is included in the snippet on a cdn. — Chad Brown, Mar 26 '20 at 17:38

Avoid using numerical references to access field values belonging to object arrays in json2html

1 Answers1