英文:
Fetching data from API using Javascript and then pushing the value to a DIV
问题
我正在尝试从一个免费API获取数据：API链接
然后，我想将完整的响应推送到我的页面上的一个div中。
我可以在控制台上记录它，但我的解决方案不起作用。
这是我尝试过的代码。
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then((response) => response.json())
.then((json) => console.log(json));
i = json;
console.log(i);
document.getElementById('matcher').innerHTML = i.toString();
}
英文:
I am trying to get data from a free APi : API URL
I then want to push the full response into a div on my page.
I can consolelog it fine, my solution is not working.
This is what i have tried.
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then((response) => response.json())
.then((json) => console.log(json));
i = json;
console.log(i);
document.getElementById('matcher').innerHTML = i.toString();
}
答案1
得分: 0
尝试使用 map 渲染数组。尝试：
json?.map((item, index) => document.getElementById('matcher').innerHTML = item?.title;
或者，如果您想在过程中输出一个值，那么可以使用：
document.getElementById('matcher').innerHTML = json[0].body;
此外，您可以使用 innerText 而不是 innerHTML 渲染某个属性的值。
英文:
As it is an array, try to render it using map.
Try:
json?.map((item, index) => document.getElementById('matcher').innerHTML = item?.title;
or, if you want an output in your procedure for a while, then
document.getElementById('matcher').innerHTML = json[0].body;
Moreover, you can use innerText instead of innerHTML render a value of some property.
答案2
得分: 0
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments').then(function (response) {
// API调用成功！
return response.json();
}).then(function (data) {
// 这是来自响应的JSON
console.log(data);
document.getElementById('matcher').innerHTML = data[0].body;
}).catch(function (err) {
// 发生错误
console.warn('出了点问题。', err);
});
}
OR you can use JSON.stringify
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments').then(function (response) {
// API调用成功！
return response.json();
}).then(function (data) {
// 这是来自响应的JSON
console.log(data);
data = JSON.stringify(data);
document.getElementById('matcher').innerHTML = data;
}).catch(function (err) {
// 发生错误
console.warn('出了点问题。', err);
});
}
英文:
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments').then(function (response) {
// The API call was successful!
return response.json();
}).then(function (data) {
// This is the JSON from our response
console.log(data);
document.getElementById('matcher').innerHTML = data[0].body;
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
OR you can use JSON.stringify
async function fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments').then(function (response) {
// The API call was successful!
return response.json();
}).then(function (data) {
// This is the JSON from our response
console.log(data);
data = JSON.stringify(data);
document.getElementById('matcher').innerHTML = data;
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论