Updating object values within a while loop using JavaScript

I am facing an issue with managing an array of JavaScript objects that have a property 'table' with values table1, table2, table3, or table4. Each table should only accommodate 6 members. I have implemented a while loop to check if 'table1' exceeds the limit of 6 values. However, I need assistance in dynamically changing the 'table1' values until there are less than 6 objects assigned to 'table1'.

Here is the Array of Objects:

  var data = [{
            name: "",
            pref: "",
            table: ""
        },
        ...
    ];

This is the While Loop:

function countTable(value) {
        return function (sum, item) {
            return sum + (item.table === value);
        };
    }

    function check() {
      while (data.reduce(countTable('table1'), 0) >= 6) {
          // Any help here would be appreciated
      }
    }

Thank you in advance for your support.

Answer №1

Have you considered addressing the issue when assigning table values randomly? By implementing a simple protection measure, you can prevent assigning the same name more than 6 times:

let counts = [[1, 6], [2, 6], [3, 6], [4, 6]];
data.forEach( obj => {
    let i = Math.floor(Math.random() * counts.length);
    obj.table = 'table' + counts[i][0];
    if(--counts[i][1] == 0) counts.splice(i, 1);
});

const data = [{
    name: "",
    pref: "",
    table: ""
},{
    name: "",
    pref: "",
    table: ""
}, ... (additional data objects included) ...];

let counts = [[1, 6], [2, 6], [3, 6], [4, 6]];
data.forEach( obj => {
    let i = Math.floor(Math.random() * counts.length);
    obj.table = 'table' + counts[i][0];
    if(--counts[i][1] == 0) counts.splice(i, 1);
});

console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }

If you have already assigned table values randomly and need to re-assign them due to exceeding the limit of 6 occurrences for the same value, you could use this approach:

let counts = [6, 6, 6, 6];
let tables = [1, 2, 3, 4];
data.forEach( obj => {
    let i = obj.table.slice(-1) - 1;
    if (counts[i]) { // It's OK
        counts[i]--;
        return; 
    }
    let j = Math.floor(Math.random() * tables.length);
    i = tables[j];
    obj.table = 'table' + i;
    counts[i]--;
    if (!counts[i]) tables.splice(j, 1);
});

The scenario begins with data containing an excess of table3 values:

var data = [{
    name: "",
    pref: "",
    table: "table3"
},{
    name: "",
    pref: "",
    table: "table1"
}, ... (additional data objects included) ...];

let counts = [6, 6, 6, 6];
let tables = [1, 2, 3, 4];
data.forEach( obj => {
    let i = obj.table.slice(-1) - 1;
    if (counts[i]) { // It's OK
        counts[i]--;
        return; 
    }
    let j = Math.floor(Math.random() * tables.length);
    i = tables[j];
    obj.table = 'table' + i;
    counts[i]--;
    if (!counts[i]) tables.splice(j, 1);
});

console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer №2

Utilizing the forEach method of an array, a straightforward approach is demonstrated below.

var counts = {};
data.forEach(elt => counts[elt.table] ? counts[elt.table]++ : counts[elt.table] = 1);

A table detailing the counts of each table will be produced by this code snippet.

To further refine the results and remove any excess objects, the filter method can be combined with the above technique:

const max = 6;
var counts = {};
data = data.filter(elt => {
    counts[elt.table] ? counts[elt.table]++ : counts[elt.table] = 1;
    return counts[elt.table] <= max;
);

The end result now displays the initial contents of the tables, while the unnecessary elements have been effectively removed.

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

Tips for displaying a restricted quantity of items in a list according to the number of li lines used

My approach involves using a bulleted list to display a limited number of items without a scrollbar in 'UL' upon page load. On clicking a 'more' button, I aim to reveal the remaining items with a scrollbar in UL. The following code acco ...

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

As a Vue beginner, I am facing an issue with changing random text every 5 seconds while the page is loading. <template> <section class="container"> <h1 class="title"> Welcome {{ whois }} </h1> </section&g ...

AngularJS 2: Updating variable in parent component using Router

My current app.component looks like the following: import { Component, Input } from '@angular/core'; import {AuthTokenService} from './auth-token.service'; @Component({ selector: 'app-root', templateUrl: './app ...

Press the button in the parent component, retrieve information from the child component, and utilize it in a method (Vue 3)

I am currently using Vue3 in combination with Bootstrap 5. MY ISSUE: I am trying to click a button in my parent.vue. Upon clicking, I want to retrieve the data from my child.vue and access it within the method in my parent.vue. However, the data always r ...

Clicking on a JQuery element triggers an AJAX function, although the outcome is not aligned with the intended

Instead of using a fiddle for this task, I decided to work on it online since my knowledge of fiddles is limited. However, after multiple attempts and hours spent rewriting the code, I still can't get it right. The issue at hand requires that when cl ...

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

What is the best way to create a generic function parameter for a single property of an object?

I am trying to refactor a generic function into accepting parameters as a single object function test<T>(a: string, b: T, c: number) Instead, I want the function to receive an object like this: function test(params: {a: string; b: T, c: number}) I ...

What is the best method for iterating through an array and generating a glossary list organized by categories?

I have an array filled with definitions. How can I use Vue.js to iterate through this array and create a glossary list organized by letters? Desired Output: A Aterm: A definition of aterm B Bterm: A definition of bterm C Cterm: A definition of cterm ...

Display Partial View in MVC 4 using ajax success callback

Issue: Unable to load view on ajax success. Situation: I have two cascaded dropdowns where the second dropdown's options are based on the selection of the first dropdown. Upon selecting an option in the second dropdown, I want to display a list of re ...

Explore search results that include values nested within map arrays

I have an array with multiple objects, each containing a nested array of subValues. My goal is to filter components based on search criteria. While I can successfully search the parent level objects' values, I am struggling with filtering based on the ...

Regular expression: match all content up to a certain word(s)

I have two different versions of a string that look like this: The Student's Companion *Author: Alcock, Pete;May, Margaret;Wright, Sharon*MIL EAN/ISBN: 9781283333115 Java Programming: Java Expert*Author:Sarang, Poornachandra*MIL EAN/ISBN: 978128011 ...

Troubleshooting: Unable to Sort Column in ngx-DataTable Angular 4

As a newcomer to Angular, I have been encountering some challenges while using ngx-DataTable. I am currently utilizing a simple ngx-DataTable for basic operations. The issue I am facing is that the sorting functionality is not working on a specific column, ...

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

Tips for inserting a string into an array nested within an object stored in a state array

Currently, the variable sizeVariant is a string array and I am trying to append strings to it using an onClick event. The function findIndex seems to be working fine. However, there seems to be an issue with the concatenation section. It appears that using ...

When working with Vue, setting the default value for props as a computed property is an

props: { rules: { type: Array, required: false, default: () => [ (file) => !file || file.size < 10000000 || this.getJsonDataByLocale.less_than_10mb_message, (file) ...

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

How come the default is operating when the number is specifically set to 1?

let spans = document.querySelector(`#spans`); let hrs = document.querySelector(`#hrs`); let mins = document.querySelector(`#mins`); let secs = document.querySelector(`#secs`); let start = document.querySelector(`#start`); let stop = document.querySelector( ...

The sequence of screen modes is not functioning correctly

I am having difficulty arranging my screens in the correct order. I would like to start with the Title screen, which should be red. Then, when the Play Button is clicked, I want to transition to the Difficulty Screen, where there are Easy and Hard Buttons ...

WARNING: Alert raised due to the discovery of two offspring sharing identical keys, `${item}-${index}`

I have been facing the issue of receiving an error message 'ERROR Warning: Encountered two children with the same key, ${item}-${index}' and I am not sure what is causing it. Can someone please guide me on how to resolve this problem? Any help w ...

Accessing a global variable within a jQuery .each function

I'm struggling to modify the global variable within an each function var total_ctc_change = 0; $('.table' + employeeid + ' thead th').each(function(index, value){ total_ctc_change++; }); ...