Need to get data from (laravel api) using fetch then parse it on to another function

Question

I am a beginner at React. I fetch data in an application using (Laravel API) and manipulate it. But the data is only available within the function scope. How can I retrieve it outside the function and using it somewhere else? How it will be possible?

//Function to get data from API
var userId = localStorage.getItem("userid")
const OrderStoryIds = fetch(`${"/api/v1/order?user_id=" + userId}`,{
        headers:{
            Authorization: "bearer " + localStorage.getItem("token")
    }}).then((response) => response.json()).then((order) => {
        var record={};
        if(order !== null) {
            order.forEach(function (items, index) {
                record[items.story_id]= items.status    
            });
        }
    return record
});
const printOrderStoryId = (id) => {
    OrderStoryIds.then((result) => {
        console.log(result[id]);
        var isAlreadyPurchased = result[id] === 1? true: false;
        console.log(isAlreadyPurchased);
        return isAlreadyPurchased;
});
};

const StoriesShow = (props, { key }) => {
        return (
            <div className="col-md-4" key={key}>
//This is where I want to call the above function and use the result for further use/something
            <div className="image-prinze">
                <img src={require('../../../../../public/images/frontend/' + props.image)} alt="" />
                {printOrderStoryId(props.id)? (
                   <div className="button-prinze">
                        <a href={'/storydetail/' + props.id} className="btn btn-prinze">Mehr erfahren</a>
                </div>): 
                (<div className="button-prinze">
                <span className="btn btn-prinze">already purchased</span>
        </div>)}
            </div>
        </div>
    );
}

shaedrich · Accepted Answer · 2021-06-17 15:30:34Z

2

fetch() is asynchronous so you can't simply return the variable outside of the function scope. However, there are workarounds:

var myVar = null;

fetch('http://example.com').then(function(data) {
    myVar = data.myVar
});

// your render should run when variables change
render() {
    return (myVar ?? 'not fetched yet');
}

Make sure, that (as shown above) at initial render the value of myVar is null and is only filled on subsequent calls. So your render() method must not rely on myVar having a value.

edited Jun 17, 2021 at 15:30

answered Jun 17, 2021 at 14:31

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

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

Comments

Caro Pérez · Accepted Answer · 2022-06-14 21:51:51Z

0

yourMethod = (event) => {
      event.preventDefault();
      fetch(`/route_to_your_method_api/${id}`)
        .then((resp) => resp.json())
        .then(function(data) {
          //posible loading
        })
        .catch(function(error) {
          console.log(error);
        });
      }

answered Jun 14, 2022 at 21:51

Caro Pérez

5384 silver badges6 bronze badges

Collectives™ on Stack Overflow

Need to get data from (laravel api) using fetch then parse it on to another function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related