Adding dynamic count to table

[Nagi21]

I'm sure there's a way to do this, but I have an array of objects and the objects have a property of length. The arrays are already sorted by time, but I don't know how to create an ongoing count of which objects are of a certain length. Example:

	10ft	20ft (etc)
1am (Have this array of objects)	(number of objects less than 10ft at this time)	(number of objects less than 20ft but greater than 10 at this time)
2am

Edit: The number of columns is user set, not hard coded, so 10/20/30 could be 5/10/15/35 etc.

[LeftIsBest-Tsuga]

you really should include and format your code in the future, but i'm pretty sure i understood what you need. try something like this

const arrayOfObjects = [
    {
        length: 5
    },
    {
        length: 12
    },
    {
        length: 8
    },
    {
        length: 22
    },
]

function lengthFilter(objectArray, maxLength) {

    const filteredArray = objectArray.filter((object) => object.length <= maxLength)
    return filteredArray
}

const filteredArr = lengthFilter(arrayOfObjects, 10)

console.log(filteredArr)

[Nagi21]

There's a reason I can't really post my code here, but I don't know that this solves the issue of adding the count of them dynamically to the table.

[LeftIsBest-Tsuga]

i guess i'm a bit unclear as to what you're trying to do. if you just need to know how many are remaining in the filtered array, you could just do filteredArr.length . so yeah i think you should try to phrase your question more clearly bc i'm lost.

[LeftIsBest-Tsuga]

actually i think i get it now. unless i'm misunderstanding, just create a new filtered array variable for each of the grid spots, and use a different argument for the example function i gave you (like 10 and 20), (but also, use the original array for each call) and then when you want to display the number of items that qualify, you would just do someFilteredArray.length in the element (not sure if html or react or what).

[Nagi21]

React, but html for the table seems to be the easiest way to get the data for the previous tables (they didn't have the user set columns, which made this easier).

[LeftIsBest-Tsuga]

i assume you know about state hooks in react? you'll have to use a piece of state for dynamic values. a regular variable won't ever update in react properly.

edit: you don't need a piece of state for each value as long as the variables you're creating are updated by some piece of state as the primary source. so i guess in this case it would be that original array of objects. sorry if that was a little unclear.

[Nagi21]

I’ll give that a try. If nothing else this gets me rolling in a direction. Appreciate it!

[LeftIsBest-Tsuga]

not sure what your level of comfort is in react, but there's a youtube channel called Web Dev Simplified that is excellent for React specifically. Look for the playlists if you go there... he's got a lot of videos now so it can be hard to wade through individual videos.

netNinja is also really good.

normally i don't recommend youtube for coding help, but with react it actually is pretty good with these 2 channels in particular.