Iterate a JSON array by a key value in react-native

Question

Is there anyway to get a value in an object from a json array. I need to get a value from an object based on another value.

I have my code like:

export default class StandardComp extends Component {
    constructor(props) {
        super(props)
        this.state = {
           id: '',
           email: '[email protected]',
           dataSource: []
        };    
    }

    componentDidMount(){
        fetch(someURL, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
           }
        })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({dataSource: responseJson})
            //dunno what to do here
        })
        .catch((error) => {
           console.error(error);
        })
    }
}

My "responseJson" is something like this. Then providing the key value ([email protected]), how could I get the string "abcdef"?

[
   {
      "id": "qwerty",
      "email": "[email protected]",
      "name": "cat"
   },
   {
      "id": "abcdef",
      "email": "[email protected]",
      "name": "abc"
   }         
   {
      "id": "owowao",
      "email": "[email protected]",
      "name": "dog"
   },
]

Thank you in advance.

Drew Reese · Accepted Answer · 2019-01-09 06:15:29Z

6

Find the element that matches email and return the id.

array::find

const data = [
   {
      "id": "qwerty",
      "email": "[email protected]",
      "name": "cat"
   },
   {
      "id": "abcdef",
      "email": "[email protected]",
      "name": "abc"
   },       
   {
      "id": "owowao",
      "email": "[email protected]",
      "name": "dog"
   },
];

const findIdByEmail = (data, email) => {
  const el = data.find(el => el.email === email); // Possibly returns `undefined`
  return el && el.id; // so check result is truthy and extract `id`
}

console.log(findIdByEmail(data, '[email protected]'));
console.log(findIdByEmail(data, '[email protected]'));
console.log(findIdByEmail(data, 'gibberish'));

edited Jan 9, 2019 at 6:15

answered Jan 9, 2019 at 6:06

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

Comments

PrimeTimeTran · Accepted Answer · 2019-01-09 06:04:01Z

1

The code will depend on how you get the value [email protected].

You'll probably need to pass it in as an argument to componentDidMount via a prop? Or extract it to a separate function. It just depends.

Something like this is the most basic way I'd say.

const value = responseJson.filter(obj => obj.email === '[email protected]')[0].id

Here it is implemented in your class.

export default class StandardComp extends Component {
  ...

  componentDidMount(){
    fetch(someURL, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
       }
    })
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({ dataSource: responseJson })
        const { email } = this.state
        const value = responseJson.filter(obj => obj.email === email)[0].id

    })
    .catch((error) => {
       console.error(error);
    })
  }

}

edited Jan 9, 2019 at 6:04

answered Jan 9, 2019 at 5:59

PrimeTimeTran

2,2073 gold badges22 silver badges33 bronze badges

2 Comments

Solar1407 Over a year ago

Thank you, I already have the value "[email protected]" stored in this.state.email

Drew Reese Over a year ago

FYI, filter returns an empty array if no elements match filter, so you can't assume there's a zeroth index to return id of.

Collectives™ on Stack Overflow

Iterate a JSON array by a key value in react-native

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related