The code below is supposed to take in data from Firebase as an array and then filter it depending on if values include a string. An example of the data is seen below:
data = [
{
"number": 1,
"waterCapacity": 50,
"diameter": 229,
"workingPressure": 200,
"testPressure": 300,
"h2Compatible": "no",
"designStandard": "ISO 9809-1",
"approval": "TPED",
"inletThread": "25E",
"manufacturer": "Worthington",
"specificationNumber": 19313614,
"comments": "rev 16.09.2014",
"country": "cylinder"
},
{
"number": 2,
"waterCapacity": 50,
"diameter": 229,
"workingPressure": 200,
"testPressure": 300,
"h2Compatible": "no",
"designStandard": "ISO 9809-1",
"approval": "TPED",
"inletThread": "25E",
"manufacturer": "Vitkovice",
"specificationNumber": 19313601,
"country": "cylinder"
}
]
My code for retrieving the data and filtering it can been seen below:
import React, { Component } from 'react'; import {
Platform,
StyleSheet,
Text,
TextInput,
View,
Button,
Image,
TouchableOpacity,
FlatList,
ScrollView,
} from 'react-native';
import StickyHeaderFooterScrollView from 'react-native-sticky-header-footer-scroll-view'
import Statusbar from '/Users/paulg/Desktop/LindeProject/LindeProject/components/Statusbar.js'
import ViewContainer from '/Users/paulg/Desktop/LindeProject/LindeProject/components/ViewContainer.js'
import {styles} from '/Users/paulg/Desktop/LindeProject/LindeProject/authentication/styles.js'
import {firebaseRef} from '/Users/paulg/Desktop/LindeProject/LindeProject/services/Firebase.js'
import firebase from 'firebase'
import SearchCylinder from '/Users/paulg/Desktop/LindeProject/LindeProject/Pages/searchCylinder.js'
import {Table, Row, Rows} from 'react-native-table-component'
export default class valveDB extends Component{
static navigationOptions = {
title: 'Cylinder Database',
};
constructor(props) {
super(props)
this.state = {
data: [],
countryArray: '',
region:'',
countrySelected: ''
}
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
var 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
var fireBaseResponse = firebase.database().ref().orderByChild("country").equalTo("cylinder");
fireBaseResponse.once('value').then(snapshot => {
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("TP"))
}
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//////////////////
if(data1.length == 0){
this.setState({countrySelected: "No Results Were Found"}) }
data1 = data1.slice(0, 50);
this.setState({data: data1});
});
}
render(){
var {navigate} = this.props.navigation;
let {params} = this.props.navigation.state;
return(
<ViewContainer>
<ScrollView maximumZoomScale = {5} scrollEnabled = {true} minimumZoomScale = {1} zoomScale = {.8}>
<FlatList
data = {this.state.data}
keyExtractor = {(x, i) => i.toString()}
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>
}
/>
<Text style = {styles.countryErrorText}>{this.state.countrySelected}</Text>
</ScrollView>
</ViewContainer>
)
}
}
The problem I am having is when I try to do x.approval.includes("TP"). When I do that I get the warning message seen below:
When I change it to lets say: x.approval == "TPED" it works fine so I am not exactly sure where to problem is.
I've been stuck on this for a few days so any help would be greatly appreciated.
x.approval.contains("TP")x.approvalis no populated as expected. Addconsole.log(x)so you can see the object in the console and check the values.console.log(x);and it gave you that error? Nothing else changed?