how to access key name as dynamically in ReactJS?

Question

I want to get dynamically key name of an Object and insert on a table as a column name and the value of row in React JS. For example the object is:

let data  = {
unique_id:"53",
target_type:"airplane",
heading:150,
lat:65.36,
long:50.41,
}

and the key name of the object goes to change per 3 second. So it is important that it should be dynamically table by data. the source code is:

<div className="rowx log-headers mb-3">
              <div className="colx log-header font-weight-bold">Unique ID</div> // I want to get key name of data instead of Unique ID. (it should be unique_id)
              <div className="colx log-header font-weight-bold">Target Type</div> // I want to get key name of data instead of Target Type. (it should be taget_type)
              <div className="colx log-header font-weight-bold">Heading</div>
              <div className="colx log-header font-weight-bold">Latitude</div>
              <div className="colx log-header font-weight-bold">Longitude</div>
              </div>
            <div className="log-elements">
              {data &&
                data.length &&
                data.map((t, index) => (
                  <div key={index} className="rowx log-element mb-2">
                    <div className="colx log-header">{t.unique_id}</div>
                    <div className="colx log-header">{t.targetType}</div>
                    <div className="colx log-header">{t.heading}</div>
                    <div className="colx log-header">{t.lat}</div>
                    <div className="colx log-header">{t.long}</div>
                  </div>
                ))}
            </div>

please help me.

Joseph · Accepted Answer · 2021-04-05 17:11:24Z

1

To get the key name in the object all you need is to use Object.keys() like this

let data = {
  unique_id: "53",
  target_type: "airplane",
  heading: 150,
  lat: 65.36,
  long: 50.41,
}

console.log(Object.keys(data))

and if you want to loop throw keys you could use for...in like this

let data  = {
unique_id:"53",
target_type:"airplane",
heading:150,
lat:65.36,
long:50.41,
}

for(let key in data){
  console.log("key", key);
  console.log("value", data[key])
}

answered Apr 5, 2021 at 17:11

Joseph

6,3273 gold badges24 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

how to access key name as dynamically in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related