Question posted in
You can find the official documentation here.

I need ways to print in HTML a query data from JSON file – Jquery ajax

After many hours looking here and in other forums I tried a lot of ways to print a query data from JSON file into HTML.

First I tried is XmlHttpRequest, I didn’t get anything, and later I tried to print in with jQuery, mainly with JQuery.Ajax but the most nearly result I got are undefined values.

The final result I need is to insert specific data and clicking a button get the JSON data rows that similar in specific column.

As a Film DataBase from which I want the movies that are made by an ‘x’ director.

This is my actual code:

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

And my JSON looks like:

{
            "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"
            }, {................
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    All merits to '@Heretic Monkey'.

    The problem was that i was not pointing inside the array named 'Product', that had to be specified in $.each(data.Product, function... because my JSON agroups the data in that array.

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

  2. 0

    You must specify an index number because it is an array

    item[0].Nombre

    or

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search