Question

function createNode(element) {
      return document.createElement(element);
}

function append(parent, el) {
    return parent.appendChild(el);
}

function submitInfo(){
    const ul = document.getElementById("display");
    fetch('http://sample_website.com/api/announcements', {
        method: 'GET',
        headers: {'Content-Type': 'application/json',
        Authorization : 'Bearer 8huihjgogugggi'},      
    })
    .then(data => data.json())
    .then(data =>  { 
        let announcements = data;
        console.log(announcements);
        return announcements.map(function(announcement) {
            let li = createNode('li'),
                span = createNode('span');
            span.innerHTML = `${announcement.data.data[0].title}`;
            append(li, span);
            append(ul, li);

        })
    })
    .catch((err) => {
        console.error(err);
    })
}

<body>
<h1>Announcement</h1>
<div id="display"></div>
 <input type="button" value="Get Data!" onclick="submitInfo();">
 </body>

我在使用模板字符串创建列表元素时遇到问题。使用API中的数据，我需要将这些数据输出到浏览器。请检查我的代码是什么问题。检查图像以供参考。

Answer 1

函数submitInfo（）{

fetch('http://example_website.com/api/announcements', {
    method: 'GET',
    headers: {'Content-Type': 'application/json',
    Authorization : 'Bearer eeeewiqhhroiqworqiorqwihr'},      
})
.then(data => data.json())
.then(data => { console.log(data)

        const output = document.getElementById("display");
        output.innerHTML = `<ul>
                        <li>${data.data.data[0].title}</li>
                        <li>${data.data.data[0].body}</li> 
                        </ul>`;

})
.catch((err) => {
    console.error(err);
})

}

API显示ES6使用模板字符串

1 个答案: