Перебор JSON в React

У меня есть следующий код:

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

Это распечатывает следующее:

{"активный":{"метка":"Активный","значение":"12"},"автоматический":{"метка":"Автоматически","значение":"8"},"ожидание":{ «метка»: «Ожидание», «значение»: «1»}, «вручную»: { «метка»: «Вручную», «значение»: «3»}}

Как я могу перебрать реквизиты highlights_data.data, чтобы вызвать другой компонент, передающий label и value?


reactjs javascript jsx
person davideghz    schedule 01.06.2017    source источник

Ответы (2)


arrow_upward
24
arrow_downward

За исключением ответа @Dan, я не верю, что другие ответы полезны/полезны для вас, поскольку они не проходят через ваш объект JSON.

Чтобы сделать это правильно, вам нужно будет перебрать каждый из ваших ключей в вашем объекте JSON. Это можно сделать несколькими способами, один из которых — с помощью Object.keys(). Как фрагмент кода ниже.

Это решение перебирает каждый ключ в вашем объекте JSON и помещает его в массив. Когда у вас есть этот массив, вы можете перебирать его с помощью map(), как обычно, и передавать соответствующие реквизиты другому дочернему компоненту.:

class MyApp extends React.Component {
  render() {
    var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}};
    var arr = [];
    Object.keys(json).forEach(function(key) {
      arr.push(json[key]);
    });
    return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>;
  }
}

class MyAppChild extends React.Component {
  render() {
    return <li>{this.props.label + " - " + this.props.value}</li>;
  }
}

ReactDOM.render(<MyApp />, document.getElementById('myapp'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myapp"></div>

person Chris    schedule 01.06.2017

arrow_upward
4
arrow_downward 

<div>
  {this.props.highlights_data.data.map((e, i) => 
    <SomeComponent key={i} label={e.label} value={e.value} />
  )}
</div>

Вы можете просто отправить сам товар.

<SomeComponent key={i} item={e} />

И получить доступ к label и value в дочернем элементе с props.item.label или props.item.value.

person glhrmv    schedule 01.06.2017