循环遍历从 API 获取的所有（json）元素

Question

这个问题在这里已经有了答案：

承诺，将附加参数传递给然后链6 个答案

如何访问和处理嵌套对象 arrays 或 JSON？ (31 个回答)

17 分钟前关闭。

I am a new with JavaScript, and am trying to write an HTML + JavaScript page that loops over and prints all the 'title' entries from this public API as new

HTML 页面上的元素。

我正在关注如何执行此操作的在线教程，但不知何故我无法让它工作并且一直在尝试调试它一段时间。

这是 JavaScript 文件； 看起来我试图从 API 检索的数据不是 json 格式？ 当我尝试询问console.log（api_result.title）时出现错误。 我感到困惑的另一件事是为什么 for 循环不想循环结果

async function listApiData(url='https://jsonplaceholder.typicode.com/posts'){
    //fetch returns a promise (that is later resolved with a response object)
    //the response object includes the full HTTP response (not just the json we ask from the api)
    return fetch(url)
        .then((response) => response.json()) 
        .catch(error => console.error(error)) 
}

function writeElement(post){
    //for each new entry in the API, this function adds the title in a new <p> element to the <div> object on the HTML page. 
    anchorElement.innerText = post.title;
    const postTitleElement = document.createElement('p');
    postTitleElement.appendChild(anchorElement);

    return postTitleElement;
}

function writeList(postContainerElementId){
    // takes an ElementId and adds all of the entries it retrieves from the API to it
    const postContainerElement = document.getElementById(postContainerElementId);

    const api_results = listApiData() //async function (returns a promise untill resolved)  
        .then(api_result => console.log(api_result.title))
        .then((apidata) => {
            for (post of apidata.userId){
                console.log('trying to print api results')
                //postContainerElement.appendChild(writeElement(post))
            }
        })
    }

这是 HTML 页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>INDEX</title>
    </head>
    <body>
        <h2>Title:</h2>
        <div id="script_list">
            <h4>List retrieved from API:</h4>
            <div id="script_list_container"></div>
        </div>
        <script src="api_public.js"></script>
        <script>
            writeList("script_list_container")
        </script>

    </body>
</html>