Question 36405 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

:: jQuery :: Get jSON data keys and values and display in html format

How can I get data & keys from dynamic JSON file and display in table format as HTML

PS: This JSON will be dynamic and data may not be the same all the
time.
Eg: Some times, it will 2 sets or 3 sets of data, keys and values will
be different etc…

I am trying to get the JSON from https://amp.gmail.dev/playground/public/ssr_amp_list file

enter image description here

Results should be in below format (key – value):

<div class="mySet">
  <span class="myKey">id<span> - <span class="myValue">1<span>
  <span class="myKey">img</span> - <span class="myValue">https://amp.dev/static/samples/img/product1_640x426.jpg</span>
  <span class="myKey">name</span> - <span class="myValue">Apple</span>
  <span class="myKey">price</span> - <span class="myValue">1.99</span>
  <span class="myKey">stars</span> - <span class="myValue">★★</span>
  <span class="myKey">attribution<span> - <span class="myValue">visualhunt</span>
  <span class="myKey">url</span> - <span class="myValue">#</span>
  <span class="myKey">color</span> - <span class="myValue">green</span>
<div>

<div class="mySet">
  <span class="myKey">id</span> - <span class="myValue">1</span>
  <span class="myKey">img</span> - <span class="myValue">https://amp.dev/static/samples/img/product1_640x426.jpg</span>
  <span class="myKey">name</span> - <span class="myValue">Apple</span>
  <span class="myKey">price</span> - <span class="myValue">1.99</span>
  <span class="myKey">stars</span> - <span class="myValue">★★</span>
  <span class="myKey">attribution</span> - <span class="myValue">visualhunt</span>
  <span class="myKey">url</span> - <span class="myValue">#</span>
  <span class="myKey">color</span> - <span class="myValue">green</span>
<div>

etc...
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Below trick has done for this

    jsFiddle

    var atd, atr, temp;
fetch('https://amp.gmail.dev/playground/public/ssr_amp_list')
    .then((response) => response.json())
    .then((data) => {
    data.items.map(myList => {
        var __keys = Object.keys(myList); 
        var __values = Object.values(myList);

        $.each(__values, function(index,myList) {
            if (myList.includes('https:')) {
                myList = '<img src="'+myList+'" width="30">'             
            }

            atd = '<td>'+myList+'</td>'
            atr += atd;
            if((__keys.length) -1 == index){
                temp+=  '<tr>'+atr+'</tr>'
                atr = '';
            }
        })

    });
    $('#data table').html(temp) 
})

  2. 0

    You can use foreach to display all keys and values like this:

    array.foreach((value, index) => {
    // enter code hereBy Index you can display all enteries of array
    // by value you can display all values such as value.name
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search