我需要在 HTML 中打印来自 JSON 文件的查询数据的方法答案

【问题标题】：I need ways to print in HTML a query data from JSON file我需要在 HTML 中打印来自 JSON 文件的查询数据的方法
【发布时间】：2020-09-08 13:51:41
【问题描述】：

在这里和其他论坛上看了很多小时后，我尝试了很多方法将查询数据从 JSON 文件打印到 HTML。

首先我尝试的是 XmlHttpRequest，我没有得到任何东西，后来我尝试使用 jQuery 进行打印，主要是使用 JQuery.Ajax，但我得到的最接近的结果是未定义的值。

我需要的最终结果是插入特定数据并单击按钮获取特定列中相似的 JSON 数据行。

作为一个电影数据库，我想从中获得由“x”导演制作的电影。

这是我的实际代码：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id='resultado'></div>
        <div style='position:absolute; z-index: 1; color:red; width:500px; height:500px;' onclick="loadJson()"></div>
      </body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script>
        function loadJson(){
            $.ajax({
                url: './dietetica.json',
                method: 'GET',
                dataType: 'json',
                success: function(data){
                    console.log(typeof(data));
                    var html_contenedor = '';
                    $.each(data, function(i, item){
                        html_contenedor +=
                            '<div><div><p>' +
                            item.Nombre + 
                            '</p></div><div><p>' +
                            item.Categoria +
                            '</p></div><div><p>' +
                            item.Precio +
                            '</p></div><div><p>' +
                            item.Proveedor +
                            '</p></div></div>';
                    });
                    $('#resultado').html(html_contenedor);
                }
            });
        }
    </script>
</html>

我的 JSON 看起来像：

{
            "Producto": [
            {
                "IdProducto": 1,
                "Nombre": "Tiharamsala",
                "Proveedor": "Exotic Liquids",
                "Categoria": "Bebidas",
                "Cantidad": "10 cajas x 20 bolsas",
                "Precio": "18,00",
                "Existencias": 39,
                "Pedido": 0,
                "Suspendido": "FALSO"
            }, {................

【问题讨论】：

我建议记录item的值；你可能需要另一个$.each，或者只使用$.each(data.Producto, ......
谢谢！就像在西班牙一样，我们会说，'Grande！泰坦！大师！裂缝！ Genio！'，你又为我节省了 6 个小时的上网时间，我非常感谢 HereticMonkey！

标签： javascript html jquery json ajax

【解决方案1】：

'@Heretic Monkey' 的所有优点。

问题是我没有指向名为“Product”的数组内部，必须在 $.each(data.Product, function... 中指定该数组，因为我的 JSON 将数据分组在那个数组中。

{
→→→→        "Producto": [      ←←←←←
            {
                "IdProducto": 1,
                "...

【讨论】：

【解决方案2】：

你必须指定一个索引号，因为它是一个数组

item[0].Nombre

或

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id='resultado'></div>
        <div style='position:absolute; z-index: 1; color:red; width:500px; height:500px;' onclick="loadJson()"></div>
      </body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script>
        
            var data = {
            "Producto": {
         
                "IdProducto": 1,
                "Nombre": "Tiharamsala",
                "Proveedor": "Exotic Liquids",
                "Categoria": "Bebidas",
                "Cantidad": "10 cajas x 20 bolsas",
                "Precio": "18,00",
                "Existencias": 39,
                "Pedido": 0,
                "Suspendido": "FALSO"
            
            },
              "Producto2": {
            
                "IdProducto": 1,
                "Nombre": "Tiharamsala",
                "Proveedor": "Exotic Liquids",
                "Categoria": "Bebidas",
                "Cantidad": "10 cajas x 20 bolsas",
                "Precio": "18,00",
                "Existencias": 39,
                "Pedido": 0,
                "Suspendido": "FALSO"
              }
            };
                    var html_contenedor = '';
                    $.each(data, function(i, item){
                      console.log( i, item.Nombre);
                        html_contenedor +=
                            '<div><div><p>' +
                            item.Nombre + 
                            '</p></div><div><p>' +
                            item.Categoria +
                            '</p></div><div><p>' +
                            item.Precio +
                            '</p></div><div><p>' +
                            item.Proveedor +
                            '</p></div></div>';
                    });
                    $('#resultado').html(html_contenedor);
              
    </script>
</html>

【讨论】：

答案是“[y]ou 必须指定索引号”，但是代码没有指定索引号。这很好，因为您在使用$.each 时不需要指定索引号。但是，您在示例中使用的数据与 OP 使用的数据不同：OP 的数据有一个 Producto 属性，它是一个数组。
感谢您的回答，这不是我的解决方案，但我很感激^^！