Counting # elements in multiple arrays using JS

Question

I'm trying to count how many existing elements there are in all columns within taskIds. Not sure what the most efficient way to do this as I am already mapping data in the return statement. I want to be able to pass the total number in CustomHeader. Expected value should return 5

I have this component:

const Example = () => {

  const [state] = useContext(DataContext);
  const count = 0;
  return (
    <>
      <div
        title={<CustomHeader title="Things to do" size="18px" count={count} />}
      >
        {state.columnOrder.map(columnId => {
          const column = state.columns[columnId];
          const tasks = column.taskIds.map(taskId => state.tasks[taskId]);
          return <Item key={column.id} column={column} tasks={tasks} />;
        })}
      </div>
    </>
  );
};

export default Example;

and this is my DataContext:

tasks: {
        "task-1": { id: "task-1", description: "Test" },
        ...
      },
      columns: {
        "column-1": {
          id: "column-1",
          taskIds: ["task-1", "task-2", "task-3", "task-4"]
        },
        "column-2": {
          id: "column-2",
          title: "column-2",
          taskIds: ["task-5"]
        },
        "column-3": {
          id: "column-3",
          title: "column-3",
          taskIds: []
        }
      },

      columnOrder: ["column-1", "column-2", "column-3"]

    };

Nick Parsons · Accepted Answer · 2021-10-11 03:46:36Z

1

You can use Object.values() on your .columns object within your state. This will give you an array of objects which are the values from within your columns object. Using .reduce() you can then sum the length of each taskIds array by taking the .length and adding that to the accumulating sum acc:

const state = { tasks: { "task-1": { id: "task-1", description: "Test" }, }, columns: { "column-1": { id: "column-1", taskIds: ["task-1", "task-2", "task-3", "task-4"] }, "column-2": { id: "column-2", title: "column-2", taskIds: ["task-5"] }, "column-3": { id: "column-3", title: "column-3", taskIds: [] } }, columnOrder: ["column-1", "column-2", "column-3"] };

const getCount = state =>
  Object.values(state.columns).reduce((acc, {taskIds}) => acc+taskIds.length, 0);
  
console.log(getCount(state));

edited Oct 11, 2021 at 3:46

answered Dec 2, 2019 at 11:09

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

begs89 · Accepted Answer · 2019-12-02 10:19:30Z

0

create a temp array and place the values of all inside it, then do .length on the temp array if possible I would change the naming convention from column-3 to column3 as well but whatever works

answered Dec 2, 2019 at 10:19

begs89

13 bronze badges

4 Comments

Freddy. Over a year ago

Any reason for the naming convention suggestion? :)

Nick Parsons Over a year ago

@Freddy. not the original answerer, but "-" is not allowed in identifiers. Sure you can access column-3 using bracket notation (ie: obj.tasks.columns["column-3"] works fine), but, when using it in dot-notation: obj.tasks.colums.column-3, you're going to get an unexpected result, as - is interpreted as subtraction.

begs89 Over a year ago

What @NickParsons said

Freddy. Over a year ago

@NickParsons I see thanks nick. How do I dynamically access all columns object and count all object property taskIds? var test = state.columns["column-3"].taskIds; only accesses 1 object trying to get a total of all columns

Renaldo Balaj · Accepted Answer · 2019-12-02 10:21:30Z

0

Since both (columns and tasks) are object you can count them directly by this function:

  Object.keys(columns).length
  Object.keys(tasks).length

  <CustomHeader title="Things to do" size="18px" count={Object.keys(columns).length} />

answered Dec 2, 2019 at 10:21

Renaldo Balaj

2,45014 silver badges24 bronze badges

2 Comments

Freddy. Over a year ago

Not sure I quite follow. I could create a function within the map to count the tasks? Are you able to expand your answer using the code I have?

Renaldo Balaj Over a year ago

codesandbox.io/s/new uplaod your cdoe here and sure :) (i don't know your code for sure, jsut upload the important parts and do comments // here i need the count of columns ...)

Collectives™ on Stack Overflow

Counting # elements in multiple arrays using JS

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related