如何在try/catch短语中循环，并在浏览器上成功地用Javascript呈现？

我在“try catch phrase”中发出get请求，数据是一个对象数组。我想在数组中循环，并访问每个对象的“message”属性。然后我尝试将它的值（一个字符串）作为'li'附加到body的'ul'标记上

问题是在循环内部将li附加到ul根本不起作用。没有附加任何内容

我尝试在循环之外编写逻辑，但它确实成功地附加了（注释部分）

我也没有在循环中看到任何console.log

代码如下：

let cache = {};
async function getMsg() {
try { 
    let res = await fetch('/api/getMsg');
    console.log('res', res)
    let data = await res.json();
    console.log('got data', data);

    const ul = document.getElementById('message-list');
    ul.innerHTML = 'List of messages';

    // data is an array whose elements are message objects
    data.forEach((obj)=> {
        // if (!cache[obj._id]) {
            const list = document.createElement('li');
            const button = document.createElement('button');

            list.innerText = obj.message;
            console.log(list)
            button.innerText = 'Delete';
            button.setAttribute('class', 'del');

            // button.addEventListener('click', () => {
            //     fetch(`/api/${obj._id}`)
            //         .then(res => res.json())
            //         .then(data => {
            //             window.alert(`Message with id of ${data} has been deleted!`);
            //         })
            // });
            
            ul.appendChild(list)
            ul.appendChild(button);
            cache.obj._id = obj.message;
       // }
    });
} catch {
    (err => console.log(err));
}

} addEventListener（“加载”，getMsg）

---

我怎样才能成功？我还尝试使用for循环，而不是forEach方法！我正在成功地从服务器接收所有数据。

Try/catch与您的问题无关。您多次尝试附加同一节点，但无法完成。 您可以在每个循环迭代中创建（

document.createElement（'whatever'）

），也可以克隆它，如下所示：

let p=document.getElementById（“para1”）；设p_prime=p.cloneNode（true）

创建新节点：

let cache={}；
异步函数getMsg（）{
试试{
let res=wait fetch（'/api/getMsg'）；
console.log（'res'，res）
让data=wait res.json（）；
console.log（'gotdata'，data）；
常量列表=document.createElement（'li'）
const button=document.createElement（'button'）；
const ul=document.getElementById（'message-list'）；
//ul.附件（列表）
//ul.附件（按钮）；
//数据是一个数组，其元素是消息对象
data.forEach（（obj）=>{
如果（！缓存[obj.\u id]）{
const list=document.createElement（'li'）//新建！
const button=document.createElement（'button'）；//新建！
list.innerText（对象消息）；
console.log（列表）
按钮。innerText（'Delete'）；
setAttribute（'class'，'del'）；
按钮。addEventListener（'单击'，（）=>{
获取（`/api/${obj.\u id}`）
.then（res=>res.json（））
。然后（数据=>{
警报（`id为${data}的消息已被删除！`）；
})
});
ul.附件（列表）
ul.附件（按钮）；
cache.obj.\u id=obj.message；
}
});
}抓住{
（err=>console.log（err））；
}

克隆节点：

let cache={}；
异步函数getMsg（）{
试试{
let res=wait fetch（'/api/getMsg'）；
console.log（'res'，res）
让data=wait res.json（）；
console.log（'gotdata'，data）；
常量列表=document.createElement（'li'）
const button=document.createElement（'button'）；
const ul=document.getElementById（'message-list'）；
//ul.附件（列表）
//ul.附件（按钮）；
//数据是一个数组，其元素是消息对象
data.forEach（（obj）=>{
如果（！缓存[obj.\u id]）{
const newList=list.cloneNode（true）；//新建！
const newButton=button.cloneNode（true）；//新建！
newList.innerText（obj.message）；//新建
console.log（newList）//新建
newButton.innerText（'Delete'）；//新建
setAttribute（'class'，'del'）；//新建
addEventListener（'单击'，（）=>{//NEW
获取（`/api/${obj.\u id}`）
.then（res=>res.json（））
。然后（数据=>{
警报（`id为${data}的消息已被删除！`）；
})
});
ul.appendChild（newList）//新建
ul.appendChild（纽扣）；//新
cache.obj.\u id=obj.message；
}
});
}抓住{
（err=>console.log（err））；
}

Hey@IvanD非常感谢。但是，它仍然不会在浏览器中呈现任何li标记。你知道为什么吗？这是我在控制台中得到的，但我认为与此问题无关：“DevTools未能加载SourceMap:无法加载chrome的内容。”-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error:status code 404，net:：ERR_UNKNOWN_URL_SCHEME'此错误99%与代码无关，也就是说，这不是代码失败的原因我目前没有完整的代码来帮助您。您可以修改您的问题以获得可运行的示例吗？不客气！如果有帮助，请将答案标记为已接受：）哇，它适用于。..循环，但不是forEach。谢谢