时间戳

首页 > 解决方案 > 有没有其他优雅的方式从 JSON 中获取数据并将其呈现给 DOM？

javascript - 有没有其他优雅的方式从 JSON 中获取数据并将其呈现给 DOM？

问题描述

有一个名为 contents.json 的简单 JSON 文件，我使用纯 JavaScript 代码在本地主机中获取这些数据，所以我的问题是有没有更好的方法来获取这种数据。

JavaScript

function fetchData(){
    fetch('http://localhost:5500/proje/contents.json').then(response => {
        return response.json();
    }).then(data => {
        console.log(data.Contents);
        const html = data.Contents
            .map(movie => {
                return `
                
                <div class="column">
                <img id="${movie.Title}"  src="${movie.Poster}" class="item img-2">
                <b class="text">${movie.Title}</b>
                </div>
                
                `
                
            }).join('');
        
        document.querySelector('#app').insertAdjacentHTML('afterbegin',html); 
        
    }).catch(error => {
        console.log(error);
    });

}

HTML

<div id="app"></div>

图片

图片

标签： javascripthtml

解决方案

如果您在谈论有异步等待的方法，它将看起来像这样

async function fetchingData(){
let data= await fetch('http://localhost:5500/proje/contents.json').json(),
html = data.Contents.map(movie => {
            return `
            
            <div class="column">
            <img id="${movie.Title}"  src="${movie.Poster}" class="item img-2">
            <b class="text">${movie.Title}</b>
            </div>
            
            `
            
        }).join('');)
document.querySelector('#app').insertAdjacentHTML('afterbegin',html); 
}

async 告诉 js 引擎它将返回一个 Promise，但是如果将它与 await 结合使用，await 会使 JavaScript 等待，直到该 Promise 完成并返回其结果。函数执行将在 await 行暂停，直到 promise 解决，就这么简单。

推荐阅读