0

我想在 2 组中映射我的数据和排序链接：最喜欢的和不喜欢的。对于每个项目，我还需要密钥和名称。

这是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]);
    });
4

2 回答 2

1

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

完整的代码如下：

data.forEach(function(e){
var name = e['streme']['name'];
var favourite = e['streme']['favourite'];
if(favourite){
//...
}else{
//...
}
})
于 2013-10-28T02:23:02.337 回答
1

这是一个看起来更干净的解决方案

    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

于 2013-10-28T02:27:10.870 回答