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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何以功能方式使用JSON填充HTML相关的知识,希望对你有一定的参考价值。

我试图理解函数式编程的方法。根据我的理解,它基本上是将所有内容封装到一个函数中并传递它们。现在,对于我的示例,我尝试从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元素使用简单的变量......

以上是关于如何以功能方式使用JSON填充HTML的主要内容,如果未能解决你的问题,请参考以下文章

如何创建片段以重复变量编号中的代码行

如何以编程方式填充 switch case 值?

BootStrap有用代码片段(持续总结)

将 JSON 字符串从片段传递到适配器的问题

如何使用大型 json 数据填充 RecyclerView [重复]

WebAPI 如何以 JSON 格式填充空结果