Parsing fetched XML with react-xml-parser

Question

I am first fetching xml data from an external api in my backend and then trying to send that to the frontend.

Backend (server):

app.get("/api", (req, res) => {

   var request = require('request');

   var options = {
     'method': 'GET',
     'url': 'http://link',
     'headers': {
     }
   };

   request(options, function (error, response) {
     console.log("TEST1")
     console.log(response.body)
     if (error){
       console.log("TEST2")
       res.status(404).write("NO LUCK"); 
     } 
     console.log("TEST3")
     res.status(200).write(response.body);
   });

});

The xml appears in my terminal correctly. TEST1 and TEST2 do too.

Frontend (client):

import XMLParser from 'react-xml-parser';

useEffect(() => {
    
  fetch("/api")
  .then(res => res.text())
  .then(data => {
      var xml = new XMLParser().parseFromString(data); 
      console.log(xml)
  })
  .catch(err => console.log(err));
        
}, []);

Nothing appears on the console. I got the frontend code from this stack overflow post.

fetch("/api")
   .then((res) => res.body)
   .then((data) => console.log(data));

If I log the response body like this I get a ReadableStream object. This is the only functionality I've been implementing so far so nothing should be interfering with it. When I try different approaches I keep needing to restart React or it will load endlessly when I refresh.

When I open http://localhost:3001/api I can see the xml data I'm trying to transfer.

Debug the code. First make sure you reach the code. The make sure you have data. — jdweng
– jdweng, Commented Jan 13, 2023 at 10:45
@jdweng I made some edits based on your feedback, didn't realize to console.log in the backend. In the frontend console.log(xml) is not being reached as it doesn't log anything, even if I change it to console.log("xml"). — Samkayoki
– Samkayoki, Commented Jan 13, 2023 at 11:25
I'm not sure which is your client and which is the server. Frontend/Backend is confusing in this posting. A client sends a request (PUT) and then server receives request (GET). The server returns a response (Post) and client receives the response (GET). Often the Get and Are backwards. You can use a Controller at both client and server and often the same code on web don't specify if the code is running at a Client Controller or a Server Controller. — jdweng
– jdweng, Commented Jan 13, 2023 at 11:34
@jdweng In my case frontend is client and backend is server. I'm trying to have the client make a GET request to the server, have the server make a GET request to the external API. Server (my backend) should receive the xml, and send it to client. Will edit the post again. — Samkayoki
– Samkayoki, Commented Jan 13, 2023 at 11:57
Your server is a two port application. Port one is the server to client. Port two is a client to a database (or equivalent). Are you still having a restart issue? — jdweng
– jdweng, Commented Jan 13, 2023 at 13:53

Samkayoki · Accepted Answer · 2023-01-16 00:09:33Z

0

Still not sure why it didn't work before but it works with this.

Frontend (client):

import axios from "axios";

axios.get('/api')
.then(xml => {
    console.log(xml.data);
})

Backend (server):

app.get('/api', (req, res) => {

   var axios = require('axios');

   var config = {
     method: 'get',
     url: 'http://link',
     headers: {'Content-Type': 'application/xml'}
   };

   axios(config)
   .then(function (response) {
     res.json(response.data);
   })
   .catch(function (error) {
     console.log(error);
   })

})

answered Jan 16, 2023 at 0:09

Samkayoki

797 bronze badges

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

Collectives™ on Stack Overflow

Parsing fetched XML with react-xml-parser

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related