Question

我想在两组中映射我的数据和排序链接：收藏和非收藏。对于每个项目，我也需要密钥和名称。

这是html结构：

<ul class="links-favourites"></ul>
<ul class="non-favourite-list">
    <li>Rest of your Links
        <ul class="non-favourite-inner"></ul>
    </li>
</ul>

3个链接的数据结构 - 2个收藏夹和1个非收藏夹：

[{
    "name": "favourite 1",
    "key": "WBwLrM7KkF2qbgRn847yLjJD0e0",
    "favourite": true
}, {
    "name": "favourite2",
    "key": "btB3pFs22S_cBvkCCiMTGWQRVUs",
    "favourite": true
}, {
    "name": "not favourite1",
    "key": "jTOdit6iEBZg8OYK9tOqdoeWYRo",
    "favourite": false
}]

这是由错误的JS：

$.post("http://0.0.0.0:9292/api/stremes", function (data) {
    var names = data.map(function (i) {
        return i['streme'].name
    });
    var keys = data.map(function (i) {
        return i['streme']['key']
    });
    var favourites = data.map(function (i) {
        return i['streme']['favourite']
    });



    var containerFavourite = document.querySelector(".streme-favorites");
    var containerNoFavourite = document.querySelector(".non-favourite-inner");
    names.forEach(function (name) {
        var li = document.createElement('li');
        li.innerHTML = name;
        $(li).addClass("name");
        $(li).each(function (index) {
            $(this).data("favourite", favourites[index]);
            console.log(favourites[index]); // giving undefined
        });
        if ($(li).data("favourite", favourite[index]) == true) {
            $(this).addClass("favourite");
            containerFavourite.appendChild($(this));
        } else {
            $(this).addClass("no-favourite");
            containerNoFavourite.appendChild($(this));
        }
    });

    $(".name").each(function (index) {
        $(this).data("key", keys[index]);
    });

Answer 1

为什么不迭代data？即data.forEach(function(e){...})您可以在块内获取更多信息，并且map不是必需的。

完整的代码如下：

data.forEach(function(e){
var name = e['streme']['name'];
var favourite = e['streme']['favourite'];
if(favourite){
//...
}else{
//...
}
})

Answer 2

这是一个更清洁的解决方案

    var $lists={ 'fav': $('.links-favourites'), 'noFav' :  $('.non-favourite-inner') };  

    $.each(data, function( idx, item){
        var isFav= item.favourite;
        var list= isFav ? 'fav' : 'noFav';
        $lists[list].append( createLI( item, isFav) );

    });


function createLI( obj, isFav){
    var favClass= isFav  ?'favourite' : 'no-favourite';
     var elemData={'favourite': obj, 'key': obj.key};
     return $('<li>',{ class: favClass}).data( elemData ).text( obj.name);
}

您的一些代码有点令人困惑，因为数据与stremes不匹配，并且脚本中的类与html中的类略有不同。但这应该会给你一个很好的起点。还不确定如何在标记中使用key，或者应该使用哪些链接

的 DEMO

映射JSON数据并对2个div进行排序

2 个答案: