2

2020欧洲杯时间表I am trying to build out a table in React that is populated from Firestore, but want to only bring in data that matches with a user's predefined criteria (stored in another collection). This table for instance would show a list of applications that displays each application's City, Credit Score, Address, etc. Where the user can build out filters to return applications with a credit score > 650 and city == New York.

I am passing this in from a parent as this.props.rules2020欧洲杯时间表 which contains 3 columns corresponding with the where search criteria, for instance ['creditScore', '>',650].

onQueryUpdate is my attempt at building out that dynamic query from the rules matrix but to no avail. What would be the correct way to build out this dynamic querying based off multiple user defined criteria?

2020欧洲杯时间表Many thanks

class SubmissionsFiltered extends Component {
  constructor(props) {
    super(props);
    this.ref = firebase.db.collection('Applications').where('companyID','==','');
    this.unsubscribe = null;
    this.state = {
      applications: [],
      query:""
    };
  }

  onQueryUpdate = () => {
    let query = this.ref;
    if(this.props.rules.length > 0) {
      let i = 0;
      while(i < this.props.rules.length){
        query = query.where(this.props.rules[i][0],this.props.rules[i][1],this.props.rules[i][2])
      };
    };
    this.setState({
      query
    });
  }



  onCollectionUpdate = (querySnapshot) => {
    const applications = [];
    querySnapshot.forEach((doc) => {
      const { address,city,postalCode,creditScore} = doc.data();
      applications.push({
        key: doc.id,
        doc, // DocumentSnapshot
        address,
        city,
        postalCode,
        creditScore,
      });
    });
    this.setState({
      applications
   });
  }

  componentDidMount() {
    this.unsubscribe = this.state.query.onSnapshot(this.onCollectionUpdate);

  }
render() {
    return (
      <>
        <div className="container-sm">
          <div className="panel panel-default">
            <div className="panel-heading">
              <h3 className="panel-title">
                Applications
              </h3>
            </div>
            <div className="panel-body">
              <table className="table table-stripe">
                <thead>
                  <tr>
                    <th>Address</th>
                    <th>City</th>
                    <th>Credit Score</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.applications.map(application =>
                    <tr>
                      <td><Link to={`/app/${application.key}`}>{application.address}</Link></td>
                      <td>{application.city}</td>
                      <td>{application.creditScore}</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default SubmissionsFiltered;
  • I'll point out that we can't see your data, and we can't see all the values of your variables, which means we can't see what your query would actually return. Please edit the question to be more clear about specific contents of documents that you expect to see. – Doug Stevenson May 23 at 23:01
  • Thanks Doug - I updated the first paragraph to hopefully convey that more clearly. It's a table full of applications, returning in this example Address, City and Credit Score for each application. The query would be able to look at City and Credit Score (among other factors I left off for simplicity sake). – Cam Howe May 23 at 23:14
  • We still can't see the specific document data, nor the specific query that you're trying to perform. There are still a lot of variables in the code that we can't see and map to the data in the documents. In other words: it's still impossible to see what's going on here. – Doug Stevenson May 23 at 23:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy2020欧洲杯时间表

Browse other questions tagged or ask your own question.