使用 jquery 将 json 数组对象显示为 html

Posted

技术标签:

【中文标题】使用 jquery 将 json 数组对象显示为 html【英文标题】：display json array object into html using jquery 【发布时间】：2021-06-15 09:40:13 【问题描述】：

嗨，我对 JSON 很陌生，我有以下 JSON 数组对象作为外部 filename.json，我想读取 json 数据并显示到 html 页面中。想用jquery。这是我的外部 json。我试过了，但没有结果

  [
   
      "Order":"203",
      "HMC":"False",
      "Dataprovider":"Hatch",
      "Category":"Laptop",
      "Locale":"EN-US",
      "SKUID":"NX.VGTAA.003",
      "Brand":"Acer",
      "OS":"Windows 10 Pro",
      "SecureBio":null,
      "ProcessorNo":"i3",
      "VariationIds":[
         "57193947"
      ],
      "Sellerinfo":"sellers available",
      "DeviceName":"Acer TravelMate P2 (Intel)",
      "DeviceImage":
         "AltText":"Acer TravelMate P2 (Intel)(10 Pro)",
         "ImageUrl":"http://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4E4RN?ver=faa3"
      ,
      "Specification":
         "OS":"OS: Windows 10 Pro",
         "ScreenSize":"Screen size: 14 inch",
         "Memory":"Memory: 4 GB",
         "Storage":"Storage: 500 GB",
         "BatteryLife":"Battery life: 8 hours",
         "CPU":"CPU: Intel® Core™ i3-8130U",
         "GPU":"",
         "StorageMedia":"",
         "FingerprintReader":"",
         "CPUFamily":"CPU family: Intel® Core™ i3-8xxx",
         "Touchscreen":"N"
      ,
      "Feature":[
         "RemoteWork"
      ],
      "ShopNowCTA":
         "Text":"Buy now",
         "Url":"",
         "Arialabel":"Buy the Acer TravelMate P2 (Intel)"
      ,
      "LearnMoreCTA":
         "Text":"",
         "Url":"",
         "Arialabel":""
      ,
      "CompareCTA":
         "Text":"COMPARE",
         "Url":"",
         "Arialabel":"Select Acer TravelMate P2410-G2-M-392D for comparison"
      ,
      "HardCodedPrice":"699.99",
      "Modified":"2021-02-28T21:40:37.1602592",
      "ID":"95174733",
      "ProductID":"57193947",
      "Name":"P2410-G2-M-392D",
      "Series":"",
      "AdditionalCategories":[
         "Laptop"
      ],
      "OnMarket":"2018-06-02T00:00:00",
      "Retailers":[
         
            "RetailerID":"90175",
            "RetailerName":"Acer Store",
            "PurchaseLink":"https://gethatch.com/iceleads_tracking/inbetween.xhtml?merch_id=90175&region=US&affiliate_id=53043&prod_id=1007548109&core_id=95174733",
            "PurchaseLinkDirect":"",
            "Logo":"https://gethatch.com/resources/images/merchant/mLogo90175.png",
            "Currency":"USD",
            "Price":"699.99",
            "StockInfo":"true",
            "StockCount":"1",
            "SourceDate":"2021-03-01T12:00:00",
            "BusinessID":"",
            "MarketFocus":"",
            "Group":""
         ,
         
            "RetailerID":"48915",
            "RetailerName":"Insight",
            "PurchaseLink":"https://gethatch.com/iceleads_tracking/inbetween.xhtml?merch_id=48915&region=US&affiliate_id=53043&prod_id=1109107689&core_id=95174733",
            "PurchaseLinkDirect":"",
            "Logo":"https://gethatch.com/resources/images/merchant/mLogo48915.png",
            "Currency":"USD",
            "Price":"646.99",
            "StockInfo":"false",
            "StockCount":"0",
            "SourceDate":"2021-03-01T12:00:00",
            "BusinessID":"",
            "MarketFocus":"",
            "Group":""
         
      ],
      "OEMPromotions":"",
      "Colors":"",
      "Configuration":"4 GB | 500 GB | Intel® Core™ i3-8130U | ",
      "FamilyIDs":[
         "57193947"
      ],
      "FamilyConfig":[
         "57193947",
         "700",
         "OS: Windows 10 Pro | Screen size: 14 inch | Battery life: 8 hours | Memory: 4 GB | Storage: 500 GB | "
      ],
      "Show":"True",
      "FeaturePosition":"Laptop:99"
   ,
   
      "Order":"892",
      "HMC":"False",
      "Dataprovider":"Hatch",
      "Category":"Laptop",
      "Locale":"EN-US",
      "SKUID":"NX.VKLAA.001",
      "Brand":"Acer",
      "OS":"Windows 10 Pro",
      "SecureBio":null,
      "ProcessorNo":"i7",
      "VariationIds":[
         "71431281",
         "72606305",
         "79552705",
         "79552697"
      ],
      "Sellerinfo":"No sellers found",
      "DeviceName":"Acer TravelMate P6",
      "DeviceImage":
         "AltText":"Acer TravelMate P6 (10 Pro)",
         "ImageUrl":"http://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4E4RX?ver=12a7"
      ,
      "Specification":
         "OS":"OS: Windows 10 Pro",
         "ScreenSize":"Screen size: 14 inch",
         "Memory":"Memory: 16 GB",
         "Storage":"Storage: 512 GB",
         "BatteryLife":"Battery life: 15 hours",
         "CPU":"CPU: Intel® Core™ i7-8565U",
         "GPU":"",
         "StorageMedia":"",
         "FingerprintReader":"",
         "CPUFamily":"CPU family: Intel® Core™ i7-8xxx",
         "Touchscreen":"Y"
      ,
      "Feature":[
         "RemoteWork",
         "SecuredcorePC",
         "FaceLogin",
         "FingerprintLogin",
         "TouchScreen",
         "WindowsInk",
         "Connectivity"
      ],
      "ShopNowCTA":
         "Text":"Buy now",
         "Url":"",
         "Arialabel":"Buy the Acer TravelMate P6"
      ,
      "LearnMoreCTA":
         "Text":"",
         "Url":"",
         "Arialabel":""
      ,
      "CompareCTA":
         "Text":"COMPARE",
         "Url":"",
         "Arialabel":"Select Acer TravelMate TMP614-51TG-792V for comparison"
      ,
      "HardCodedPrice":"",
      "Modified":"2021-02-28T21:40:37.1602592",
      "ID":"97300307",
      "ProductID":"71431281",
      "Name":"TMP614-51TG-792V",
      "Series":"",
      "AdditionalCategories":[
         "Laptop"
      ],
      "OnMarket":"2019-07-20T00:00:00",
      "Retailers":[
         
            "RetailerID":"48915",
            "RetailerName":"Insight",
            "PurchaseLink":"https://gethatch.com/iceleads_tracking/inbetween.xhtml?merch_id=48915&region=US&affiliate_id=53043&prod_id=1118626835&core_id=97300307",
            "PurchaseLinkDirect":"",
            "Logo":"https://gethatch.com/resources/images/merchant/mLogo48915.png",
            "Currency":"USD",
            "Price":"1490.99",
            "StockInfo":"false",
            "StockCount":"0",
            "SourceDate":"2021-03-01T12:00:00",
            "BusinessID":"",
            "MarketFocus":"",
            "Group":""
         
      ],
      "OEMPromotions":"",
      "Colors":"",
      "Configuration":"16 GB | 512 GB | Intel® Core™ i7-8565U | ",
      "FamilyIDs":[
         "71431281"
      ],
      "FamilyConfig":[
         "",
         "",
         "OS: Windows 10 Pro | Screen size: 14 inch | Battery life: 15 hours | Memory: 16 GB | Storage: 512 GB | "
      ],
      "Show":"True",
      "FeaturePosition":"Laptop:99"
   
   ]

我试过这段代码，但没有输出

   <!DOCTYPE html>  
<html>  
<head>  
<title> jQuery getJSON() method </title>  
  
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>  
<script>  
$(document).ready(function() 
  $.getJSON('http://localhost:8888/jsontohtml/devices.json',
   function(data) 
    $.each(data.results, function(key, val) 
      $('#results_div').append(
        '<li><label>Heading: ' + val.HMC  + '</label>' +
        '<span>Municipality Name: ' + val.Brand + '</span>' +
        '<small>Date: ' + val.Order + '</small></li>'
      );
    );
  );
); 




</script>  
</head>  
  
<body>  
    <div id="results_div"></div>

  
</body>  
</html>

让我知道如何使用 jquery 将 json 数据读入 html

【问题讨论】：

您提供的代码不是已经读取了 JSON 数组吗？你得到什么错误？或者你当前的代码会发生什么？ 结果我得到了空白屏幕，在控制台中显示以下错误“未声明 HTML 文档的字符编码。如果文档包含来自超出 US-ASCII 范围。页面的字符编码必须在文档或传输协议中声明。" 如果您将&lt;meta charset="utf-8"&gt; 添加到您的头部标签，会发生什么变化吗？ @MihailMinkov 是 我试过了，但仍然没有输出，只有空屏 【参考方案1】： 
<script>  
$(document).ready(function() 
  $.getJSON('http://localhost:8888/jsontohtml/devices.json',
   function(data) 

    $.each(data, function(key, val) 
      $('#results_div').append(
        '<li><label>Heading: ' + val.HMC  + '</label>' +
        '<span>Municipality Name: ' + val.Brand + '</span>' +
        '<small>Date: ' + val.Order + '</small></li>'
      );
    );
  );
); 
</script>

只需通过这一更改来更新您的脚本标签，您将需要在每个函数中传递数据

【讨论】：

嗨，屏幕输出仍然是空的，从 json 到 html 没有得到任何结果。 我认为您需要先控制台数据变量。这样，您就会知道您是否获得了有效的数组数据

以上是关于使用 jquery 将 json 数组对象显示为 html的主要内容，如果未能解决你的问题，请参考以下文章

jQuery Ajax 调用返回 JSON 字符串而不是对象数组

将 javascript 数组发布为 JSON 对象数组

如何将 Jquery Autocomplete 设置为特定值并使用 JSON 对象的数据源显示它的标签

判断json对象是不是为空（）

使用 JQuery 将 JSON 数组放入 HTML 列表

如何使用 Javascript 或 Jquery 将 JSON 对象包装在数组中？