使用来自 api 的数据创建填充复杂对象的最佳方法是什么？

Question

I am trying to build a simple todo app. I have a server running on flask that returns a page when main route is accessed and has different endpoints like add_task, delete_task etc. and I access these endpoint via fetch() function and return an updated list of task from them in JSON.

My question is - What is the best way to create and populate a task list structure with following example markdown (below) with received info?

Markdown example:

<div class="task-list-container">
    <div class="task-container">
        <div class="task-header">
            <span>completion progress...</span>
            <span>created at ...</span>
            <span>due date...</span>
        </div>
        <div class="task-description">
            description...
        </div>
        <div class='task-comments'>task comments...</div>
        <div class='task-tags'>tags...</div>
    </div>
    ...another task
</div>

Returned JSON structure:

[
    {
        "task-id": int,
        "completion": bool,
        "created": date,
        "due date": date,
        "description": str,
        "comments": [str],
        "tags": [str]
    },
    {another task}
]

I could easily do it with React by creating component for it and simply populate a list of them by mapping through returned data but is there a way to do it neatly with vanilla JS?

Answer 1

You can loop through the tasks and for each task create the elements to the DOM, Something like the below:

Object.keys(data).forEach((item, i) => {     
       let taskItem = document.createElement('div');
       let taskItemHeader = document.createElement('div');
       let taskItemDescription = document.createElement('div');
        ....
       taskItemDescription.innerHTML = item.description;
       taskItemHeader.appendChild(taskItemDescription);
       taskItem.appendChild(taskItemHeader);
       ....
     });

Answer 2

There are several ways to do it. One is to use a template literal to inject the variable task fields. For the asynchronous part (reading from the API), you would use async and await .

Here is how it could work for a dummy JSON provider:

 function renderTask(task) { return `<div class="task-container"> <div class="task-header"> <div>Task id: ${task.id}</div> <div>Task is ${task.completed? "completed": "in progress"}</div> </div> <div class="task-description"> ${task.title} </div> </div>`; } async function refresh() { let response = await fetch("https://jsonplaceholder.typicode.com/todos/"); let arr = await response.json(); let html = arr.map(renderTask).join("\n"); document.querySelector(".task-list-container").innerHTML = html; } refresh();

 .task-container { border: 1px solid; margin-top: 5px }.task-header { font-weight: bold }

 <div class="task-list-container"> </div>