How do I loop through a javascript Array in a React App that has object and get a count on a property that has a certain value

Question

I have this javascript array that has objects nested with in it.

[{
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "stopped",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "stopped",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  },
  {
    "MonitoringState": "disabled",
    "State_Code": 16,
    "State_Name": "running",
    "EbsOptimized": false,
    "EnaSupport": true,
    "SourceDestCheck": true,
    "SpotInstanceRequestId": "None",
    "SriovNetSupport": "None",
    "StateReason_Code": "None",
    "StateReason_Message": "None"
  }
]

I want to loop through this and get the see the number of State_Name that are running and those that are stopped. I know I have 6 running and 2 stopped.

So I want my html to say "There are 4 running and 2 stopped". The object is actually bigger and I am doing this in a React App. I have a number of properties where I want to do the same thing. Just need a good pattern.

What is a good pattern at accomplishing this?

geekySRM · Accepted Answer · 2018-05-18 00:29:38Z

2

You could do something like this:

const runningCount = records.filter(r => r.State_Name === 'running').length

For stopped you can do:

const stoppedCount = records.filter(r =>r.State_Name === 'stopped').length

Then for your template, just do:

<span>There are {runningCount} running and {stoppedCount} stopped. </span>

The variable records is basically your array.

edited May 18, 2018 at 0:29

geekySRM

76 bronze badges

answered May 17, 2018 at 20:40

obey

8068 silver badges19 bronze badges

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

Comments

Mark · Accepted Answer · 2018-05-17 20:48:54Z

This is a classic use case for reduce(). You can loop through once counting into an object along the way.

let obj = [{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "running", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{ "MonitoringState": "disabled", "State_Code": 16, "State_Name": "stopped", "EbsOptimized": false, "EnaSupport": true, "SourceDestCheck": true, "SpotInstanceRequestId": "None", "SriovNetSupport": "None", "StateReason_Code": "None", "StateReason_Message": "None"},{"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "stopped","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }, {"MonitoringState": "disabled","State_Code": 16,"State_Name": "running","EbsOptimized": false,"EnaSupport": true,"SourceDestCheck": true,"SpotInstanceRequestId": "None","SriovNetSupport": "None","StateReason_Code": "None","StateReason_Message": "None" }]

let counts = obj.reduce((a, item) => {
    a[item.State_Name] = (a[item.State_Name] || (a[item.State_Name] = 0)) + 1
    return a
},{})

console.log(counts)

John · Accepted Answer · 2018-05-17 21:33:53Z

The above answers are good, but I wanted to contribute an answer using the new lifecycle hook in React 16.3. static getDerivedStateFromProps executes following the component's instantiation and also whenever the component receives new props. That way, you can check if any new data the component receive necessitates re-rendering the component.

You return an object to indicate a change in state or null to indicate new props do not require any state updates.

Please click here for more information from the official React documentation.

class MyApp extends React.Component {
  constructor() {
    super();

    this.state = {
      Num_Running: 0,
      Num_NotRunning: 0
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const results = nextProps.initialData.reduce((accum, item) => ({
      Num_Running: item.State_Name === 'running' ? ++accum.Num_Running : accum.Num_Running,
      Num_NotRunning: item.State_Name !== 'running' ? ++accum.Num_NotRunning : accum.Num_NotRunning
    }), {
      Num_Running: 0,
      Num_NotRunning: 0
    });

    if (results.Num_Running !== prevState.Num_Running || 
        results.Num_NotRunning !== prevState.Num_NotRunning)
      return { ...results };
    else
      return null;
  }

  render() {
    return <div>There are {this.state.Num_Running} running and {this.state.Num_NotRunning} stopped</div>;
  }
}

const arrayOfData = [/* your data */];

ReactDOM.render(
  <MyApp initialData={arrayOfData} />,
  document.getElementById('root') // <div id="root"></div> defined in HTML
);

John · Accepted Answer · 2019-04-17 13:55:29Z

0

I think this will work -:

var r = {stopped:0,running:0};
x.map((i) => {i.State_Name === 'running' ? r.running++ : r.stopped++;});

edited Apr 17, 2019 at 13:55

John

1,2922 gold badges16 silver badges31 bronze badges

answered May 17, 2018 at 21:01

Abhisar Tripathi

1,6612 gold badges13 silver badges21 bronze badges

1 Comment

obey Over a year ago

What if it is neither?

Collectives™ on Stack Overflow

How do I loop through a javascript Array in a React App that has object and get a count on a property that has a certain value

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related