如何從一個json文件將一個對象的內容輸出到一個html頁面，而將另一個對象的內容輸出到另一個html頁面？

Question

goods.json文件中有兩個男性產品（襯衫）和兩個女性產品（連衣裙）。 打開man.html頁面時，必須顯示男人的襯衫，打開woman.html頁面時，必須顯示衣服。 如何實現？（不使用jquery）要添加到我的代碼中的什么？

eshop.js：

document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();  
});
function loadGoods() {

    $.getJSON('goods.json', function (data) {

        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<img src="'+data[key].image+'">';
            out+='<p>Price: '+data[key]['cost']+'</p>';
            out+='<button class="add-to-cart" data-art="'+key+'">Buy </button>';
            out+='</div>';
        }
         document.getElementById('goods').innerHTML = out; 
         document.querySelectorAll('button.add-to-cart').forEach(function(but) {
           but.addEventListener("click",addToCart);
})
    });
}

goods.json：

{
  "Shirt №1" : {
    "name" : " Shirt №1",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/1.jpg",
    "brand": "M"
  },
 "Shirt №2" : {
    "name" : " Shirt №2",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/1.jpg",
    "brand": "M"
  },
 "Dress №1" : {
    "name" : "Dress №1",
    "cost" : 1000,
    "country" : "brazil",
    "image" : "images/a.jpg",
     "brand": "L"
  },
 "Dress №2" : {
    "name" : "Dress №2",
    "cost" : 1000,
    "country" : "brazil",
    "image" : "images/a.jpg",
     "brand": "L"
  }
}

man.html：

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
         <a href="index.html"> to the main page</a>
         <div id="mini-cart"></div>
         <div id="goods"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/eshop.js"></script>
</body>
</html>

woman.html：

//same code as in man.html

Answer 1

如下修改您的eshop.js，

document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();  
});
function loadGoods() {

$.getJSON('goods.json', function (data) {

    var url = (window.location.href);
    var pageName = url.substring((url.lastIndexOf('/') + 1) , url.indexOf('.'));

    var out = '';
    for (var key in data){
        if(pageName != data[key]['gender']){
            continue;
        }
        out+='<div class="single-goods">';
        out+='<h3>'+data[key]['name']+'</h3>';
        out+='<img src="'+data[key].image+'">';
        out+='<p>Price: '+data[key]['cost']+'</p>';
        out+='<button class="add-to-cart" data-art="'+key+'">Buy </button>';
        out+='</div>';
    }
    document.getElementById('goods').innerHTML = out; 
    document.querySelectorAll('button.add-to-cart').forEach(function(but) {
        but.addEventListener("click",addToCart);
    })
});
}

並將性別屬性添加到您的goods.json

{
  "Shirt №1" : {
  "gender" : "man",
  "name" : " Shirt №1",
  "cost" : 1000,
  "country" : "argentina",
  "image" : "images/1.jpg",
  "brand": "M"
},
"Shirt №2" : {
  "gender" : "man",
  "name" : " Shirt №2",
  "cost" : 1000,
  "country" : "argentina",
  "image" : "images/1.jpg",
  "brand": "M"
},
"Dress №1" : {
  "gender" : "woman",
  "name" : "Dress №1",
  "cost" : 1000,
  "country" : "brazil",
  "image" : "images/a.jpg",
   "brand": "L"
},
"Dress №2" : {
  "gender" : "woman",
  "name" : "Dress №2",
  "cost" : 1000,
  "country" : "brazil",
  "image" : "images/a.jpg",
   "brand": "L"
}
}

如何從一個json文件將一個對象的內容輸出到一個html頁面，而將另一個對象的內容輸出到另一個html頁面？

問題描述

1 個解決方案

解決方案1
0 2019-08-20 03:46:00

如何從一個json文件將一個對象的內容輸出到一個html頁面，而將另一個對象的內容輸出到另一個html頁面？

問題描述

1 個解決方案

解決方案1 0 2019-08-20 03:46:00

解決方案1
0 2019-08-20 03:46:00