How to assign a value to a variable declared outside the scope

Question

I need to assign the value from the axios call to the variable outside it.Im using react.

 var starthaltname="sdsdsd";

 Axios.get('http://localhost:9090/route/getHalt?routeId=3').then(function (starthalt) {
      console.log(starthalt.data.name);
      return starthalt.data;
}.bind(this));

I can console log the output i want, but when assigned to the "starthaltname" variable, the variable is still has undefined as the value. Any Suggestions please?

here is the whole rendering part of the code. what i want is to populate the values inside the table.

render() {

        let table;
        let starthaltname;
        let endhaltname;
        let startdate;
        let starttime;
        let endtime;

        if (this.state.journeylist.length !== 0) {
            console.log("data available");
            console.log(this.state.journeylist.length);

            table = (
                <table className="table table-hover table-active">
                    <tbody>
                        {this.state.journeylist.map((journey, j) => {
                            console.log(journey);

                            var starthaltname="sdsdsd";

                            Axios.get('http://localhost:9090/route/getHalt?routeId='+journey.busroute+'&haltIndex='+journey.jstartloc).then(function (starthalt) {
                                console.log(starthalt.data);
                                console.log(starthalt.data.name);
                                return starthalt.data;
                            }.bind(this)).then(function(starthaltresponse){
                                Axios.get('http://localhost:9090/route/getHalt?routeId='+journey.busroute+'&haltIndex='+journey.jendloc).then(function (endhalt) {
                                    console.log(endhalt.data);
                                    endhaltname=endhalt.data.name;
                                    return endhalt.data;
                                }.bind(this)).then(function(endhaltresponse){
                                    var  sdate =  new Date(journey.jstarttime);                            
                                    startdate = sdate.toDateString();
                                    starttime = sdate.toLocaleTimeString();
                                    var  edate =  new Date(journey.jendtime);                            
                                    endtime = edate.toLocaleTimeString();
                                    console.log(starttime);
                                }.bind(this));
                            }.bind(this));
                            console.log(starthaltname);
                            return (
                                <tr key={j}>
                                    <td className="text-left" id={journey.journeyId} data-toggle="modal" data-target="#viewTicketModal" >{
                                        <div>
                                            <p className="font-weight-bold text-dark">{startdate}</p>
                                            <hr />
                                            <ul>
                                                <li className="listFrom text-success">{starthaltname}</li>
                                                <p className="lbltime font-italic">{starttime}</p>
                                            </ul>
                                            <ul>
                                                <li className="listFrom text-active">{endhaltname}</li>
                                                <p className="lbltime font-italic">{endtime}</p>
                                            </ul>
                                            <div className="text-right bg-secondary">
                                                <p className="lbljfare text-white">Rs. {journey.jfare}</p>
                                            </div>
                                        </div>
                                    }
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            );
        }
        else {
            table = "No data available";
        }


        return (
            <div>
                {table}
            </div>
        );


    }

The assignment, which you aren't showing, will work just fine. However since that API call is asynchronous, you've probably logged `starthaltname` *before* changing it. But, since you're using React, I'm going to assume you're going to run `this.setState()` in your `then()` function, which will work just fine. — , Oct 07 '18 at 22:56

Tarek Essam · Answer 1 · 2018-10-08T00:46:37.513

add another property in the state finalJournyList which will contain the request result and initialize with an empty array.

state = {
finalJournyList: []

}

componentDidMount() {
const { journeylist } = this.state;
const requestPromises = journeylist.map(async (journey, i) => {
    const { data: { name: starthaltname } } = await Axios.get('http://localhost:9090/route/getHalt?routeId=' + journey.busroute + '&haltIndex=' + journey.jstartloc);
    const { data: { name: endhaltname } } = await Axios.get('http://localhost:9090/route/getHalt?routeId=' + journey.busroute + '&haltIndex=' + journey.jendloc);
    const sdate = new Date(journey.jstarttime);
    const edate = new Date(journey.jendtime);
    return Promise.resolve({
        starthaltname,
        endhaltname,
        startdate: sdate.toDateString(),
        starttime: sdate.toLocaleTimeString(),
        endtime: edate.toLocaleTimeString(),
        jfare: journey.jfare,
        journeyId: journey.journeyId
    });
});

Promise.all(requestPromises)
    .then((result) => this.setSate({ finalJournyList: result }))
}

render() {
const { journeylist, finalJournyList } = this.state;
if (!finalJournyList.length) {
    return <div>No data available</div>;
}
return <table className="table table-hover table-active">
    <tbody>
        {this.state.finalJournyList.map((journey, j) => {
            return (
                <tr key={j}>
                    <td className="text-left" id={journey.journeyId} data-toggle="modal" data-target="#viewTicketModal" >
                        <div>
                            <p className="font-weight-bold text-dark">{journey.startdate}</p>
                            <hr />
                            <ul>
                                <li className="listFrom text-success">{journey.starthaltname}</li>
                                <p className="lbltime font-italic">{journey.starttime}</p>
                            </ul>
                            <ul>
                                <li className="listFrom text-active">{journey.endhaltname}</li>
                                <p className="lbltime font-italic">{journey.endtime}</p>
                            </ul>
                            <div className="text-right bg-secondary">
                                <p className="lbljfare text-white">Rs. {journey.jfare}</p>
                            </div>
                        </div>                        
                    </td>
                </tr>
            );
        })}
    </tbody>
</table>
}

Which function? There is no function in the question suitable — Jaromanda X, Oct 07 '18 at 23:13

How to assign a value to a variable declared outside the scope

1 Answers1