API 显示 ES6 使用模板字符串答案

【问题标题】：API Display ES6 Using Template StringsAPI 显示 ES6 使用模板字符串
【发布时间】：2018-01-07 18:47:55
【问题描述】：

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 的数据，我需要将这些数据输出到浏览器。请检查我的代码有什么问题。另请查看图片以供参考。

【问题讨论】：

announcements 不是一个数组，但像往常一样，你的问题很难说出发生了什么。
@Pointy。它说announcement.map 不是一个函数
@Pointy。也许你可以帮助我如何修复模板字符串中的 Li 元素
对，表示announcements的值不是原型链中有.map()函数的对象。
@Pointy。也许我不需要编写 .map 函数。有没有其他方法可以在模板字符串中编写 Li 元素。我只需要使用 dom 中的模板字符串将这些作为 Li 元素输出。

标签： javascript dom ecmascript-6 es6-promise fetch-api

【解决方案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);
})

}

【讨论】：