How To Search From Api Based On Text Inputs In React

when i search from API based on keyword,i get all details in API. i need get only details based on the text input from search.. i dont know the problem is in my API or My code... p

Solution 1:

Here is the working code that allows multiple filtering of data from the response.The result is shown in the console.

classTestJSextendsReact.Component {
  constructor(props) {
      super(props);
      this.state={
          value:'',
          value2:'',
          resultFound : false,
          filteredData : ""
      };
      this.handleChange=this.handleChange.bind(this);
      this.crimeChange=this.crimeChange.bind(this);
      this.search=this.search.bind(this);
      this.multiFilter=this.multiFilter.bind(this);
  }

   multiFilter(array, filters) {
      const filterKeys = Object.keys(filters);
      // filters all elements passing the criteriareturn array.filter((item) => {
          // dynamically validate all filter criteriareturn filterKeys.every(key => !!~filters[key].indexOf(item[key]));
      });
  }

  handleChange(event){
      this.setState({value:event.target.value});
  }

  crimeChange(event) {
      this.setState({value2:event.target.value});
  }
  search(){
      let _this = this;
      let {value, value2 } =this.state;
      const url=`https://api.myjson.com/bins/e69i9/?i=${value}&q=${value2}`;

      fetch(url,{
          method:'GET'
      }).then(response => response.json())
          .then(function(data){
              console.log(data, value, value2);
              let filters = {
                  "police station" : [value],
                  "crime number" : [parseInt(value2)]
              };
              let  filtered = _this.multiFilter(data, filters);
              console.log(filtered);
              if(filtered.length <= 0){
                _this.setState({resultFound : false})
              }
              else{
                _this.setState({filteredData : filtered, resultFound : true})
              }
          });
  }

  render() {
      return (
          <div><form ><divclassName="row"><divclassName="col-md-4"><selectvalue={this.state.value}onChange={this.handleChange}className="form-control"placeholder="police station"><optionselected>Choose...</option><optionvalue="areacode">Areacode</option><optionvalue="changaramkulam">Changaramkulam</option><optionvalue="edakkara">Edakkara</option><optionvalue="edavanna">Edavanna</option><optionvalue="kadampuzha">Kadampuzha</option><optionvalue="kalikavu">Kalikavu</option><optionvalue="kalpakanchery">Kalpakanchery</option><optionvalue="karipur">Karipur</option><optionvalue="karuvarakundu">Karuvarakundu</option><optionvalue="kolathur">Kolathur</option><optionvalue="kondotty">Kondotty</option><optionvalue="kottakkal">Kottakkal</option><optionvalue="kuttippuram">Kuttippuram</option><optionvalue="malappuram">Malappuram</option><optionvalue="manjeri">Manjeri</option><optionvalue="mankada">Mankada</option><optionvalue="melattur">Melattur</option><optionvalue="nilambur">Nilambur</option><optionvalue="pandikkad">Pandikkad</option><optionvalue="parapanangadi">Parapanangadi</option><optionvalue="perinthalmanna">Perinthalmanna</option><optionvalue="perumpadappu">Perumpadappu</option><optionvalue="ponnani">Ponnani</option><optionvalue="pookottumpadam">Pookkottumpadam</option><optionvalue="pothukkal">Pothukkal</option><optionvalue="thanur">Thanur</option><optionvalue="thenhipalam">Thenhipalam</option><optionvalue="thirurangadi">Thirurangadi</option><optionvalue="tirur">Tirur</option><optionvalue="valanchery">Valanchery</option><optionvalue="vazhakad">Vazhakad</option><optionvalue="vazhikadavu">Vazhikadavu</option><optionvalue="vengara">Vengara</option><optionvalue="vandoor">Vandoor</option></select></div><divclassName="col-md-4"><divclassName="form-group is-empty"><inputtype="number"placeholder="Crime Number"className="form-control"value={this.state.value2}onChange={this.crimeChange}/><spanclassName="material-input"></span></div></div><divclassName="col-md-4"><buttontype="button"className="btn btn-primary btn-block"onClick={()=> this.search()}
                          >Search</button></div>
                      {!this.state.resultFound ? <div> No Data Found!!</div> : 
                        JSON.stringify(this.state.filteredData)}
                  </div></form></div>
      )
  }
}
exportdefaultTestJS;