下面我有咖啡館選單的 JSON 資料，我想在 HTMl 頁面中查看它們作為顯示影像、名稱和價格的網格視圖......有沒有辦法在 JS 和 HTML 中做到這一點？
[
{
"placeImage": "assets/images/straw-1.jpg",
"placeName": " pizza",
"price": 15000
},
{
"placeImage": "assets/images/straw-1.jpg",
"placeName": " Burger",
"price": 15000
},
]uj5u.com熱心網友回復：
這部分取決于您是在服務器端還是客戶端處理該資料。無論哪種方式，您都可以像這樣訪問 JS 腳本中的 JSON 資料：
const cafeData = require('./cafe.json'); // If it is in the same directory as the script
console.log(cafeData);
如果您嘗試使用來自服務器的資料創建動態 HTML 頁面，請嘗試使用 EJS 之類的模板語言，這對于 JavaScript 開發人員來說是最容易學習的。如果您在客戶端，則需要使用 DOM 將該資料插入 HTML。例如，如果您在產品卡片中有這樣的元素：<div id="pizzaPriceDisplay">
那么你的 JS 代碼可能看起來像這樣：
const priceDisplay = document.querySelector('#pizzaPriceDisplay');
pizzaPriceDisplay.innerText = '$' cafeData[0].price;
希望我幫助并快樂編碼:)
uj5u.com熱心網友回復：
當然！假設您的 JSON 資料存盤在 javascript 字串中
const jsonData = "..."; //The JSON string
首先要做的是將 json 資料轉換為我們可以迭代的 javascript 物件。我們可以這樣做：
const data = JSON.parse(jsonData);
很酷，現在，據我所知，您想將每個專案轉換為 HTML 元素（如卡片）并在網格中顯示所有專案。現在使用 CSS Grid，網格部分可能非常簡單：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout 。
所以在你的 HTML 中的某個地方你會想要一個這樣的元素：
...
<div class="grid-container" id="menu-items-container">
<!-- We are going to insert your rendered data here -->
</div>
...
在你的css中的某個地方你會有這樣的東西
...
.grid-container{
display:grid;
/* ... */
}
...
現在是有趣的部分。獲取該data變數的內容并將它們轉換為 html
//This function will take the data of one item
//And return an html element
function renderItem(item){
const base = document.createElement("div");
const img = document.createElement("img");
const title = document.createElement("h1");
const price = document.createElement("h2");
img.src = item.placeImage;
title.textContent = item.placeName;
price.textContent = item.price;
base.appendChild(img);
base.appendChild(title);
base.appendChild(price);
return base;
}
const container = document.querySelector("#menu-items-container");
for (let item of data){
container.appendChild(renderItem(item));
}
就是這樣，您可能希望更好地設定插入元素的樣式，您可以在這里和那里添加一些類。但你可能已經明白了它的要點。
對于您在示例中提供的特定資料，這應該會產生類似于以下內容的內容：
<div class="grid-container" id="menu-items-container">
<div>
<img src="assets/images/straw-1.jpg"/>
<h1>pizza</h1>
<h2>15000</h2>
</div>
<div>
<img src="assets/images/straw-1.jpg"/>
<h1>Burger</h1>
<h2>15000</h2>
</div>
</div>
uj5u.com熱心網友回復：
只需將 JSON 決議為 JS 物件
let menu = JSON.parse('[{"placeImage": "assets/images/straw-1.jpg", "placeName": "Pizza", "price": 15000},{"placeImage": "assets/images/straw-1.jpg", "placeName": "Burger","price": 15000}]');
然后您可以使用回圈對其進行迭代并繪制您想要的 HTML，例如：表格
function drawMenu(menu) {
let tableElement = document.createElement("table");
// Draw the headers of the table
let headerTableRowElement = document.createElement("tr");
let imageHeaderElement = document.createElement("th");
imageHeaderElement.innerText = "Image";
headerTableRowElement.appendChild(imageHeaderElement);
let nameHeaderElement = document.createElement("th");
nameHeaderElement.innerText = "Name";
headerTableRowElement.appendChild(nameHeaderElement);
let priceHeaderElement = document.createElement("th");
priceHeaderElement.innerText = "Price";
headerTableRowElement.appendChild(priceHeaderElement);
tableElement.app.appendChild(headerTableRowElement);
// Draw the items in the menu
for (let i = 0; i < menu.length; i) {
let item = menu[i];
let menuItemTableRowElement = document.createElement("tr");
let imageElement = document.createElement("td");
let image = document.createElement("img");
image.setAttribute("src", item.placeImage);
imageElement.appendChild(image);
menuItemTableRowElement.appendChild(imageElement);
let nameElement = document.createElement("td");
nameElement.innerHTML = item.placeName;
menuItemTableRowElement.appendChild(nameElement);
let priceElement = document.createElement("td");
priceElement.innerHTML = item.price;
menuItemTableRowElement.appendChild(priceElement);
tableElement.appendChild(menuItemTableRowElement);
}
document.appendChild(tableElement);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/483697.html
標籤：javascript html json