9

I am trying to filter an array of data like so:

let data = 
[
   {
    "approval": "TPED",
    "manufacturer": "Chesterfield"
   },
   {
    "approval": "BV",
    "manufacturer": "Faber"
   }
]

let approvalVariable = "TP"
let filteredData = data.filter(x => x.approval.includes(approvalVariable))

console.log(filteredData)

So if approvalVariable is "TP", I want the new array to be:

[
   {
    "approval": "TPED",
    "manufacturer": "Chesterfield"
   },
]

I have it working when I do:

let filteredData = data.filter(x => x.approval == approvalVariable)

But when I try:

x.approval.includes(approvalVariable)

I get an error that x.approval.includes is not an object

I had it working at one point with .includes() but something is going wrong now.

Any help would be greatly appreciated.

  componentWillMount() {
    this.fetchData();
  }

 fetchData = async () => {
   var fireBaseResponse = firebase.database().ref();
   fireBaseResponse.once('value').then(snapshot => {
     let data1 = [];
     let approval = this.props.navigation.state.params.approval
     let comments = this.props.navigation.state.params.comments
     let designStandard = this.props.navigation.state.params.designStandard
     let diameter = this.props.navigation.state.params.diameter
     let h2Compatible = this.props.navigation.state.params.h2compatible
     let inletThread = this.props.navigation.state.params.inletThread
     let manufacturer = this.props.navigation.state.params.manufacturer
     let specificationNumber = this.props.navigation.state.params.specificationNumber
     let testPressure = this.props.navigation.state.params.testPressure
     let waterCapacity = this.props.navigation.state.params.waterCapacity
     let workingPressure = this.props.navigation.state.params.workingPressure


    snapshot.forEach(item =>{
        const temp = item.val();
        data1.push(temp);
        return false;
      });
////////Filter Method/////////
      if(approval == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.approval.includes(approval))
      }
      if(waterCapacity == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.waterCapacity == waterCapacity)
      }
      if(designStandard== '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.designStandard == designStandard)
      }
      if(diameter == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.diameter == diameter)
      }
      if(inletThread == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.inletThread == inletThread)
      }
      if(workingPressure == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.workingPressure == workingPressure)
      }
      if(comments == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.comments == comments)
      }

      if(manufacturer == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.manufacturer == manufacturer)
      }
      if(testPressure == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.testPressure == testPressure)
      }

      if(specificationNumber == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.specificationNumber == specificationNumber)
      }
      if(h2Compatible == '') {
        console.log("good")
      }
      else {
        data1 = data1.filter(x => x.h2Compatible == h2Compatible)
      }


/////////////////////Filter Method//////////////////

      this.setState({data: data1});

    });
  }
  render(){
    var {navigate} = this.props.navigation;
    let {params} = this.props.navigation.state;
    return(
    <ViewContainer>
        <ScrollView>
         <FlatList
                data = {this.state.data}
                keyExtractor = {(x, i) => i}
                renderItem ={({item}) =>
                    <Text style = {styles.itemText}>
                        Approval: {item.approval} | Manufacturer: {item.manufacturer} | Specification Number: {item.specificationNumber} |
                        H2 Compatible: {item.h2Compatible} | Diameter: {item.diameter} | Water Capacity: {item.waterCapacity} |
                        Inlet Thread: {item.inletThread}{"\n"}
                    </Text>
                }
            />
        </ScrollView>
            <View style ={styles.footer}>
                <TouchableOpacity style ={styles.footerButton} onPress = { () => navigate("ValveSearchScreen")}>
                    <Text style ={styles.footerButtonText}>SEARCH</Text>
                </TouchableOpacity>
            </View>
    </ViewContainer>

    )
  }
}
7
  • The code works fine for me. You must have an error somewhere else. Commented Jun 28, 2018 at 14:16
  • It was working fine for me too a few days ago but for some reason I get this error that says there is an unhanded promise rejection Commented Jun 28, 2018 at 14:18
  • 2
    Yeah, that has to do with other code where you are using a promise. Commented Jun 28, 2018 at 14:18
  • 1
    Now we have two different errors and both are impossible with the code shown... Please add a minimal, complete and verifiable example which shows the actual problem. Commented Jun 28, 2018 at 14:18
  • @paulgio: Suggesting you to setup the code at snack.expo.io if possible Commented Jun 28, 2018 at 14:24

1 Answer 1

13

The problem was that it was searching for a property within the array object called includes. Obviously it could not find it so it was giving me the warning that the property did not exist. To fix this I changed the line to

let filteredData = data.filter(x => String(x.approval).includes(approvalVariable));

I hope this helps somebody else out in the future and you don't spend a week trying the figure it out with no help like I did.

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

1 Comment

Been stuck on the same kind of error. But instead of having an error I was having a loop of death. As soon as I added the String(x.variable).includes all was fine! Thank you for the post with the answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.