Displaying all items within a JSON variable using a for loop instead of just one item at a

Question

Displaying all items within a JSON variable using a for loop instead of just one item at a

Referring to my previously answered question (View Here)

I've created a new JSON variable in PHP and passed it to a JavaScript variable. I have implemented a feature that displays the last read post by the user like this:

 [ //defined by var = book | removed URL for privacy reasons.
    {
        "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/"
        }
    }
]

The first JSON retrieves data from cookies, enabling users to track their last read post. The second JSON variable displays the newest posts from each category.

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

To display them, I use a for loop:

    $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>';

         // Displaying the latest news

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

However, the output appears messed up: https://i.sstatic.net/nBeU1.png

This led me to think about adding an if conditional statement when the IDs match.

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

Unfortunately, the loop terminates after displaying the initial result. Is there a solution to ensure they are all displayed separately? I aim to show the latest chapters/posts from various categories so users can stay updated on their last read book.

javascript json

Answer 1

Answer №1

To verify if the index id of both objects match, for instance at index:0 and index:3, they must be identical because verification of containment is not being performed:

Consider this solution:

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);
  }
})

Answer 2

To verify if the index id of both objects match, for instance at index:0 and index:3, they must be identical because verification of containment is not being performed:

Consider this solution:

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);
  }
})

Answer 3

Answer №2

Are you specifically interested in identifying which books have not been read by the current user?

const books = [ //stored as variable 'books'
    {
        "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",
    }
];

const newest = [ //stored as variable '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": "Last Read C",
        "url": " Chapter URL C",
    },

    //Added a different book with id 10
    {
        "id": 10, //Category ID
        "title": "Newest Chapter C",
        "url": " Post URL Chapter C",
    }
];

newBooks = newest.filter(function (element) {
    return books.filter(function (book) {
        if (element.id !== book.id) {
            return false;
        }

        if (element.title !== book.title) {
            return false;
        }

        return element.url === book.url;
    }).length === 0;
});

console.log(newBooks);

The filter function is used to identify entries that meet certain conditions.

In this scenario, I am checking for instances where the filtered book array has a length of zero.

If the length is zero, it means that the user has not read the new chapters.

Hence, the filtered book array provides entries that do not match those in the "newest" array.

Output of the sample:

[ { id: 39, title: 'Newest Chapter A', url: 'Post URL Chapter A' },
{ id: 37, title: 'Newest Chapter B', url: ' Post URL Chapter C' },
{ id: 10, title: 'Newest Chapter C', url: ' Post URL Chapter C' } ]

From the output, we can observe that the entry with id "2" was filtered out since it matched existing data.

Answer 4

Are you specifically interested in identifying which books have not been read by the current user?

const books = [ //stored as variable 'books'
    {
        "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",
    }
];

const newest = [ //stored as variable '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": "Last Read C",
        "url": " Chapter URL C",
    },

    //Added a different book with id 10
    {
        "id": 10, //Category ID
        "title": "Newest Chapter C",
        "url": " Post URL Chapter C",
    }
];

newBooks = newest.filter(function (element) {
    return books.filter(function (book) {
        if (element.id !== book.id) {
            return false;
        }

        if (element.title !== book.title) {
            return false;
        }

        return element.url === book.url;
    }).length === 0;
});

console.log(newBooks);

The filter function is used to identify entries that meet certain conditions.

In this scenario, I am checking for instances where the filtered book array has a length of zero.

If the length is zero, it means that the user has not read the new chapters.

Hence, the filtered book array provides entries that do not match those in the "newest" array.

Output of the sample:

[ { id: 39, title: 'Newest Chapter A', url: 'Post URL Chapter A' },
{ id: 37, title: 'Newest Chapter B', url: ' Post URL Chapter C' },
{ id: 10, title: 'Newest Chapter C', url: ' Post URL Chapter C' } ]

From the output, we can observe that the entry with id "2" was filtered out since it matched existing data.

Answer 5

Answer №3

Resolved with alteration:

for (var j in newest)

changed to

for (var j = 0; j < newest.length; j++)

I realized it was incorrect to solely use var j in in the second loop in that manner

Answer 6

Resolved with alteration:

for (var j in newest)

changed to

for (var j = 0; j < newest.length; j++)

I realized it was incorrect to solely use var j in in the second loop in that manner

Displaying all items within a JSON variable using a for loop instead of just one item at a

Answer №1

Answer №2

Answer №3

Similar questions

Avoiding repeated execution of event handlers in subviews of Backbone

Unable to execute any actions on object in JavaScript

Utilizing NSURL for constructing new posts on a Rails server via JSON may involve redundant parameters

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

The sequence of indices in a for loop and making Ajax requests

define` module root path

Package.json file is not included in Typescript

Angular: Issue with the functionality of BehaviorSubject

Populate Google Maps with numerous pins using JSON data

Executing MySQL queries synchronously in Node.js

The creation of numerous DOM elements in D3

Having trouble including a property in an object using a method that relies on the "this"

Is there a way to extract specific data from a JSON file and calculate the average in order to generate a line graph using JavaScript

Searching for key names in JSON using PHP

Enhance DataTables functionality by including the ability to select which script to execute

What are the steps to designing customizable drop-down content menus on websites?

Merging and Reorganizing files using Gulp based on Folder names

The attempted upgrade to Highcharts 11 within the Angular App was unsuccessful due to a lack of loader capable of handling the

I require assistance with parsing the JSON outcome within a C# Windows Phone application

Challenge with Sequelize Many-to-Many Query