How to return the key from object value in javascript?

Question

I have an object in React that I mapped and wanted to make it interact: I want it so when user clicks on the 'X' button next to an element, it would console.log the key of that clicked element.

Here is the object:

var obj = {
  person1: {
    name: 'iggy',
    superPower: 'awesomeness',
    favDonut: 'chocolate'
  },
  person2: {
    name: 'iggy2',
    superPower: 'stupendousness',
    favDonut: 'glazed'
  },
  person3: {
    name: 'iggy3',
    superPower: 'amazingness',
    favDonut: 'chocolate sprinkles'
  }
};

The iteration looks like this:

X chocolate
X glazed
X chocolate sprinkles

If I click the x on glazed, I want it to console.log person2 because that's the parent object of glazed. If I click x on chocolate sprinkles, I want it to console.log person3.

Here is the fiddle: https://jsfiddle.net/iggyfiddle/b9rreoje/2/

The method that I am trying to figure out is the getPersonName function. What is the best way to allow user to click on the x and console.log the relevant object key?

A. L · Accepted Answer · 2017-03-19 07:06:44Z

1

Rather than doing Object.values you'll want to do Object.keys, so you can then access the corresponding key.

  getPersonName: function(person){
    console.log(person);
  }

const donutValues = Object.keys(obj).map((key, index) => <li key={index}><a href="#" onClick={() => this.getPersonName(key)}>X</a> {obj[key].favDonut} </li>);

updated fiddle: https://jsfiddle.net/b9rreoje/3/

answered Mar 19, 2017 at 7:06

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

1 Comment

Iggy Over a year ago

Object.keys(obj)... while displays obj[key].favDonut. Didn't think of that. Thanks!!

Tharaka Wijebandara · Accepted Answer · 2017-03-19 06:47:19Z

0

You need to set onClick to an inline function that calls getPersonName with the corresponding person object.

  getPersonName: function(person){
    console.log(person);
  },

  render(){
    const donutValues = Object.values(obj).map((person, index) => <li key={index}><a href="#" onClick={function(){this.getPersonName(person)}.bind(this)}>X</a> {person.favDonut} </li>);
    return (
      <div>
        Hello 
          <ul>
            {donutValues}
          </ul>
          Give me person: {this.state.person}
      </div>
    );
  }

Find the updated jsfiddle here: https://jsfiddle.net/8637u8qL/

answered Mar 19, 2017 at 6:47

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to return the key from object value in javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related