How to search from API based on text inputs in REACT

Question

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... please help me..

import React, { Component } from 'react';

class Search extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:'',
            value2:''                                                                                                           
        };
    this.handleChange=this.handleChange.bind(this);
    this.crimeChange=this.crimeChange.bind(this);
    this.search=this.search.bind(this);

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

    crimeChange(event) {
        this.setState({value2:event.target.value});
    }
    search(){
        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(json =>console.log('details',json));
    }

    render() {
        return (
            <div>
                <form >
                    <div className="row">
                        <div className="col-md-4">

                            <select value={this.state.value} onChange={this.handleChange} className="form-control" placeholder="police station">
                            <option selected>Choose...</option>
                                <option value="areacode">Areacode</option>
                                <option value="changaramkulam">Changaramkulam</option>
                                <option value="edakkara">Edakkara</option>
                                <option value="edavanna">Edavanna</option>
                                <option value="kadampuzha">Kadampuzha</option>
                                <option value="kalikavu">Kalikavu</option>
                                <option value="kalpakanchery">Kalpakanchery</option>
                                <option value="karipur">Karipur</option>
                                <option value="karuvarakundu">Karuvarakundu</option>
                                <option value="kolathur">Kolathur</option>
                                <option value="kondotty">Kondotty</option>
                                <option value="kottakkal">Kottakkal</option>
                                <option value="kuttippuram">Kuttippuram</option>
                                <option value="malappuram">Malappuram</option>
                                <option value="manjeri">Manjeri</option>
                                <option value="mankada">Mankada</option>
                                <option value="melattur">Melattur</option>
                                <option value="nilambur">Nilambur</option>
                                <option value="pandikkad">Pandikkad</option>
                                <option value="parapanangadi">Parapanangadi</option>
                                <option value="perinthalmanna">Perinthalmanna</option>
                                <option value="perumpadappu">Perumpadappu</option>
                                <option value="ponnani">Ponnani</option>
                                <option value="pookottumpadam">Pookkottumpadam</option>
                                <option value="pothukkal">Pothukkal</option>
                                <option value="thanur">Thanur</option>
                                <option value="thenhipalam">Thenhipalam</option>
                                <option value="thirurangadi">Thirurangadi</option>
                                <option value="tirur">Tirur</option>
                                <option value="valanchery">Valanchery</option>
                                <option value="vazhakad">Vazhakad</option>
                                <option value="vazhikadavu">Vazhikadavu</option>
                                <option value="vengara">Vengara</option>
                                <option value="vandoor">Vandoor</option>
                            </select>
                        </div>
                        <div className="col-md-4">
                            <div className="form-group is-empty">
                                <input type="number" placeholder="Crime Number" className="form-control" value={this.state.value2} onChange={this.crimeChange}/>
                                <span className="material-input"></span></div>
                        </div>

                        <div className="col-md-4">
                            <button type="button" 
                            className="btn btn-primary btn-block"
                            onClick={()=> this.search()}
                            >Search</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}
export default Search;

this my api data

// 20180312234820 // https://api.myjson.com/bins/e69i9/

[
  {
    "id": 1,
    "police station": "perinthalmanna",
    "crime number": 97,
    "details": {
      "image": "http: //asianetindia.com/wp-content/uploads/2013/09/jayanandan.jpg",
      "name": "john",
      "section of law": "IPC200",
      "type of person": "missed"
    }
  },
  {
    "id": 2,
    "police station": "tirur",
    "crime number": 98,
    "details": {
      "image": "https: //themmindset.files.wordpress.com/2010/10/chota-shakeel.jpg",
      "name": "mohan",
      "section of law": "Ipc407",
      "type of person": "suspects"
    }
  },
  {
    "id": 3,
    "police station3": "ponnani",
    "crime number": 99,
    "details": {
      "image": "https://themmindset.files.wordpress.com/2010/10/mukhtar_ansari.jpg",
      "name": "rooney",
      "section of law": "ipc207",
      "type of person": "criminals"
    }
  },
  {
    "id": 4,
    "police station": "kolathur",
    "crime number": 100,
    "details": {
      "image": "https://themmindset.files.wordpress.com/2011/04/abu_salem.jpg",
      "name": "tipper vasu",
      "section of law": "Ipc408",
      "type of person": "missed"
    }
  },
  {
    "id": 5,
    "police station": "kottakkal",
    "crime number": 101,
    "details": {
      "image": "https://themmindset.files.wordpress.com/2011/04/abu_salem.jpg",
      "name": "killer",
      "section of law": "Ipc402",
      "type of person": "suspected"
    }
  }
]

the concept is ... if i select a policestation and crime number,then will get details based on that from API...

please help me..

Harsh Makadia · Accepted Answer · 2018-03-17 13:20:52Z

1

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

class TestJS extends React.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 criteria
      return array.filter((item) => {
          // dynamically validate all filter criteria
          return 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 >
                  <div className="row">
                      <div className="col-md-4">

                          <select value={this.state.value} onChange={this.handleChange} className="form-control" placeholder="police station">
                              <option selected>Choose...</option>
                              <option value="areacode">Areacode</option>
                              <option value="changaramkulam">Changaramkulam</option>
                              <option value="edakkara">Edakkara</option>
                              <option value="edavanna">Edavanna</option>
                              <option value="kadampuzha">Kadampuzha</option>
                              <option value="kalikavu">Kalikavu</option>
                              <option value="kalpakanchery">Kalpakanchery</option>
                              <option value="karipur">Karipur</option>
                              <option value="karuvarakundu">Karuvarakundu</option>
                              <option value="kolathur">Kolathur</option>
                              <option value="kondotty">Kondotty</option>
                              <option value="kottakkal">Kottakkal</option>
                              <option value="kuttippuram">Kuttippuram</option>
                              <option value="malappuram">Malappuram</option>
                              <option value="manjeri">Manjeri</option>
                              <option value="mankada">Mankada</option>
                              <option value="melattur">Melattur</option>
                              <option value="nilambur">Nilambur</option>
                              <option value="pandikkad">Pandikkad</option>
                              <option value="parapanangadi">Parapanangadi</option>
                              <option value="perinthalmanna">Perinthalmanna</option>
                              <option value="perumpadappu">Perumpadappu</option>
                              <option value="ponnani">Ponnani</option>
                              <option value="pookottumpadam">Pookkottumpadam</option>
                              <option value="pothukkal">Pothukkal</option>
                              <option value="thanur">Thanur</option>
                              <option value="thenhipalam">Thenhipalam</option>
                              <option value="thirurangadi">Thirurangadi</option>
                              <option value="tirur">Tirur</option>
                              <option value="valanchery">Valanchery</option>
                              <option value="vazhakad">Vazhakad</option>
                              <option value="vazhikadavu">Vazhikadavu</option>
                              <option value="vengara">Vengara</option>
                              <option value="vandoor">Vandoor</option>
                          </select>
                      </div>
                      <div className="col-md-4">
                          <div className="form-group is-empty">
                              <input type="number" placeholder="Crime Number" className="form-control" value={this.state.value2} onChange={this.crimeChange}/>
                              <span className="material-input"></span></div>
                      </div>

                      <div className="col-md-4">
                          <button type="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>
      )
  }
}
export default TestJS;

edited Mar 17, 2018 at 13:20

answered Mar 13, 2018 at 9:17

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

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

8 Comments

kasim521 Over a year ago

error:{ "message": "Uncaught SyntaxError: Unexpected token <", "filename": "stacksnippets.net/js", "lineno": 63, "colno": 13 }

Harsh Makadia Over a year ago

@kasim521 It will not run here you will have to run it with reactjs on your machine may be. It’s working and I have tested it. Please use some environment where you have reactjs in place.

Harsh Makadia Over a year ago

@kasim521 - If your issue is resolved please mark the answer as verified so it will help other people facing the same issue.

kasim521 Over a year ago

great sir..i have one question.If i enter irrelevant data in text input(data which not includes in API) then how to show not found.

kasim521 Over a year ago

please help me sir..i can show the data in the console.How to show the fetched data on the web page.

|

Collectives™ on Stack Overflow

How to search from API based on text inputs in REACT

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related