React Native JSON Filtering

Question

I'm in the learning process of React Native and working on filtering through a JSON feed. I am able to filter down to a group of data, but I am looking to filter further within that group. At "filteredItem" I am able to get the example below.

{"$id":"3","num":256,"event":"1234","description":"example description","startdate":"2018","enddate":"2019"}

If I wanted to filter down to the event number similar to how I am displaying the whole group of info how would I do that?

componentDidMount() {
    return fetch('myurl')
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                filteredItem: responseJson.filter(item => item.$id == 3),

            }, function () {
            });

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

render() {
    if (this.state.isLoading) {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }

    return (
        <View>
                <Text>
                 {JSON.stringify(this.state.filteredItem, null, 2)}
                </Text>                                                                                                                                                                                  
        </View>)

}

}

if you let data = {"$id":"3","num":256,"event":"1234","description":"example description","startdate":"2018","enddate":"2019"} , then data.event will give you 1234 is this is what you looking? — Aravind S
– Aravind S, Commented Jul 26, 2018 at 3:56
This is what I'm looking at doing, however if I filter my data down to a single array (like your example), and attempt to display this.state.filteredItem.event I get nothing. — Ryan
– Ryan, Commented Jul 26, 2018 at 15:59
filteredItem is my array. It's been filtered down from the original JSON data. It's on line 7 in the example code above. — Ryan
– Ryan, Commented Jul 26, 2018 at 16:29
is your HTML is like this <Text>{this.state.filteredItem}</Text> — Aravind S
– Aravind S, Commented Jul 26, 2018 at 16:33

aLIEz · Accepted Answer · 2018-07-26 04:32:16Z

1

This will filter item $id == 3 and item event == 1234.

filteredItem: responseJson.filter(item => item.$id == 3 && item.event == 1234)

You can play around with responseJson to achieve what array you want.

componentDidMount() {
    return fetch('myurl')
    .then((response) => response.json())
    .then((responseJson) => {
        // Put logic to process the responseJson here before setState
        console.log(responseJson)
        let filteredResponseJson = responseJson.filter(item => item.$id == 3)
        console.log(filteredResponseJson)

        this.setState({
            isLoading: false,
            filteredItem: filteredResponseJson,
        })
    })
    .catch((error) => {
        console.error(error);
    });
}

answered Jul 26, 2018 at 4:32

aLIEz

1,1861 gold badge15 silver badges17 bronze badges

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

1 Comment

Ryan Over a year ago

Thank you for the help I appreciate it. I think I didn't ask my question very well. I'm looking to save a single object within the array I've filtered down to, into a variable. So I could display just "1234" for event.

Aravind S · Accepted Answer · 2018-07-26 19:10:32Z

0

Update your text like this

<Text>
   {this.state.filteredItem.map(item=>item.id)}
</Text>

Change the item.id to which ever prop you want

answered Jul 26, 2018 at 19:10

Aravind S

2,3952 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

React Native JSON Filtering

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