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 }

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 }

• javascript
• reactjs

• 1 which does not work only response to that is you did something wrong. What does not work? Are you getting errors? If you use map to create a list of jsx objects you should give them a key prop: <div key={key}> or you will get warnings. Could you give us an example of what you want the html to look like based off that data object? – HMR Commented Oct 4, 2019 at 15:48

3 Answers 3

try:

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

the iteration needs to happen inside of the return with the map returning inside its iteration.

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

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>
...