How to get node js response result in react front end

Question

I'm new in react , node and express. I have make a front end called home.js. Inside home.js, i got a code to call API in node js using axios, and then the node js will return the result from query DB. How i can use the result in front end that is sent from node js. I have already put the response in const data, but i can't used it for the const list.

Here is code in Front End (Home.js)

  axios.get("http://localhost:3001/process", {
     }).then(function(response) {
      const data = response;
    }).catch(error => console.log(error)) 

const list = [
        {
          img: ava1,
          Title: data[0].month,
          bud: "Rp 8,2 M",
          progress: <Progress percent={60} size="small" />,
          member: (
            <div className="avatar-group mt-2">
              <Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
              </Tooltip>
              {/*<Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team2} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Alexander Smith">
                <img className="tootip-img" src={team3} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Jessica Doe">
                <img className="tootip-img" src={team4} alt="" />
          </Tooltip>*/}
            </div>
          ),
        },
        {
          img: ava2,
          Title: data[1].month,
          bud: "$2,5 M",
          progress: <Progress percent={10} size="small" />,
          member: (
            <div className="avatar-group mt-2">
             {/*} <Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
          </Tooltip>*/}
              <Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team2} alt="" />
              </Tooltip>
            </div>
          ),
        },
        {
          img: ava3,
          Title: data[2].month,
          bud: "Rp 12.5 M",
          progress: <Progress percent={100} size="small" status="active" />,
          member: (
            <div className="avatar-group mt-2">
              {/*<Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team1} alt="" />
          </Tooltip>*/}
              <Tooltip placement="bottom" title="Alexander Smith">
                <img className="tootip-img" src={team3} alt="" />
          </Tooltip>
            </div>
          ),
        },
        {
          img: ava4,
          Title: data[3].month,
          bud: "Rp. 13,0 M",
          progress: <Progress percent={100} size="small" status="active" />,
          member: (
            <div className="avatar-group mt-2">
              {/*<Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team2} alt="" />
          </Tooltip>*/}
              <Tooltip placement="bottom" title="Jessica Doe">
                <img className="tootip-img" src={team4} alt="" />
          </Tooltip>
            </div>
          ),
        },
        {
          img: ava5,
          Title: data[4].month,
          bud: "Rp. 8,9 M",
          progress: <Progress percent={80} size="small" />,
          member: (
            <div className="avatar-group mt-2">
              <Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team2} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Alexander Smith">
                <img className="tootip-img" src={team3} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Jessica Doe">
                <img className="tootip-img" src={team4} alt="" />
              </Tooltip>
            </div>
          ),
        },
    
        {
          img: ava6,
          Title: data[5].month,
          bud: "Rp. 15,3 M",
          progress: (
            <Progress
              percent={100}
              size="small"
              status="active"
             // status="exception"
              //format={() => "Cancel"}
            />
          ),
          member: (
            <div className="avatar-group mt-2">
              <Tooltip placement="bottom" title="Ryan Tompson">
                <img className="tootip-img" src={team1} alt="" />
              </Tooltip>
              <Tooltip placement="bottom" title="Romina Hadid">
                <img className="tootip-img" src={team2} alt="" />
              </Tooltip>
            </div>
          ),
        },
      ];

Here is the code in back end (index.js)

app.get('/process/', function (req, res) {
    db.query(
        "select * from process order by id desc LIMIT 1 ",
        [],
        (err,result) => {
            if(err) {
                res.send({err:err});
            }

            if(result.length > 0) {
                axios.get("http://localhost:3001/echart/"+result[0].id, {
                    }).then(function(response) {
                const status = response.status;
                }).catch(error => console.log(error))
                //console.log(result[0].id);
                        }
            else
            {
                res.send('None shall pass process');      
            }
        }
    )
  });

app.get('/echart/:seq_no', function (req, res) {
    const seq_no = req.params.seq_no;
    db.query(
        "SELECT * from sales1 where seq_no = ? ",
        [seq_no],
        (err,result,fields) => {
            if(err) {
                res.send({err:err});
            }

            if(result.length > 0) {
                res.send(result.response);
                console.log('yes');
            }
            else
            {
                res.status(400);
                res.send('None shall pass echart');
               
            }
        }
    )
  });

What do you mean you "can't use it"? You assign is to a variable and then you have … a comment. What do you want to do with it? What have you tried in order to achieve that? — Quentin, May 19 '22 at 08:24
when i used the data, it gives me error "'data' is not defined no-undef" — Daily Food ASMR, May 19 '22 at 08:29
The code you've show us doesn't use `data`. It assigns a value to `data`. Then there is a comment. Then the function ends. That's it. You need to provide a [mcve]. — Quentin, May 19 '22 at 08:31
sorry, my mistake. I want to use the data value in the same page . Here is the code const list = [ { img: ava1, Title: data[0].month, , and it gives me data is not defined. — Daily Food ASMR, May 19 '22 at 08:41
And where is that code? Is it where you have `//redirect logic`? **Provide a [mcve]**! — Quentin, May 19 '22 at 08:43
You've added a third code section. Where is that code? Is it where you have `//redirect logic` in the first code block? — Quentin, May 19 '22 at 08:50
i've fixed the code section. The first and the third section code is actually is in the same page. (Home.js) — Daily Food ASMR, May 19 '22 at 08:56
Re edit: You've defined data inside a function, so it isn't going to be available outside that function. And you're trying to use it before that function has been called, so even if it was available, it wouldn't be defined. — Quentin, May 19 '22 at 08:56
See https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Quentin, May 19 '22 at 08:57
And https://www.geeksforgeeks.org/where-in-a-react-component-should-you-make-an-ajax-request/ — Quentin, May 19 '22 at 08:58
oh okay, let me read and learn the link that you have given to me. Thank you — Daily Food ASMR, May 19 '22 at 09:06

How to get node js response result in react front end

0 Answers0