尝试使用嵌套对象数据循环遍历对象，并使用我卡中的数据进行渲染

Posted 2021-04-08

Example Link

我正在尝试遍历一个嵌套对象的对象，以便我可以使用这些值。

该对象可以在我的状态下面的代码区域中找到。我需要使用以下内容，以便我可以在我的卡中使用它，如下所示render()

我使用了来自lodash的_.mapValues，我能够分离color和avg数据但是，我无法访问avg数据，以便我可以使用它。

注意：avg数据中的键总是在变化，因此我无法使用常规方式访问数据：

例如，value.avg[key]这给了我undefined

请检查此Example Link以进一步了解我的意思并在示例中检查控制台一次

数据我需要在我的卡中使用RENDER - 颜色名称'红色' - avg对象中的值

    this.state = {
      example: {
        red: {
          avg: {
            "1514505600": 3,
            "1514509200": 20,
            "1514512740": 15,
            "1514516280": 26
          }
        },
        green: {
          avg: {
            "1514505600": 51,
            "1514509200": 315,
            "1514512740": 36,
            "1514516280": 34
          }
        },
        blue: {
          avg: {
            "1514505600": 1,
            "1514509200": 16,
            "1514512740": 14,
            "1514516280": 17
          }
        }
      }
    }

    render() {
      const data = this.state.example;

      _.mapValues(data, function(value, key, object) {
        console.log(value.avg);
        console.log(key);
      });

      const card = (
        <div>
          <span style={{ fontWeight: "bold" }}>Please check the results in the console for more info</span>

        <div>
          <div>Colour name here: </div>
          <div>Example > avg > value data here: </div>
        </div>
      </div>
    )

    return <div>
      {card}
    </div>
  }

Example Link

答案

我相信这就是你想要做的，见CodePen的例子

我做了一些更改，见下文：我创建了generateCard方法并在render方法中调用它。

...
generateCard = (data) => {
    const keys = Object.keys(data); // Get array of keys from object

    return keys.map((key, index) => {
      const avgKeys = Object.keys(data[key].avg);

      return (
        <div key={index}>
          <div>Colour name: {key} </div>
          {avgKeys &&
            avgKeys.map(avgKey => {
              return <div key={avgKey}>Example > avg > value data: {avgKey} </div>
            })
          }
      </div>
      )
    })
  }

render() {
    const { example } = this.state;

    const card = (
      <div>
        <span style={{ fontWeight: "bold" }}>
          Please check the results in the console for more info
        </span>

        {this.generateCard(example)}
      </div>
    );

    return <div>{card}</div>;
  }
  ...

另一答案

1. Create a function that generates cards.

function generateCard(color, value) {
  return (
    <div key={color+'_'+value}> // arrays need a key to keep them unique
      // your card JSX here
      // use {color} and {value} where necessary
    </div>
  )
}

2. Loop through your data.

要从数组访问数据，可以使用Object.keys(object)从对象返回键数组，然后使用该数组访问对象的数据或使用类似lodash的库来简化语言。

var object = { key1: 'value1', key2: 'value2', key3: 'value3' }
var keys = Object.keys(object) // --> ['key1', 'key2', 'key3']
keys.forEach(function(key) {
  // key is the key (i.e. 'key1')
  // object[key] is the value (i.e. 'value1')
}

// or, with lodash:

var object = { key1: 'value1', key2: 'value2', key3: 'value3' }
_.forIn(object, function(value, key) {
  // do something with the key and/or value
})

由于您的数据在对象内部有一个对象，因此您需要使用此模式两次。一次data.example，一次为value.avg。

3. Tying it together

var myCards = [] // array for storing cards

_.forIn(exampleData, function (avgData, color) {
  // do something with the key and/or value
  // avgData is {avg: { ... }}
  // color is the color
  _.forIn(avgData.avg, function (value, key) {
    // do something with the key and/or value
    // store your card from here
    myCards.push(generateCard(color, value))
  })
})

render() {
  <div>
    {myCards}
  </div>
}