Question

我似乎无法将某些对象提取到表中并输出结果。我想捕获一些jQuery对象的结果。

我需要获取Title，Description和Link对象的结果，并将它们扔到for循环中，并使用表结构显示它们。我似乎根本无法弄清楚。

我已经成功地从标题，描述和链接中提取了数据，所以现在我只需要弄清楚如何使用HTML显示数据。

我们将不胜感激。

这是我的目标输出：

这是我的roadmap.js文件中的代码：

$(document).ready(function(){
    $pnp.setup({
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    });

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z){
        console.log(z);
        var result = z.results.map(a => ({
            Title: `${a.Title}`,
            Description: `${a.Description}`,
            Link: `${a.Link}`
            })
        );
        console.log(result);
        roadMapDisplay(result);
    })

    function roadMapDisplay(result) {
        var head = result.Title;
        var desc = result.Description; 
        var link = result.Link;

        var table = $('<table/>');
            for(var i = 0; i < 2; i++) {
                table.append('<tr/>').append('<td>' + head + '</td>');
                table.append('<tr/>').append('<td>' + desc + '</td>');
                table.append('<tr/>').append('<td>' + link + '</td>');
        }
        $('.Title').append(table);
    } 
});

这是我在roadmap.txt中调用html的方式

<div class="Title"></div>

<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>

Answer 1

用这个替换您的roadMapDisplay函数：

function roadMapDisplay(result) {
    $('.Title').append('<table>' + 
        result.reduce(
            (a, e) => a + 
                `<tr><td><h1>${e.Title}</h1></td>
                <td>${e.Description}</td>
                <td>${e.Link}</td></tr>`, 
            ''
        ) + '</table>'
    )
}

Answer 2

我已经接近了一步，我能够使用下面提供的代码获得输出：

有人知道为什么我可能会变得不确定吗？我没有收到任何console.log错误。

$(document).ready(function(){
    $pnp.setup({
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    });

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(items) {
        console.log(items);
        var result = items.map(item => {
            return {
                Title: item.Title,
                Description: item.Description,
                Link: item.Link
            }
        });
        var $table = roadMapDisplay(result);
        console.log($table);
        document.getElementById('title').innerHTML = $table.innerHTML;
    });

    function roadMapDisplay(items) {

        var table = $('<table/>');

        items.forEach(item => {
            table.append('<tr/>');
            table.append(`<td>${item.Title}</td>`);
            table.append(`<td>${item.Description}</td>`);
            table.append(`<td>${item.Link}</td>`);
        });

        return table;
        
    } 
});

<div id="title"></div>

<script src="/TrainingResourceCenter/O365Training/SiteAssets/roadmap.js?v=1"></script>

显示JQuery对象的输出

2 个答案: