如何将 JSON 数据解析为新创建的<div>元素？

Question

我是javascript新手，目前正在尝试构建一个股票网页。现在我正在尝试解析JSON信息并使用它，这样当我通过JS添加新元素时，该元素将填充我请求的API中的某些信息。

我认为这一定是由于我的函数布局方式，我目前可以将JSON数据记录到控制台，但我无法将JSON数据获取到新元素中。

async function getStockData() {
const response = await fetch(api_url);
const data = await response.json();
console.log(data);
}
function addStockWidget() {
data = getStockData();
var boxEle = document.createElement('div');
var container = document.querySelector('.stockcontent');
boxEle.style.width = '70%';
boxEle.style.height = '50px';
boxEle.style.border = '1px solid black';
boxEle.style.margin = '15px 0px 0px 15px';
boxEle.textContent = data;
container.appendChild(boxEle);
}

在代码的第二部分中，变量是我刚刚弄乱的东西，我不知道这是否是正确的方法。与boxEle对象上的.textContent相同。

Answer 1

• 您可以使用使用API数据的助手函数
• 例如，这里我使用了jasonplaceholderAPI，用于伪造数据
• 我们正在获取数据并将其提供给助手函数addStockWidget(data)

async function getStockData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/');
const data = await response.json();
data.forEach(val => {
// ptoviding received api data to function and accessing it inside that function.
addStockWidget(val);
})
}
function addStockWidget(data) {
//using data in function
console.log(data.title);
}
// calling function to load api data
getStockData();