CODEWITHSUNDEEP
jsonreact-native
Solar1407
Solar1407

Reputation: 85

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

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.

Upvotes: 1

Views: 9253

Answers (2)

Drew Reese
Drew Reese

Reputation: 202605

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'));

Upvotes: 6

PrimeTimeTran
PrimeTimeTran

Reputation: 2137

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);
    })
  }

}

Upvotes: 1

Related Questions