首页 > 解决方案 > 如何将 api 调用中的元素列表附加到无序列表?

问题描述

我正在尝试从请求中创建元素列表并将这些元素附加到现有的无序列表中。这是检索 json 并做一个小过滤器的调用

let authorizedSystems;

let isPortal;

const portalUrls = [
    "http://portal-dev.com",
    "https://portal-alpha.com",
    "https://portal-beta.com",
    "https://portal-sandbox.com",
    "https://portal.com"
]

  const fetchAuthSystems = axios.get('/user-profile/api/user/authorized-systems')
    .then(function(res) {  
        let portals = res.data.authorizedSystems;
        return portals;       
    })
    .catch(function(e) {
    })

const fetchAuthResults = function() { 
    fetchAuthSystems.then(function(portals) {
        authorizedSystems = portals;

        const filteredPortals = authorizedSystems.filter(function(system) {
            return system.label !== isPortal;
        })
        return filteredPortals;
    })
    .then(function(systems) {
        const newList = systems.map(function(system) {
            return "<a href=" + url + " target='_blank' class='portalLink'><li class='openSiteLinkAnchor'></li>" + system.label + "</a>";
        })
        return newList;
    })
}



fetchAuthResults();

我上面所做的就是从 api 调用中获取数据,进行过滤并创建一个列表。这是我的html:

const html = "<div id='portalLinkContainer'>" +
        "<ul class='openSite'><i class='fa fa-chevron-down openSiteIcon'></i> Open related site" +

    "</ul>" +
"</div>"

理想情况下,我想做的是使用新列表并将其设置为授权系统的值,然后能够稍后将其附加到我拥有的 html 中的 ul 中。

标签: javascripthtmlarrayshttpes6-promise

解决方案


推荐阅读