selecting a particular index from array of objects

Question

i am doing an axios call and the data i receive is array of objects from the backend inside each of which contains a value called result(format - result:"Hello"). There is a button which when clicked should go to the particular index and fetch the value of result specified and pass it . Not sure how exactly to accomplish this .

componentDidMount(){
let payload = this.props.location.state
axios.post(`http://localhost:8200/service/${this.service_name}/requests`,payload)
  .then( response=>{
    console.log(response.data.methods)
    this.setState({
      methods:response.data.methods,
      trace:response.data.methods[0].result  
      // Here above i have written ,but it only fetches from index[0] statically , 
        i want it to select the result of the particular button i press. 
    });
  })
 }
 playitHandler(){
  let payload = {
  "service_name":this.service_name,
  "trace_id":this.state.trace
  }
 }
 <button className="btn btn-primary" onClick={()=>this.playitHandler()}>Display</button>

Tried passing index to ComponentDidMount(){} , i guess we cant pass it there , since it threw an error .

Jolly · Accepted Answer · 2019-03-05 09:44:03Z

1

When the fetch must be accomplished, exactly? Because, if you perform it when the page is loaded, then you can't retrieve specific data when you press a button. As far as I can see it, you have two possibilities:

Make a retrieveIndexData() function, which takes in input the click event on a button. Inside this function you run the axios call and then you save the data in the index using parseInt(ev.target.value). Though, I don't think this would be the best practice;
You add a property selectedIndex in the state, and, when you click an a button, you save the relative index in that property. Instead, in the axios call you save ALL the indexes. Then, you can work on the data you have selected clicking on a button using this.state.trace[this.state.selectedIndex];

EDIT: Let me explain better the second point. In the state you have the property response.data.methods in which you save all the elements of the methods array, including the one you want to save in the trace property of the state.

Now, since you would just create redundancy in the state, in that setState I would write only: this.setState({ methods: response.data.methods }). You have all you need now in the state!

Finally, I supposed that the button element you show it's just a "0 Button", that if you press, you want the first method. So I guessed you also have a second Button that you consider the second element and so on. If that's correct, than I should expect something like this:

<button className="btn btn-primary" onClick={() => this.playitHandler(0)}Display 0</button>
<button className="btn btn-primary" onClick={() => this.playitHandler(1)}Display 1</button>
...
<button className="btn btn-primary" onClick={() => this.playitHandler(100)}Display 100</button>

Supposed I'm right, then in playitHandler() you can just browse this.state.methods to retrieve what you want:

playitHandler(methodIndex) {
    let payload = {
        "service_name": this.service_name,
        "trace_id": this.state.methods[methodIndex]
    }
}

Is it more clear? I avoided the use of a selectedIndex property in the state in this example, though, I think this way is even more simpler.

edited Mar 5, 2019 at 9:44

answered Mar 5, 2019 at 8:15

Jolly

1,7883 gold badges22 silver badges46 bronze badges

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

2 Comments

nishant Over a year ago

sorry , didnt understand how exactly to save all indexes in selectedIndex . did you mean like this - selectedIndex:response.data.methods[i] ?

Jolly Over a year ago

Sorry, I try to explain better! Let me edit the comment here above.

Collectives™ on Stack Overflow

selecting a particular index from array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related