时间戳

首页 > 解决方案 > 将长 JSON 文件转换为单个对象

javascript - 将长 JSON 文件转换为单个对象

问题描述

我正在使用 Javascript 中的 JSON 文件，我想将其转换为单个对象，下一步是将它们放在 HTML 文件中的不同卡片中。

API JSON 文件：http: //jsonplaceholder.typicode.com/todos

我已经获取了 API：

fetch("https://jsonplaceholder.typicode.com/todos")
    .then(function (response) {
        return response.json();
    })
    .then(function (json) {
    consoleLogJson(json);
    })
    .catch(function (error) {
        console.log(error);
    });

然后我遍历了 JSON 的结果：

function consoleLogJson(json) {

const resultsContainer = document.querySelector(".results");
const results = json;

    for (let i = 0; i < results.length; i++) {
        console.log("<div>Title: " + results[i].title + "</div>" + "<div>UserId: " + results[i].userId + "</div>" + "<div>Id: " + results[i].id + "</div>" + "<div>Completed: " + results[i].completed + "</div>");
    }
}

这是我的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript - MA04 - Question 2</title>
<body>

<!-- Create a list of TODO cards using the API -->
<div class="results">


</div>

<script src="script.js"></script>
</body>
</html>

我不确定我的下一步应该是什么。

标签： javascriptjsonapi

解决方案

您几乎就在那里，只需将您的更改console.log为将 HTML 附加到结果容器即可。我还建议将 html 包装在 div （您的待办事项卡）中。所以改变这部分：

for (let i = 0; i < results.length; i++) {
    console.log("<div>Title: " + results[i].title + "</div>" + "<div>UserId: " + results[i].userId + "</div>" + "<div>Id: " + results[i].id + "</div>" + "<div>Completed: " + results[i].completed + "</div>");
}

对此：

for (let i = 0; i < results.length; i++) {
    resultsContainer.innerHTML += ("<div class='todo-card'><div>Title: " + results[i].title + "</div>" + "<div>UserId: " + results[i].userId + "</div>" + "<div>Id: " + results[i].id + "</div>" + "<div>Completed: " + results[i].completed + "</div></div>");
}

推荐阅读