0

I am trying to convert external JSON file data to HTML table but it's not showing anything. I am getting all the data in the console but not in HTML table.

Here is my JSON file. results.json

{
    "SearchResult": {
        "Items": [
            {
                "ASIN": "B07RF1XD36",
                "BrowseNodeInfo": {
                    "BrowseNodes": [
                        {
                            "ContextFreeName": "Traditional Laptop Computers",
                            "DisplayName": "Traditional Laptops",
                            "Id": "13896615011",
                            "IsRoot": false,
                            "SalesRank": 1
                        },
                        {
                            "ContextFreeName": "Computers Features",
                            "DisplayName": "Computers Features",
                            "Id": "13900871",
                            "IsRoot": false
                        }
                    ]
                },
                "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF1XD36?tag=extdemo-20&linkCode=osi&th=1&psc=1",
                "Images": {
                    "Primary": {
                        "Small": {
                            "Height": 49,
                            "URL": "https:\/\/m.media-amazon.com\/images\/I\/41vMYgD92xL._SL75_.jpg",
                            "Width": 75
                        }
                    }
                },
                "ItemInfo": {
                    "ManufactureInfo": {
                        "ItemPartNumber": {
                            "DisplayValue": "A515-43-R19L",
                            "Label": "PartNumber",
                            "Locale": "en_US"
                        },
                        "Model": {
                            "DisplayValue": "A515-43-R19L",
                            "Label": "Model",
                            "Locale": "en_US"
                        },
                        "Warranty": {
                            "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
                            "Label": "Warranty",
                            "Locale": "en_US"
                        }
                    },
                    "Title": {
                        "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 inches Full HD IPS Display, AMD Ryzen 3 3200U, Vega 3 Graphics, 4GB DDR4, 128GB SSD, Backlit Keyboard, Windows 10 in S Mode, A515-43-R19L",
                        "Label": "Title",
                        "Locale": "en_US"
                    }
                },
                "Offers": {
                    "Listings": [
                        {
                            "Id": "nVBohxZFi65ksaPEjy8Hq1UFaPdN51ylhVaWNiVEIZ8zCoF1qGAc%2BuRojRgqhi7LQK2VpR5l3KRF%2B5PlHzcbLjowFIeK9mK5SwmlWfNrQfZRvr8TCay%2BTQ%3D%3D",
                            "Price": {
                                "Amount": 313.68,
                                "Currency": "USD",
                                "DisplayAmount": "$313.68",
                                "Savings": {
                                    "Amount": 36.31,
                                    "Currency": "USD",
                                    "DisplayAmount": "$36.31 (10%)",
                                    "Percentage": 10
                                }
                            },
                            "ViolatesMAP": false
                        }
                    ]
                }
            },
            {
                "ASIN": "B07RF2123Z",
                "BrowseNodeInfo": {
                    "BrowseNodes": [
                        {
                            "ContextFreeName": "Traditional Laptop Computers",
                            "DisplayName": "Traditional Laptops",
                            "Id": "13896615011",
                            "IsRoot": false,
                            "SalesRank": 11
                        },
                        {
                            "ContextFreeName": "Computers Features",
                            "DisplayName": "Computers Features",
                            "Id": "13900871",
                            "IsRoot": false
                        }
                    ]
                },
                "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF2123Z?tag=extdemo-20&linkCode=osi&th=1&psc=1",
                "Images": {
                    "Primary": {
                        "Small": {
                            "Height": 47,
                            "URL": "https:\/\/m.media-amazon.com\/images\/I\/41Ty8q6KoaL._SL75_.jpg",
                            "Width": 75
                        }
                    }
                },
                "ItemInfo": {
                    "ManufactureInfo": {
                        "ItemPartNumber": {
                            "DisplayValue": "A515-54-51DJ",
                            "Label": "PartNumber",
                            "Locale": "en_US"
                        },
                        "Model": {
                            "DisplayValue": "A515-54-51DJ",
                            "Label": "Model",
                            "Locale": "en_US"
                        },
                        "Warranty": {
                            "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
                            "Label": "Warranty",
                            "Locale": "en_US"
                        }
                    },
                    "Title": {
                        "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 Inches FHD IPS Display, 8th Gen Intel Core i5-8265U, 8GB DDR4, 256GB SSD, Fingerprint Reader, Windows 10 Home, A515-54-51DJ",
                        "Label": "Title",
                        "Locale": "en_US"
                    }
                },
                "Offers": {
                    "Listings": [
                        {
                            "Id": "nVBohxZFi65ksaPEjy8Hq0kLXhXYwgY3gCxMbf4rvHdUeVUY2qUveuPD8QSHDnrZUh2QVLQx7Ug1PQH%2FCPgAvjITt7ljnFuTnduiZKV31RckMDUmYejQAQ%3D%3D",
                            "Price": {
                                "Amount": 529.99,
                                "Currency": "USD",
                                "DisplayAmount": "$529.99"
                            },
                            "ViolatesMAP": false
                        }
                    ]
                }
            }
]}}

This JSON file is generated from amazon product advertising api.

Here is my JavaScript file background.js

$(document).ready(function(){
$.getJSON("results.json", function(data){
    console.log(data);
    var products = '';
    $.each(data.Items, function(key,value){
        products +='<tr>';
        products +='<td>'+value.ASIN+'</td>';
        products +='<td>'+value.BrowseNodeInfo/BrowseNodes/0/SalesRank+'</td>';
        products +='<td><a href="'+value.DetailPageURL+'">'+value.ItemInfo/Title/DisplayValue+'</a></td>';
        products +='<td>'+value.Offers/Listings/0/Price/DisplayAmount+'</td>';
        products +='<td><img src="'+value.Images/Primary/Small/URL+'"></td>';
        products +='</tr>';
        $("#tablebody").append(products);
    });
});
});

I am trying to load only certain data from JSON file to html table like sales rank, title, ASIN code etc. and image link in <img src=""> tag and product url in <a href=""></a> tag with item title in between 'a' tag.

Here is what my HTML code looks like popup.html

<body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="background.js"></script>
    <table id="jsontable">
        <thead>
            <tr>
            <th>ASIN</th>
            <th>Sales Rank</th>
            <th>Title</th>
            <th>Price</th>
            <th>Image</th>
            </tr>
        </thead>
        <tbody id="tablebody"></tbody>
    </table>
</body>

I am stuck here for days now, please help me complete this code. Thank You.

4
  • Are you creating a chrome extension?
    – thanhdx
    Feb 6, 2020 at 6:43
  • Yes, trying to make a chrome extension using amazon API.
    – Tanuj1899
    Feb 6, 2020 at 6:58
  • Check my answer below
    – thanhdx
    Feb 6, 2020 at 6:59
  • 1
    You could play with DataTables library. It is rather nice and could be used for fetching remote data. datatables.net/examples/ajax/objects.html Feb 6, 2020 at 7:09

2 Answers 2

1

Maybe you wrong at the way you access the data, I guess.

First, use data.SearchResult.Items to access Items replace,for data.Items.

Second, value.BrowseNodeInfo/BrowseNodes/0/SalesRank is not JS syntax to access object. You may want to change it to value.BrowseNodeInfo.BrowseNodes[0].SalesRank, same as other place in your code.

Have your code works here: http://jsfiddle.net/thanhdx0/Lhvopz3a/

Tell me if it works.

4
  • Thank you for your help @thanhdx, now the code works perfectly fine but its showing data in some kind of series like item1, item1 item2, item 1 item 2 item 3..... is there something else wrong in my code. take a look here - jsfiddle.net/tj1899/m0r17b4k
    – Tanuj1899
    Feb 6, 2020 at 7:51
  • @Tanuj1899 You need to move this var products = ''; into the each loop to create new row for each item
    – thanhdx
    Feb 6, 2020 at 8:01
  • Also, you can use DataTable library as a good way, as commented by @aleksej-vasinov
    – thanhdx
    Feb 6, 2020 at 8:04
  • Thank you again @thanhdx for your help!
    – Tanuj1899
    Feb 6, 2020 at 8:27
0

Please try this.You need to store response and then fetch main keys. Once you fetch main node of required data you can able to carry operation on it

var data1 = {
  "SearchResult": {
    "Items": [{
        "ASIN": "B07RF1XD36",
        "BrowseNodeInfo": {
          "BrowseNodes": [{
              "ContextFreeName": "Traditional Laptop Computers",
              "DisplayName": "Traditional Laptops",
              "Id": "13896615011",
              "IsRoot": false,
              "SalesRank": 1
            },
            {
              "ContextFreeName": "Computers Features",
              "DisplayName": "Computers Features",
              "Id": "13900871",
              "IsRoot": false
            }
          ]
        },
        "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF1XD36?tag=extdemo-20&linkCode=osi&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 49,
              "URL": "https:\/\/m.media-amazon.com\/images\/I\/41vMYgD92xL._SL75_.jpg",
              "Width": 75
            }
          }
        },
        "ItemInfo": {
          "ManufactureInfo": {
            "ItemPartNumber": {
              "DisplayValue": "A515-43-R19L",
              "Label": "PartNumber",
              "Locale": "en_US"
            },
            "Model": {
              "DisplayValue": "A515-43-R19L",
              "Label": "Model",
              "Locale": "en_US"
            },
            "Warranty": {
              "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
              "Label": "Warranty",
              "Locale": "en_US"
            }
          },
          "Title": {
            "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 inches Full HD IPS Display, AMD Ryzen 3 3200U, Vega 3 Graphics, 4GB DDR4, 128GB SSD, Backlit Keyboard, Windows 10 in S Mode, A515-43-R19L",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Listings": [{
            "Id": "nVBohxZFi65ksaPEjy8Hq1UFaPdN51ylhVaWNiVEIZ8zCoF1qGAc%2BuRojRgqhi7LQK2VpR5l3KRF%2B5PlHzcbLjowFIeK9mK5SwmlWfNrQfZRvr8TCay%2BTQ%3D%3D",
            "Price": {
              "Amount": 313.68,
              "Currency": "USD",
              "DisplayAmount": "$313.68",
              "Savings": {
                "Amount": 36.31,
                "Currency": "USD",
                "DisplayAmount": "$36.31 (10%)",
                "Percentage": 10
              }
            },
            "ViolatesMAP": false
          }]
        }
      },
      {
        "ASIN": "B07RF2123Z",
        "BrowseNodeInfo": {
          "BrowseNodes": [{
              "ContextFreeName": "Traditional Laptop Computers",
              "DisplayName": "Traditional Laptops",
              "Id": "13896615011",
              "IsRoot": false,
              "SalesRank": 11
            },
            {
              "ContextFreeName": "Computers Features",
              "DisplayName": "Computers Features",
              "Id": "13900871",
              "IsRoot": false
            }
          ]
        },
        "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF2123Z?tag=extdemo-20&linkCode=osi&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 47,
              "URL": "https:\/\/m.media-amazon.com\/images\/I\/41Ty8q6KoaL._SL75_.jpg",
              "Width": 75
            }
          }
        },
        "ItemInfo": {
          "ManufactureInfo": {
            "ItemPartNumber": {
              "DisplayValue": "A515-54-51DJ",
              "Label": "PartNumber",
              "Locale": "en_US"
            },
            "Model": {
              "DisplayValue": "A515-54-51DJ",
              "Label": "Model",
              "Locale": "en_US"
            },
            "Warranty": {
              "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
              "Label": "Warranty",
              "Locale": "en_US"
            }
          },
          "Title": {
            "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 Inches FHD IPS Display, 8th Gen Intel Core i5-8265U, 8GB DDR4, 256GB SSD, Fingerprint Reader, Windows 10 Home, A515-54-51DJ",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Listings": [{
            "Id": "nVBohxZFi65ksaPEjy8Hq0kLXhXYwgY3gCxMbf4rvHdUeVUY2qUveuPD8QSHDnrZUh2QVLQx7Ug1PQH%2FCPgAvjITt7ljnFuTnduiZKV31RckMDUmYejQAQ%3D%3D",
            "Price": {
              "Amount": 529.99,
              "Currency": "USD",
              "DisplayAmount": "$529.99"
            },
            "ViolatesMAP": false
          }]
        }
      }
    ]
  }
}
var data = data1.SearchResult.Items;
var products;
$.each(data, function(key, value) {
  products += '<tr>';
  products += '<td>' + value.ASIN + '</td>';
  products += '<td>' + value.BrowseNodeInfo.BrowseNodes[0].SalesRank + '</td>';
  products += '<td><a href="' + value.DetailPageURL + '">' + value.ItemInfo.Title.DisplayValue + '</a></td>';
  products += '<td>' + value.Offers.Listings[0].Price.DisplayAmount + '</td>';
  products += '<td><img src="' + value.Images.Primary.Small.URL + '"></td>';
  products += '</tr>';
  $("#tablebody").append(products);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="background.js"></script>
  <table id="jsontable" border=1>
    <thead>
      <tr>
        <th>ASIN</th>
        <th>Sales Rank</th>
        <th>Title</th>
        <th>Price</th>
        <th>Image</th>
      </tr>
    </thead>
    <tbody id="tablebody"></tbody>
  </table>
</body>

1
  • Thanks for the help but, I can't manually put my whole JSON data to my javascript file, as it is going to change every time the user inputs a new value.
    – Tanuj1899
    Feb 6, 2020 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.