Избегайте использования числовых ссылок для доступа к значениям полей, принадлежащих массивам объектов в json2html - PullRequest
0 голосов
/ 03 марта 2020

Когда json2 html (https://github.com/moappi/json2html) получает JSON с массивом_объектов. Чтобы можно было настроить преобразование, используя значение некоторого поля объекта. Я обнаружил, что обязательно использовать следующий «NUMBER» в конфигурации преобразования для решения моего преобразования. Я имею в виду, мне нужно использовать следующую запись преобразования для анализа моих JSON:

array_of_objects. NUMBER .field_of_object

(последняя текстовая строка, использованная в конфигурации парсера для получения значения одного из полей объекта)

Как мне избежать использования этого NUMBER?

См. Далее JSON пример. Там, где вы можете проверить некоторые строки конфигурации, я добавил в качестве примера JSON, чтобы показать вам строку конфигурации синтаксического анализа, где я хочу избегать использования NUMBER:

"HITS__object. NUMBER .TIPO__object_field"

После того, как вы найдете конфигурацию парсинга, которую я сейчас использую.

Заранее спасибо

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}"}                  
        ]}
    ]}
]};

**** **** **** ВОПРОС НОВОГО КОНТЕНТА ** ** **** ****

Я собираюсь перефразировать вопрос, проблема та же

С помощью следующего кода я могу получить значение _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

Но со следующим кодом, чтобы получить значение поля _index, я не получаю никакого результата

<!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

Ответ на 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>

Спасибо

1 Ответ

1 голос
/ 11 марта 2020

Было бы лучше, если бы вы опубликовали весь код целиком, так как я не слишком уверен, что вы пытаетесь преобразовать здесь. Если вы хотите преобразовать каждый объект в массиве «хиты», вы можете сделать что-то вроде этого

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>
...