如何从 object 呈现键值对反应

Question

This is object data that I have stored in my this.state.profile from an API request.

What I need to do know is render the values from the keys to the web broswer. I am trying with the code below which does not work. Also how do I render the objects within side this object? This is all so confusing:(

{
    "localizedLastName": "King",
    "lastName": {
        "localized": {
            "en_US": "King"
        },
        "preferredLocale": {
            "country": "US",
            "language": "en"
        }
    },
    "firstName": {
        "localized": {
            "en_US": "Benn"
        },
        "preferredLocale": {
            "country": "US",
            "language": "en"
        }
    },
    "profilePicture": {
        "displayImage": "urn:li:digitalmediaAsset:C5603AQGjLGZPOyRBBA"
    },
    "id": "fm0B3D6y3I",
    "localizedFirstName": "Benn"
}

How I am trying to render it:

const { profile } = this.state;

const profileList = Object.keys(profile).map((key,value)=>{
  return (
      <div>{key}{value.toString()}</div>
  );
})

{ profileList }

Answer 1

try:

return (
   {Object.entries(profile).map(([key,value]) => {
      <div>{key} : {value.toString()}</div>
   })}
)

the iteration needs to happen inside of the return .

Answer 2

You could build up your object outside your render call like below and just render it (elements).

var elements = [];
for (var prop in this.state.profile) {
    elements.push(<div>{prop} : {this.state.profile[prop].toString()}</div>)
}

If it's not working my guess would be your state isn't initialised or your target js version doesn't support Object.entries

Answer 3

First of all, you need to deal with nested objects:

{
    ...
    "firstName": {
        "localized": {
            "en_US": "Benn"
        },
        "preferredLocale": {
            "country": "US",
            "language": "en"
        }
    }...
}

If you try to render the value on the key firstName , you will get a object as value, and React can't render objects as elements.

And if you call toString() on it, you will get [Object object] as value.

To solve this, you gonna need some recursion:

const objToString = obj => {
  let result = []; 

  Object.keys(key => {
    if(typeof obj[key] === 'object'){
      let children = (<div>{key} : {objToString(obj[key])}</div>)
      result.push(children)
    } else
      result.push(<div>{key} : {obj[key]}</div>)
  })
}

...


const profileList = objToString(profile)

This should give you this something like:

...
<div>firstName: 
  <div>localized:
    <div>en_US: Benn</div>
  </div>
</div>
...