Filter the object by its unique identifier and locate the entry with the highest score

I'm currently working on figuring out the proper syntax for sorting an object by ID and then identifying the highest score within that ID array. While I've managed to sort the object up to this point using conditionals and the sort() method, I'm looking to streamline it further by pinpointing the highest score based on lesson_id. What am I overlooking?

Here's what I have achieved so far:

    34: {user: 6, lesson_id: 2, score: 50, complete: true}
    35: {user: 6, lesson_id: 1, score: 50, complete: true}
    36: {user: 6, lesson_id: 2, score: 50, complete: true}
    38: {user: 6, lesson_id: 2, score: 100, complete: true}
    39: {user: 6, lesson_id: 2, score: 100, complete: true}
    40: {user: 6, lesson_id: 2, score: 100, complete: true} 

However, my desired output is:

    0: {user: 6, lesson_id: 2, score: 100, complete: true}
    1: {user: 6, lesson_id: 1, score: 50, complete: true}

This is what I have accomplished so far using Vue3.js:

    mounted() {
      this.quizArray = response.data;
      const arrayFilter = this.quizArray;
      const user_id = this.user_profile[0]["id"];
      var newObj = [];
      var listSort = function () {
        for (var i = 0; i < arrayFilter.length; i++) {
          if (arrayFilter[i].student["id"] === user_id) {
            if (arrayFilter[i].score !== null) {
              if (arrayFilter[i].complete === true) {
                arrayFilter.sort((a, b) => a.score - b.score);
                //uncertain about this part ....
                newObj[i] = {
                  user: arrayFilter[i].student["id"],
                  lesson_id: arrayFilter[i].quiz["lesson_id"],
                  score: arrayFilter[i].score,
                  complete: arrayFilter[i].complete
                }
              }
            }
          }
        }
      };
      newObj = this.filteredResults; 
            console.log(this.filteredResults)
      listSort();
      
      // const highest = this.filteredResults.sort((a, b) => b.score - a.score)[0]
      // console.log(highest) works but only for one lesson
     });
    },

Below is the original object structure for reference:

35:
complete: true
quiz: {id: 1, lesson_id: 1, question: 'What is heat transfer?', answer: 'Its is a type of blah', op1: 'Its balahsdd', …}
score: 50
student: {user: 'Mark', name: 'Mark', occupation: 'Commissioning Technician', residence: 'Australia', active_id: false, …}

Answer №1

If you want to clean up your code, consider using JavaScript methods. Sorting the array may not be necessary if you only need the highest value. You can achieve this with the following snippet. @UPDATE I have now accounted for grouping by lesson in the revised answer below

const userId = this.user_profile[0]["id"];

// filter all completed quiz elements with a non-null score for the current student
const quizForStudent = this.quizArray.filter(quiz => quiz.student.id === userId && quiz.complete && quiz.score !== null)

// determine the highest value for all lessons
// const highest = quizForStudent.reduce((prev, current) => prev.score > current.score ? prev : current)

// group elements by lesson ID. This will result in the format:
// {
//     2: [{complete: true, quiz: {lesson_id: 2, ...}, score: 100, student: {...}, {complete: true, quiz: {lesson_id: 2, ...}, score: 100, student: {...}, ...]
//     1: [{complete: true, quiz: {lesson_id: 1, ...}, score: 100, student: {...}]
// }
const scorePerLesson = quizForStudent.reduce((object, current) => {
    object[current.quiz.lesson_id] = object[current.quiz.lesson_id] || []
    object[current.quiz.lesson_id].push(current)

    return object
},{})

// find the highest score for each lesson
// {
//     2: {complete: true, quiz: {lesson_id: 2, ...}, score: 100, student: {...}
//     1: {complete: true, quiz: {lesson_id: 1, ...}, score: 100, student: {...}
// }
const highestScorePerLesson = Object.entries(scorePerLesson).reduce((object, [lessonId, quiz]) => ({
    ...object,
    [lessonId]: quiz.reduce((prev, current) => prev.score > current.score ? prev : current)
}), {})

To retrieve the highest score for a specific lesson (e.g., lesson 2), you can use

highestScore[2]

Explore it further on codesandbox: link

Answer №2

Utilizing Array.reduce is a great solution for this task:

const quizArray = [
    {user: 6, lesson_id: 2, score: 50, complete: true},
    {user: 6, lesson_id: 1, score: 50, complete: true},
    {user: 6, lesson_id: 2, score: 50, complete: true},
    {user: 6, lesson_id: 2, score: 100, complete: true},
    {user: 6, lesson_id: 2, score: 100, complete: true},
    {user: 6, lesson_id: 2, score: 100, complete: true}
];

let highScores = Object.values(quizArray
    .filter(entry => entry.complete) // Consider only completed entries
    .reduce((highScores, entry) => {
        // Find the current high score for this lesson
        let lesson = highScores[entry.lesson_id];
        // If there is no existing score, or if the new score is higher, then replace with new entry
        if (!lesson || (entry.score > lesson.score)) { highScores[entry.lesson_id] = entry; }
        return highScores;
    }, {}));

console.log(highScores);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular JS Integration with PapaParse

Currently enjoying the efficiency of PapaParse's CSV parsing and unparsing features. Interested in integrating this with Angular JS - anyone able to assist with this integration? Excited about incorporating PapaParse into an Angular environment. Work ...

Creating an Interactive Form with Laravel and Vue.js to Store and Modify Database Entries

Can someone help me with creating a simple input box that fetches the default value from a database and updates the database when the user changes the value? I am working on a project using Laravel 5.5 and Vue components. The initial value should be retrie ...

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

Route Separation with ExpressJS and Socket.IO

As I delve into the world of ExpressJS and Socket.IO, I find myself facing a puzzling situation. My routes are neatly organized in a separate file that I include from my app.js: var express = require('express') , db = require('./db&ap ...

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

Place the button inside the form following another block element

Here is the HTML code I am working with: <div class="actions"> <input id="submit-car" name="commit" type="submit" value="Добавить объявление"> </div> and here is a fiddle example: http://jsfiddle.net/348U4/ In ...

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

const Commando = require('discord.js-commando'); module.exports = class AnnounceCommand extends Commando.Command { constructor(client) { super(client, { name: 'announce', aliases: ['an'], ...

Flask and the steps to modify CORS header

While working on my localhost, I came across a CORS error when building an application to handle search queries for a different domain. The specific error was: "Cross Origin Request Blocked... (Reason: CORS header 'Access-Control-Allow-Origin' mi ...

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

Parse two strings and an integer from a text file and store them in a struct array

I am currently facing a challenge in reading the suit, rank, and card value (e.g., heart seven 7) from a text file and inputting this data into a struct. The code snippet below demonstrates my approach, but I seem to be encountering errors in its impleme ...

Exploring file writing using Node Webkit and JavaScript

When developing my app, I encountered an issue with the 'fs' module not functioning as expected. Despite the code being written to write a file, nothing happens when the app is launched. However, if I start the app using the following command: $ ...

Discovering the central point within an SVG path

I am currently working with a path that is part of a group and using Jquery to locate the specific path. My goal is to find the midpoint of that path. I came across an example here. However, when attempting to use .getTotalLength(); or .getPointAtLength(), ...

Creating a hash map for an iteration through a jQuery collection

Using the jQuery .each function, I traverse through various div elements. By using console.log, the following output is obtained: 0.24 240, 0.1 100, 0.24 240, 0.24 240, The first number on each line represents a factor and the last number is the res ...

Incorporating an NPM JavaScript library into Laravel version 8

I've integrated the mobiscroll javascript component library into my new Laravel 8 app by adding the minified css/js files to the public/css and public/js directories. However, I'd like to find a more seamless way to include these components by us ...

Jquery AJAX request encountering a syntax error due to an invalid label

I'm having trouble with an ajax call to the server that should return a JSON object. I can't seem to figure out what's wrong, so any help would be greatly appreciated. Here's the snippet of code: $.ajax ({ type : "GET", ...

Attempting to grasp the correct method for understanding For loops

Lately, I've been diving into teaching myself Node.JS and it has been quite an enjoyable experience. However, I've hit a frustrating roadblock that is really causing me some grief. For some reason, I just can't seem to grasp the concept of F ...

Breaking down a URL based on one of two distinct components

Currently, I have a piece of code that splits the URL and removes everything after &7. Is there a way to modify it so that it also checks for |relevance simultaneously and splits based on whichever one is found? $(document).ready(($) => { const pa ...

Conceal a child div through the use of AJAX technology

Utilizing AJAX, I am loading pages on my website. Each page consists of two common div elements - the header div and the content div. When navigating from one page to another, I load the content div of the next page into the current page using the followin ...

How do I avoid using an if statement in jQuery to eliminate errors caused by "undefined" values?

Whenever I incorporate third-party plugins, my usual practice is to initiate them in the main application.js file. For example: $('.scroll').jScrollPane(); However, a challenge arises when a page loads without the presence of the scroll class, ...

Translating and decrypting JSON data with RSA in Angular and Express.js

I am currently facing an issue with my Angular.ts frontend and Express.js backend setup. In the frontend, I am encrypting user credentials using RSA and sending the encrypted data to the backend as a string. However, when I try to decrypt this data in the ...