javascript - 具有不同 json 变量的循环显示所有项目而不是每个项目一个

Question

所以根据我之前回答的问题(Click Here)

我用我发送到 js 变量的 php 数据创建了第二个 json 变量，所以我已经有一个显示最后显示用户阅读帖子的地方，如下所示:

 [ //defined by var = book | remove url for privacy reason.
    {
        "id": 39,
        "title": "My Pet",
        "url": "https:///novel/my-pet/",
        "chapter": {
            "id": 1192,
            "title": "35",
            "url": "https:///my-pet-35/"
        }
    },
    {
        "id": 37,
        "title": "Nobunaga’s Imouto",
        "url": "https:///novel/nobunagas-imouto/",
        "chapter": {
            "id": 1449,
            "title": "2",
            "url": "https:///nobunaga-imouto-2/"
        }
    },
    {
        "id": 2,
        "title": "Duke's Daughter",
        "url": "https:///novel/dukes-daughter/",
        "chapter": {
            "id": 1398,
            "title": "99",
            "url": "https:///dukes-daughter-99/"
        }
    }
]

第一个 json 从 cookie 中获取数据，因此用户可以跟踪他们的最后一次阅读。至于我的第二个 json 变量显示类别中的最新帖子

[ //defined by var = newest
    {
        "id": 39,
        "title": "My Pet Chapter 35",
        "url": "https:///my-pet-35/",
    },
    {
        "id": 37,
        "title": "Nobunaga’s Imouto Chaoter 4",
        "url": "https:///nobunaga-imouto-4/",
    },
    {
        "id": 2,
        "title": "Duke's Daughter Chapter 106",
        "url": "https:///dukes-daughter-106/",
    }
]

然后我用 for 循环显示它们:

    $bookcontainer = $('#release_history'); 
    for (var i in books) {
        var book = books[i];
        var html = '<div class="row"><div class="book_history">';
        html += '<a href="'+book.url+'">'+book.title+'</a></div>';

         // Display last user read from json

        html += '<div class="newest_history">';
        for (var j in newest) { // display the newest of a post from category
            var news = newest[j];
            html += '<a href="'+news.url+'">»Chapter '+news.title+'</a></div>';
        }
        html += '</div></div></div>';
        $bookcontainer.append(html);
    }

但它会显示如下:

所以我想加上if条件，如果两个id相等。

            for (var j in newest) {
            var news = newest[j];
            if (news.id == book.id){
                html += '<a href="'+news.url+'">»Chapter '+news.title+'</a></div>';}
            }

但是，循环在显示第一个输出后停止。有什么解决办法吗？在显示时将它们全部分开？我想显示类别的最新章节/帖子，以便用户可以知道他们上次阅读的书有新章节。

Answer 1

您正在检查这两个对象的 index id 是否相同，就像 index:0 和 id 处的 id 一样 在 index:3 是相同的，那么它也不会显示它，因为你没有检查它是否包含:

试试这个:

var book = [ //defined by var = book
    {
        "id": 39, //Category ID
        "title": "Last Read A",
        "url": "Chapter URL A",
    },
    {
        "id": 37, //Category ID
        "title": "Last Read B",
        "url": " Chapter URL C",
    },
    {
        "id": 2, //Category ID
        "title": "Last Read C",
        "url": " Chapter URL C",
    }
]

var book1 = [ //defined by var = newest
    {
        "id": 39, //Category ID
        "title": "Newest Chapter A",
        "url": "Post URL Chapter A",
    },
    {
        "id": 37, //Category ID
        "title": "Newest Chapter B",
        "url": " Post URL Chapter C",
    },
    {
        "id": 2, //Category ID
        "title": "Newest Chapter C",
        "url": " Post URL Chapter C",
    },
    
 //Added a different book with id 10
    {
        "id": 10, //Category ID
        "title": "Newest Chapter C",
        "url": " Post URL Chapter C",
    }
]

const bookIds = book1.map(bookData => bookData.id);

console.log('BookIDS:', bookIds)


book.forEach(bookData => {
  if(bookIds.indexOf(bookData.id) > -1){
    console.log('Matching book found with ID:', bookData.id);
  }
})