How to get specific data out of an API using the URL

Question

This is probably an easy fix however I'm unable to see the solution. My project that I've been taking way too much time on is finally starting to close up, however I'm towards the very end and I'm having problems with the API I'm working with.

I'm expecting that whenever I use my match in HeroDetail, I will be able to use that ID to locate the hero's who data I want to display whenever you click on it. My other components work exactly how I believe they should. They route me to my HeroDetail page with an ID that is specific to a hero I click on.

The problem I'm having is, with this API, I do not know how to use that ID to pull the heroStats for that specific ID out.

I thought I might be able to add a little params at the end of the URL like ?_id=${} but that was unsuccessful. The API URL is https://docs.opendota.com/#section/Introduction if you want to read a little on it as well. I haven't been able to find anything that can help me.

import React, {useState, useEffect} from "react";
import "./App.css";


function HeroDetail({match}) {

    useEffect(() => {
        fetchHero();
        console.log(match)
    },[]);

    const [item, setItem] = useState([]);

    const fetchHero = async () => {
        const fetchHero = await fetch(`https://api.opendota.com/api/heroStats}`);
        const item = await fetchHero.json();
        setItem(item);
        console.log(item)
    };
    return(
        <div>
           <h1>{item.id} </h1>
        </div>
    );
}

export default HeroDetail;

Can you try const hero = item.find(h => h.id === /* the id of the hero you want */) — Tim
– Tim, Commented Mar 3, 2020 at 5:19
const hero = item.find(h => h.id === match.params.id) gives me undefined — 4156
– 4156, Commented Mar 3, 2020 at 5:23
Is there a hero with the id match.params.id in the data you get from the fetch()? — Tim
– Tim, Commented Mar 3, 2020 at 5:25
If you have copy pasted the above code snippet from your production code, it might be worth noting that there is a trailing '}' in your fetch URL — Nitin
– Nitin, Commented Mar 3, 2020 at 5:26
Tim's approach should give you the proper hero. Could you confirm that the type of match.params.id is indeed a Number and not a string? — Nitin
– Nitin, Commented Mar 3, 2020 at 5:31

Tim · Accepted Answer · 2020-03-03 05:36:55Z

2

I threw together a small CodeSandBox that has a working example of what I was talking about in the OP comments.

https://codesandbox.io/s/silent-leftpad-cbjb3?fontsize=14&hidenavigation=1&theme=dark

answered Mar 3, 2020 at 5:36

Tim

3705 silver badges9 bronze badges

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

10 Comments

4156 Over a year ago

const heroId = match.params.id;         const hero = item.find(element => element.id === heroId);         console.log(hero);

still gives me undefined

Tim Over a year ago

Is match.params.id undefined?

4156 Over a year ago

No, I have another component that maps all the heroes and the key is their id, once I click on the hero I want to choose it adds that ID to the url and that's what match.params.id returns. So in this case I selected Bloodseeker and 4 was returned

4156 Over a year ago

github.com/kevin6767/api_search If you want to check everything out

Tim Over a year ago

There's no package.json?

|

wtlin1228 · Accepted Answer · 2020-03-03 05:30:52Z

0

Opendota doesn't provide API for retrieving HeroStat by id. But you can fetch the HeroStats only once. Store them into your store(if you are using Redux). Use filter of find to get the exact heroStat with your id. Furthermore, you can use reselect to create memoized selectors.

answered Mar 3, 2020 at 5:30

wtlin1228

734 bronze badges

Comments

imThamizhselvan · Accepted Answer · 2020-03-03 05:33:44Z

-1

As the API document, we can see that it will give a array of object.

[ { "id": 0, "name": "string", "localized_name": "string", "img": "string", "icon": "string", "pro_win": 0, "pro_pick": 0, "hero_id": 0, "pro_ban": 0, "1_pick": 0, "1_win": 0, "2_pick": 0, "2_win": 0, "3_pick": 0, "3_win": 0, "4_pick": 0, "4_win": 0, "5_pick": 0, "5_win": 0, "6_pick": 0, "6_win": 0, "7_pick": 0, "7_win": 0 } ]

So, if you want to access the id then in your case, item[0].id will work, or you can use find

const found = item.find(element => element.id == 'whatever id');

console.log(found);

answered Mar 3, 2020 at 5:33

imThamizhselvan

2331 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to get specific data out of an API using the URL

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related