filter json data based on the passed parameter

Question

I have the following JSON file. I want to filter the data based on the foreign key(fk). If I have the parameter passed to my page as 1 then I want the top three rows that has a fk key of 1 and id of 1,2 and 3 filtered out. I want them to be displayed as List View.

same thing if I have the parameter passed as 2 then I want the rows that has id of 4, 5 and 6 and the fk of 2 filtered out.

The fk parameter is coming from my previous page that has a listview and if the user selects a particular item then that item Id is passed to this page.

{
    "data":[
        { 
            "id": 1,
            "fk": 1,
            "Loc": "101 Test drive, TX",
            "Long": "12365",
            "Lat" : "87766",
            "Phone": "123-456-7899"
        },
        {
            "id": 2,
            "fk": 1,
            "Loc": "201 Test drive, CA",
            "Long": "12365",
            "Lat" : "87766",
            "Phone": "123-456-9999"
        },
        {
            "id": 3,
            "fk": 1,
            "Loc": "201 Test drive, CA",
            "Long": "12365",
            "Lat" : "87766",
            "Phone": "123-456-9999"
        },
        {
            "id": 4,
            "fk": 2,
            "Loc": "111 Test drive, CA",
            "Long": "12365876",
            "Lat" : "877669999",
            "Phone": "123-456-4040"
        }, 
        {
            "id": 5,
            "fk": 2,
            "Loc": "201 Test drive, CA",
            "Long": "12365",
            "Lat" : "87766",
            "Phone": "123-456-9999"
        },
        {
            "id": 6,
            "fk": 2,
            "Loc": "999 Test drive, CA",
            "Long": "12365",
            "Lat" : "87766",
            "Phone": "123-456-8484"
        },
        {
            "id": 7,
            "fk": 3,
            "Loc": "888 Test drive, CA",
            "Long": "12365432",
            "Lat" : "87766111",
            "Phone": "123-999-8484"
        }
    ]
}

Below is my entire code. I did apply the data.filter in componentdidMount(), but now I am getting an empty list. I am not sure what I am doing wrong:

 import React, { Component } from 'react';

import { StyleSheet, Text, View, ListView, ActivityIndicator, TextInput } from 'react-native';

import { StackNavigator } from 'react-navigation';



class MainActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State.
      Loading_Activity_Indicator: true,
      text:'',

    }
    this.arrayholder=[];
  }

  componentDidMount() {

    const data = require('./data.json')
     var newList = data.filter(obj => obj.fk === 2)

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          Loading_Activity_Indicator: false,
          dataSource: ds.cloneWithRows(newList),
        }, function() {

          // In this block you can do something with new state.
          this.arrayholder = newList ;
        });


  }

  SearchFilterFunction(text){

    const newData = this.arrayholder.filter(function(item){
        const itemData = item.fruit_name.toUpperCase()
        const textData = text.toUpperCase()
        return itemData.indexOf(textData) > -1
    })
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    })
}

  ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }

  Navigate_To_Second_Activity=(fruit_name)=>
    {
      //Sending the JSON ListView Selected Item Value On Next Activity.
      this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name });

    }

  static navigationOptions =
    {

     title: 'MainActivity',

    };


  render()
  {
    if (this.state.Loading_Activity_Indicator) {
      return (
        <View style={styles.ActivityIndicator_Style}>

          <ActivityIndicator size = "large" color="#009688"/>

        </View>
      );
    }

    return (

      <View style={styles.MainContainer}>

  <TextInput 
       style={styles.TextInputStyleClass}
       onChangeText={(text) => this.SearchFilterFunction(text)}
       value={this.state.text}
       underlineColorAndroid='transparent'
       placeholder="Search Here"
        />

     <ListView

          dataSource={this.state.dataSource}

          renderSeparator= {this.ListViewItemSeparator}

          renderRow={(rowData) => <Text style={styles.rowViewContainer} 
          onPress={this.Navigate_To_Second_Activity.bind(this, rowData.Loc)} >{rowData.Loc}</Text>}

        />

      </View>
    );
  }
}

class SecondActivity extends Component
{
  static navigationOptions =
  {
     title: 'SecondActivity',
  };

  render()
  {
     return(
        <View style = { styles.MainContainer }>

           <Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text>

        </View>
     );
  }
}

export default MyNewProject = StackNavigator(
{
  First: { screen: MainActivity },

  Second: { screen: SecondActivity }
});

const styles = StyleSheet.create(
{
  MainContainer:
  {
     justifyContent: 'center',
     flex:1,
     margin: 10

  },

  TextStyle:
  {
     fontSize: 23,
     textAlign: 'center',
     color: '#000',
  },

  rowViewContainer: 
  {

    fontSize: 17,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,

  },

  ActivityIndicator_Style:
  {

    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center',
    left: 0, 
    right: 0, 
    top: 0, 
    bottom: 0,

  },

  TextInputStyleClass:{

    textAlign: 'center',
    height: 40,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 7 ,
    backgroundColor : "#FFFFFF"

    }

});

Any help will be highly appreciated.

Answer 1

You can use the Array.prototype.filter() function to achieve what you are looking for. I had to mock the data you are getting back but it would work something like this.

data = [
	{
	  "id": 1,
	  "fk": 1,
	  "Loc": "101 Test drive, TX",
	  "Long": "12365",
	  "Lat" : "87766",
	  "Phone": "123-456-7899",
	},
	{
	  "id": 2,
	  "fk": 1,
	  "Loc": "201 Test drive, CA",
	  "Long": "12365",
	  "Lat" : "87766",
	  "Phone": "123-456-9999",
	},
	{
	  "id": 3,
	  "fk": 1,
	  "Loc": "201 Test drive, CA",
	  "Long": "12365",
	  "Lat" : "87766",
	  "Phone": "123-456-9999",
	},
	{
	  "id": 4,
	  "fk": 2,
	  "Loc": "111 Test drive, CA",
	  "Long": "12365876",
	  "Lat" : "877669999",
	  "Phone": "123-456-4040",
	},
	{
	  "id": 5,
	  "fk": 2,
	  "Loc": "201 Test drive, CA",
	  "Long": "12365",
	  "Lat" : "87766",
	  "Phone": "123-456-9999",
	},
	{
	  "id": 6,
	  "fk": 2,
	  "Loc": "999 Test drive, CA",
	  "Long": "12365",
	  "Lat" : "87766",
	  "Phone": "123-456-8484",
	},
	{
	  "id": 7,
	  "fk": 3,
	  "Loc": "888 Test drive, CA",
	  "Long": "12365432",
	  "Lat" : "87766111",
	  "Phone": "123-999-8484",
	}
];
passedPram = 2
var newList = data.filter(obj => obj.fk === passedPram)
console.table(newList);