使用javascript

时间：2018-03-24 16:25:07

标签： javascript json

我正在尝试在javascript中读取JSON文件并在前端显示图像键值。为了使它更清楚，这是我的JSON文件的片段。 

{ "products": 
    {"asin": "B000FJZQQY", "related": {"also_bought": 
       ["B000QY9N7G", "B0002FHIM6"], "also_viewed": ["B00DVLALEK", 
        "B0076S9MIK", "B000QY9N7G", "B000KUOII0", "B000FKK0U0", 
        "B001E471LW", "B008LO02RI", "B0018MMYXA", "B001FARMLE", 
        "B004R2SZL8", "B00ICSLQO6", "B000FKGTOG", "B000QYD4IA", 
        "B00BZBHHGS", "B00I5PMFZK", "B00774HBSQ", "B007R8T4M8", 
        "B00I4GJAAI", "B005R1SRKW", "B0013EDDVU", "B00FIV3Y8G", 
        "B0018TIUOK", "B008M0ZVHM", "B000HAR1ZK", "B003DW1FDI", 
        "B00LGXXLCO", "B008M2LTXU", "B009D3NZNE", "B0082C3MVM", 
        "B001FAX68W", "B00IELAS1I", "B001FARML4", "B001FAV4CM", 
        "B006QT1FFS", "B008M2UF9Y", "B0070QLQ2S", "B008ACKZWS", 
        "B00EISLWX4", "B00BXOI10S", "B000FFDDKY", "B00B05PTK0", 
        "B004N9A96E", "B008ACKRNU", "B00553GZM4", "B00B05P5UE", 
        "B003EHM4QE", "B00GBFWDIA", "B00LGXWIL4", "B001OR9WVG", 
        "B003JJ9TM4", "B001OR6CLO", "B00JG856IS", "B00DEUUBF2", 
        "B0031TQL7I", "B001ORBZFC", "B007D370NW", "B0088PCHJQ", 
        "B00LGXYTKM", "B0018MQAOY", "B000FKGTO6"], "bought_together": 
        ["B00DVLALEK", "B000FKK0U0", "B000QY9N7G", "B0076S9MIK"]}, 
        "title": "Plain Black Adjustable Hat", "price": 4.98, 
        "salesRank": {"Clothing": 11276}, "imUrl": "http://ecx.images-
         amazon.com/images/I/41iPLtrOkTL._SX342_.jpg", "brand": 
        "Gravity", "categories": [["Clothing, Shoes & Jewelry", "Men", 
        "Accessories", "Hats & Caps", "Baseball Caps"]]},
        {"asin": "B000O7CXCC", "title": "Tall Red Kap Industrial Short 
        - sleeved Work Shirt", "imUrl": "http://ecx.images-
        amazon.com/images/I/31Xd9t6H%2BlL._SX342_.jpg", "related": 
        {"also_bought": ["B0002FHIM6", "B000N8TKP0"], "also_viewed": 
        ["B007W58L3O", "B0058T4E8W", "B005HV4AA8", "B007VR3KXY", 
        "B007VPV2E0", "B00781QQ5M", "B0058T34EM", "B009A01884", 
        "B007WC38TO", "B000N8Q56C", "B00IOEG1C0", "B0055N5EBW", 
        "B00BLYRDIG", "B001GRV4EC", "B0058T46UI", "B0036GGNV0", 
        "B004QV9Z5A", "B003LO20AK", "B00BN37HHW", "B001JTAEPW", 
        "B004QV9Z4G", "B0035E8I8E", "B00IOEG9GI", "B00BLYRDJA", 
        "B00IOEG2PQ", "B007VPYC38", "B00DP0ODXW", "B007GC02RQ", 
        "B007W58XA0", "B007W58GHA", "B00CIZI71O", "B00520AI50", 
        "B004QVEWT4", "B007WC3IXA", "B0058T3Y5G", "B003C2KSIW", 
        "B00G293I8E", "B0011RLFKK", "B00IOEG6MA", "B00BLYRDI6", 
        "B007GBWMX4", "B00BLO09IM", "B00BLYRDH2", "B007GOH308", 
        "B003AQK9YS", "B007VR3DA4", "B005HV54Q2", "B00AYOYHYC", 
        "B0058T2XXU", "B0035E8MPS", "B00JD7FKTM", "B001IYAG1U", 
        "B005DDYQMW", "B00BB5WF7Y", "B004ZCE97E", "B0041T42AK", 
        "B00ENEK7JS", "B0058T3UK0", "B000C7VE3I"], "bought_together": 
        ["B007W58L3O", "B000N8Q56C", "B005HV4AA8"]}, "salesRank": 
        {"Clothing": 2878}, "categories": [["Sports & Outdoors", 
        "Clothing", "Men", "Shirts", "Button-Down Shirts"], ["Clothing, 
        Shoes & Jewelry", "Men", "Clothing", "Shirts", "Casual Button-
        Down Shirts"], ["Clothing, Shoes & Jewelry", "Men", "Big & 
        Tall"]]},
        {"asin": "B000EZT5GG", "title": "Wrangler Men's Regular Fit 
        Jeans", "imUrl": "http://ecx.images-
        amazon.com/images/I/41Hs7LR7LpL._SX342_.jpg", "related": 
        {"also_bought": ["B000BUDM54"], "also_viewed": ["B0007G8W3O", 
        "B0007G8VTY", "B000F9WJ7S", "B000V766A0", "B001A4B6V2", 
        "B001A41F5O", "B006J64PKU", "B008O2EW6E", "B001A47L6G", 
        "B000FERNT2", "B000M65GY2", "B006K9XS9A", "B00KQQNLAO", 
        "B000JRABQM", "B000TW5HTS", "B006MATHAQ", "B008PFGLW8", 
        "B0029NYLH4", "B000FA2832", "B0006Z13N2", "B008PDF2F2", 
        "B000CEME62", "B003WE994E", "B006K9XU5C", "B008O2EWV4", 
        "B006K9XS9K", "B000CEQP80", "B008RAI9DA", "B008PDF2CK", 
        "B001A3ZI6C", "B006MC59GU", "B006BMLPE6", "B0018OMIMK", 
        "B006CDQPLM", "B000BLKYMW", "B006CDWKZW", "B000FEM3QA", 
        "B008OHTU1G", "B0018OR118", "B000N8X86W", "B006J64R9Y", 
        "B008PQTL7O", "B005GSXTV8", "B008PDF2QG", "B006K9XT12", 
        "B006GK8MBW", "B0008G26BM", "B000FW38YS", "B006B5VNPY", 
        "B006GJU2SY", "B00BCG1LI6", "B0007G8RKC", "B006K9XS8G", 
        "B008OHTUNO", "B006H2BKWM"], "bought_together": ["B0007G8W3O", 
        "B000V766A0", "B00KQQNLAO", "B0007G8VTY"]}, "salesRank": 
        {"Clothing": 5043}, "categories": [["Clothing, Shoes & 
        Jewelry", "Men", "Clothing", "Jeans"]]},
        {"asin": "B000KK2K9O", "title": "Vans Unisex VANS CLASSIC SLIP-
        ON SKATE SHOES", "imUrl": "http://ecx.images-
        amazon.com/images/I/41W2PniiwbL._SX395_.jpg", "related": 
        {"also_bought": ["B000A80JXA"], "also_viewed": ["B000A80JXA", 
        "B005IHDY62", "B005IHDBII", "B005IHLTLO", "B00DPZ4AIU", 
        "B00HU1US7C", "B00LI8U31Y", "B004HJUTZG", "B007JWW3PW", 
        "B00LI8N5S2", "B007QK45WG", "B00LMI786I", "B001CW0A5K", 
        "B005P7DFTQ", "B00JGE74T6", "B004IA1BWO", "B004EEFPKI", 
        "B00L028VNK", "B0015ZVJRW", "B007D47SJ2", "B00HVVRDVA", 
        "B007QK4OSG", "B00LDF00GA", "B000EPCDC4", "B00E0WLSGO", 
        "B00HPXW6UM", "B004LOI616", "B007JWPETO", "B00LMI8VT6", 
        "B00K4FMMH0", "B003YUU62U", "B001F7M7K8", "B00KFCLLCO", 
        "B0051PLZ5I", "B00E0WKF3G", "B00IGEN0MW", "B000LEB7LG", 
        "B00JXE8OZW", "B00LIB3TO4", "B004O27ZJE", "B005DHMASK", 
        "B00E0WL3D2", "B0043RSEXG", "B0012WJDL2", "B00FVJEZUG", 
        "B00LMI82VI", "B003FZK520", "B00LICMV9C", "B00KEJX482", 
        "B00KCNLJ0U", "B008YEZHYS", "B005IIVT7M", "B004HJR6KM", 
        "B00FVJF0O6"], "bought_together": ["B000A80JXA", "B001F7M7K8", 
        "B001CW0A5K", "B0000ESAUL"]}, "salesRank": {"Shoes": 3148}, 
        "categories": [["Clothing, Shoes & Jewelry", "Street, Surf & 
        Skate"], ["Clothing, Shoes & Jewelry", "Women"], ["Clothing, 
        Shoes & Jewelry", "Men"]]}
]}

到目前为止，这是我的javascript，它只显示整个json文件中每个产品的所有图像。

$(function() {

var products = []

$.getJSON('test.json', function(data) {
   $.each(data.products, function(i, f) {
    var Imgs = '<div class="Hats"><img src="' + f.imUrl + '"></div>'
    $(Imgs).appendTo($(".HatsImages"));
    var Imgs = '<div class="Tops"><img src="' + f.imUrl + '"></div>'
    $(Imgs).appendTo($(".TopsImages"));
    var Imgs = '<div class="Pants"><img src="' + f.imUrl + '"></div>'
    $(Imgs).appendTo($(".PantsImages"));
    var Imgs = '<div class="Shoes"><img src="' + f.imUrl + '"></div>'
    $(Imgs).appendTo($(".ShoesImages"));
    })

  })
})

最后是使用此代码的html和css。

    <article class="column large-2">

          <div class="HatsImages">

          </div>

          <div class="TopsImages">

          </div>

          <div class="PantsImages">

          </div>

          <div class="ShoesImages">

          </div>
        </article>


.Hats, .Tops, .Shoes, .Pants {
    display: none;
    width: 150px;
    height: 150px; 
 }

.Hats:nth-child(1), .Pants:nth-child(1), .Tops:nth-child(1), 
.Shoes:nth-child(1) {
    display: block; 
}

所以在javascript中，我想阅读这个json文件并显示＆＃39; imUrl＆＃39;取决于你可以通过检查＆＃39;标题＆＃找到的图像是什么，在（或者你可以在HTML中看到）中的值（也称为图像） 39;或者＆＃39;类别＆＃39;核心价值。因此，对于这个例子的使用，让它成为一个帽子的图像，以便它显示在＆＃39; HatsImages＆＃39; DIV。然后，我想阅读＆＃39; buy_together＆＃39;键和该键中的每个asin值都找到该asin的原始数据。所以，让我们说其中一个asins是＆＃39; B000O7CXCC＆＃39;然后找到＆＃39; asin＆＃39;等于＆＃39; B000O7CXCC＆＃39;并显示＆＃39; imUrl＆＃39;键值也称为写入div中的图像，例如或者或者取决于它可以通过检查标题来找到的图片。或者＆＃39;类别＆＃39;然后为每一个＆＃39; asin＆＃39;重复这个过程。也被称为“buy_together”中的ID。键。

如果需要更多信息或说明，我希望这是有道理的。

1 个答案:

答案 0 :(得分：0)

你只需循环购买一起列表然后在查找项目中的同一productList内搜索

$.each(data.products, function(i, f) {
    var Imgs = '<div class="Hats"><img src="' + f.imUrl + '"></div>'
    $(Imgs).appendTo($(".HatsImages"));

    f.bought_together.forEach(function(element) {
       var item = findItem(element, data.products);
      //Display the item ......
     });


});


function findItem(asin, productList){
 for(var i = 0; i < productList.length; i++)
 {
   if(productList[i].asin == asin)
   {
     return productList[i];
   }
 }
}
相关问题
最新问题