如何以功能方式使用JSON填充HTML

Posted 2021-03-29

我试图理解函数式编程的方法。根据我的理解，它基本上是将所有内容封装到一个函数中并传递它们。现在，对于我的示例，我尝试从RESTApi加载数据并将其呈现到DOM中：

const storyElement = function (): htmlElement {
    const div = document.createElement('div');
    div.className = 'stories';
    return div;
};

const spinnerElement = function (): HTMLElement {
    const div = document.createElement('div');
    div.className = 'spinner';
    div.innerHTML = `<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
                        <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
                    </svg>`;
    return div;
};

我有两个div，一个用于故事，一个用于加载图标。如果呈现内容，则图标应消失。

function getAllStories(callback): void {
    makeRequest(baseUrl(), (res) => spawn(res, callback));
}

function spawn(content, callback): void {
    content = JSON.parse(content);

    if (content instanceof Array === false) {
        content = [content];
    }

    content.forEach(elm =>
        storyElement().innerHTML += `<h1>${elm.title}</h1>
                                     <div class="story-info">
                                        <i>ID: Post-${elm.id}</i>
                                     </div>
                                     <p>${elm.body}.</p>`
    );
    console.log(content);
    callback();
}

function displayFinished(): void {
    spinnerElement().style.display = 'none';
    document.body.innerHTML += '<div>All done!</div>';
}

现在当我执行getAllStories时，控制台打印出结果，但内容不会在DOM中呈现：

document.body.appendChild(storyElement());
document.body.appendChild(spinnerElement());

getAllStories(displayFinished);

有没有人知道为什么？

答案

每次你在storyElement()中调用.forEach时，都会创建新元素。您从未更改过附加到DOM的原始元素。

另一答案

感谢@dnt我解决了我的问题。解决方案是创建一个元素并嵌套此功能：从RESTAPI获取数据=>将其生成到DOM =>完成显示加载图标。

function createElm(className: string, innerHTML?: string): Node {
    const div = document.createElement('div');
    div.className = className;
    if (innerHTML) {
        div.innerHTML = innerHTML;
    }
    document.body.appendChild(div);
    return div;
}

function getAllStories(callback): void {
    makeRequest(baseUrl(), callback);
}

function spawn(content, html, callback): void {
    content = JSON.parse(content);

    if (content instanceof Array === false) {
        content = [content];
    }

    content.forEach(elm =>
        html.innerHTML += `<h1>${elm.title}</h1>
                                     <div class="story-info">
                                        <i>ID: Post-${elm.id}</i>
                                     </div>
                                     <p>${elm.body}.</p>`
    );

    callback();
}

function displayFinished(html): void {
    html.style.display = 'none';
    document.body.innerHTML += '<div>All done!</div>';
}

const stories = createElm('stories');
const loadingIcon = createElm('spinner', `<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
                        <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
                    </svg>`);

getAllStories(res =>
    spawn(res, stories, () =>
        displayFinished(loadingIcon)));

我现在只是问自己，我的方法是否有更好的解决方案。这对我来说似乎不对，不是为dom元素使用简单的变量......