Преобразование внешнего json файла в html таблицу - PullRequest
Новая
       42

Преобразование внешнего json файла в html таблицу

0 голосов
/ 06 февраля 2020

Я пытаюсь преобразовать данные внешнего файла JSON в таблицу HTML, но ничего не отображается. Я получаю все данные в консоли, но не в таблице HTML.

Вот мой файл JSON. 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
                        }
                    ]
                }
            }
]}}

Этот файл JSON создан на основе рекламного API продукта Amazon.

Вот мой JavaScript файл 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);
    });
});
});

Я пытаюсь загрузить только определенные данные из файла JSON в таблицу html, например, ранг, название, код ASIN и т. Д. c. и ссылка на изображение в теге <img src=""> и URL продукта в теге <a href=""></a> с названием элемента в теге 'a'.

Вот как выглядит мой код HTML 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>

Я застрял здесь на несколько дней, пожалуйста, помогите мне завершить этот код. Спасибо.

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Возможно, вы ошибаетесь в способе доступа к данным.

Во-первых, используйте data.SearchResult.Items, чтобы получить доступ к замене элементов, для data.Items.

Во-вторых, value.BrowseNodeInfo/BrowseNodes/0/SalesRank не является синтаксисом JS для доступа к объекту. Возможно, вы захотите изменить его на value.BrowseNodeInfo.BrowseNodes[0].SalesRank, как и в другом месте вашего кода.

Ваш код работает здесь: http://jsfiddle.net/thanhdx0/Lhvopz3a/

Скажите, если это работы.

0 голосов
/ 06 февраля 2020

Пожалуйста, попробуйте это. Вам нужно сохранить ответ, а затем получить основные ключи. Получив основной узел необходимых данных, вы сможете выполнять операции с ним 

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