Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building a Search Feature

how can I display the data into the array without perform query and search dynamically by the name of the items ?

Hi there

How I can list the basic data of the items into the array - as for example names - without to do the query and how I can retrieve full details of an item when I perform the query based on an item it or item name to the API with react ?

please help

4 Answers

Rogier Nitschelm
seal-mask
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points

I do not entirely understand your question. Do you want to do a get-request to an API and display the response data in a list perhaps? If that is the case I made a snippet you could check out:

http://jsbin.com/hofonorola/1/edit?js,console,output

If it is not what you mean, please:

  • post a snippet of code;
  • and describe what you would like to render;

for example, in this course, we learn about the following structure

export default class App extends Component {

  constructor() {
    super();
    this.state ={
      planes:[]
    };
  } 


      componentDidMount() {

      }


//  WHAT I TRY IS TO DISPLAY HERE  A BASIC LIST OF THE PLANES (NAME + ID) ON PAGE WITHOUT TO HAVE TO SEARCH THEM BASED ON THE QUERY 


      performSearch= (query) => {


           return axios.get(`https://plane-api.herokuapp.com/api/v1/ships/`+query )
           .then(result => {
              this.setState({ planes: result.data });
              })      

          .catch(error => {
            console.log('Error fetching and parsing data', error);
          }); 

         }



 render() { 
    console.log(this.state.planes);

  //  const { id , image, name, passengers, tail, year }= this.this.state.planes;


    return (

      //to Do
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">Plane Search</h1>
                   <SearchForm onSearch={this.performSearch} />      
          </div>   
        </div>    
        <div className="main-content">
          {
            (this.state.loading)
             ? <p>Loading...</p>
             : <PlaneList data={this.stat.planes} />
          }   

        <PlaneDetail />

        </div>  

      </div>
    );
  }
}




          ```
Rogier Nitschelm
seal-mask
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points
   {
            (this.state.loading)
             ? <p>Loading...</p>
             : <PlaneList data={this.stat.planes} />  // this.stat -> this.state?
          } 

Your planelist is not receiving anything from the state, because there is a typo there.

Do you have a repository on github ?

I try to add extra functionalities to the app

Rogier Nitschelm
seal-mask
.a{fill-rule:evenodd;}techdegree
Rogier Nitschelm
iOS Development Techdegree Student 5,461 Points

I am still not entirely sure what you would like to do.

In the title you suggest that you want to dynamically search by name without querying the server? If by this you mean searching through all the items in an array on the client-side, then you can find an example of a client-side search in this repo I just made.

I was not able to query the heroku/planes api, so I couldn't write it using your api. Hence I used the JSON-placeholder-api.

  • ItemsList: It loads a list of posts when initially mounting.
  • when the input changes - it filters all the posts that are loaded based on the title of the post;

The repo: https://github.com/rnitschelm/items

If this is what you mean, you could easily transfer this to your own repo. If this is not what you mean, then some more information would be welcome.

if I find a good solution I will post it