Accessing Object values without knowing the keys of that Objects

Question

I did finish my tutorial for reactjs and start making an webapp which stores data in a json.I was able to find my object from a json data and the object would represent something like this one:

var data={
    name:<h1>Ram</h1>,
    description:<p>I want to be a Developer</p>,
    contact:<ul><li>66546464/li><li>66546464/li></ul>,
    DOB:<h4>23.05.2017</h4>
    }

I need to display in this way,but without using keys like

   {data.name or data.DOB}.

Output should be like this:

   <div>
       <h1>Ram</h1>
       <p>I want to be a Developer</p>
        <ul><li>66546464/li><li>66546464/li></ul>
        <h4>23.05.2017</h4>
    </div>

Is it possible to display the values without knowing the key? If so,please do help me?

Critics are always welcome!

Possible duplicate of How to get all properties values of a Javascript Object (without knowing the keys)? — Guillaume Georges
– Guillaume Georges, Commented Jun 19, 2018 at 16:36
Thank you for your answer!Can you please show me with an example in react? That would be really helpful @GuillaumeGeorges — ramakrishnar
– ramakrishnar, Commented Jun 19, 2018 at 16:43

Alex Antonov · Accepted Answer · 2018-06-19 16:55:01Z

3

Here's how to do it in react.js

<div>
  {Object.keys(data).map(key) => (
    <span key={key}>
      {data[key]}
    </span>
  )}
</div>

An explanation. Object.keys takes all keys from your object, you map over them and for each one return a <span> (note the key), and inside each span you take value from data by its key

answered Jun 19, 2018 at 16:55

Alex Antonov

15.4k10 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hriday Modi · Accepted Answer · 2018-06-19 17:11:03Z

1

You have to iterate over keys of the object and append it's value as a children of parent div. Please consider below code:

<div>
  {Object.keys(data).map(key => data[key])}
</div>

Object.keys will give you keys of object and map function returns all the values of the key in a array format. It can be written in react JSX as shown in above code.

answered Jun 19, 2018 at 17:11

Hriday Modi

2,08916 silver badges22 bronze badges

1 Comment

ramakrishnar Over a year ago

Thanks for the help!

rborum · Accepted Answer · 2018-06-19 16:40:20Z

0

It makes more sense to store your data without the HTML tags (Storing with tags is bad practice, many frameworks/libraries will try to parse your special characters and cause you hassle down the road) Then you can access the raw data in your view with keys.

<h1>{data.name}</h1> <p>{data.description}</p> etc

If you're solidly against using keys, you may find this thread on pretty printing JSON data to be of help:

Pretty Printing JSON with React

answered Jun 19, 2018 at 16:40

rborum

1241 silver badge13 bronze badges

1 Comment

ramakrishnar Over a year ago

Thanks for the headsup! I'll look into it @Ryan

Collectives™ on Stack Overflow

Accessing Object values without knowing the keys of that Objects

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related