Question

我有这个javascript数组，其中包含嵌套的对象。

[{
    "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"
  }
]

我想循环浏览此内容并查看State_Name的{{1}}和running的{{1}}。我知道我有6 stopped和2 running。

所以我希望我的html说“有4个跑步，2个停止”。该对象实际上更大，我在React App中这样做。我有很多属性，我想做同样的事情。只需要一个好的模式。

实现这一目标的好方法是什么？

Answer 1

你可以这样做：

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

对于停止，你可以这样做：

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

然后，对于您的模板，只需执行：

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

变量记录基本上就是你的数组。

Answer 2

这是reduce()的经典用例。一旦计入一个物体，你就可以循环。

＆＃13;

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)

＆＃13;

Answer 3

我认为这会奏效 - ：

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

Answer 4

上述答案很好，但我想使用React 16.3中的新生命周期钩子来回答。 static getDerivedStateFromProps在组件实例化之后以及组件接收新道具时执行。这样，您可以检查组件接收的任何新数据是否需要重新呈现组件。

您返回一个对象以指示状态更改或null以指示新道具不需要任何状态更新。

请点击here以获取官方React文档中的更多信息。

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
);

如何在具有对象的React App中循环遍历javascript数组并获取具有特定值的属性的计数

4 个答案: