從JavaScript中呈現HTML中數組中的每個對象

我有一個從JSON文件中獲取的對象的JavaScript數組。數組中的每個對象都表示一個產品。以下代碼顯示了JavaScript。 console.log顯示控制檯中的每個元素，但innerHTML僅渲染最後一個，因爲這是要渲染的最後一個值。從JavaScript中呈現HTML中數組中的每個對象

/* global $ */ 
var output = document.getElementById('output'); 
var products = []; 

$.getJSON('/products', function(data){ 
    output.innerHTML = data 


    for(var keys in data){ 
     console.log(data[keys]); 
     products.push(data[keys]); 
     output.innerHTML = data[keys].NAME; 
    } 
    // output.innerHTML = products; 
    //console.log(products) 

});

我希望每個產品都在它自己的輸出div中呈現。我將如何顯示HTML中的每個元素而不是最後一個？

來源

2017-05-31 Josh Horton

值得注意的是一般不好的做法使用'在'對數組 – charlietfl

元素只是添加到您的輸出。其實你做到了。

更改此：

output.innerHTML = data[keys].NAME;

要這樣：

$('#output').append(`<div>${data[keys].NAME}</div>`);

所以：

for(var keys in data){ 
     console.log(data[keys]); 
     products.push(data[keys]); 
     $('#output').append(`<div>${data[keys].NAME}</div>`); 
    }

我建議你也用一個簡單的forEach改變for...in，所以要改變循環進入：

data.forEach((el) => { 
    products.push(el); 
    $('#output').append(`<div>${el.NAME}</div>`); 
});

您的代碼中的錯誤只是您每次重寫元素的HTML內容。如果你改變：

output.innerHTML = data[keys].NAME;

這樣：

output.innerHTML += data[keys].NAME;

應該已經工作

來源

2017-05-31 21:55:48 quirimmo

你可以使用jQuery「append」。您不需要製作產品對象。

嘗試這樣的：

for(var keys in data){ 
    $(".productList").append("<div>"+data[keys].NAME+"</div>"); 
}

來源

2017-05-31 21:54:46 VK321

$('#output').append(`<div>${data[keys].NAME}</div>`);

來源

2017-05-31 21:57:16

基本上，你output元素應該是包含重複每個產品的其他元素的包裝。一種語義選項是使用列表，如ul + li。

您應該迭代您的產品並將其HTML片段追加到數組中。處理完它們後，您將該塊HTML分配給output元素。

// Just to keep your code untouched: 
 

 
const $ = { 
 
    getJSON(url, callback) { 
 
    callback([{ 
 
     ID: 1, 
 
     NAME: 'Product 1', 
 
     PRICE: '2.50', 
 
    }, { 
 
     ID: 2, 
 
     NAME: 'Product 2', 
 
     PRICE: '1.25', 
 
    }, { 
 
     ID: 3, 
 
     NAME: 'Product 3', 
 
     PRICE: '10.00', 
 
    }]); 
 
    }, 
 
}; 
 

 
const output = document.getElementById('output'); 
 

 
let productsArray = []; 
 

 
$.getJSON('/products', function(products){ 
 
    productsArray = products; 
 

 
    output.innerHTML = products.map(product => { 
 
    return `<li data-id="${ product.ID }"> 
 
     <span>${ product.NAME }</span> 
 
     <span>${ product.PRICE }</span> 
 
    </li>`; 
 
    }).join(''); 
 
});

<ul id="output"></ul>

來源

2017-05-31 22:05:34 Danziger

從JavaScript中呈現HTML中數組中的每個對象

回答

相關問題