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
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointshow 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 ?
4 Answers
Rogier Nitschelm
iOS Development Techdegree Student 5,461 PointsI 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;
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointsfor 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
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 ?
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 PointsI try to add extra functionalities to the app
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointshere is the bin
Rogier Nitschelm
iOS Development Techdegree Student 5,461 PointsI 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.
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointsif I find a good solution I will post it
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 PointsEliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointsplease help