The Postal Service has an API that allows you to send an xml request with package weight, travel info, etc. It will return back an xml response.

How do I handle the xml response? I either need to parse the xml on the client-side, or more preferably, put the xml in a variable that I can send to my laravel backend for parsing.

Btw, I'm using react and laravel.

getPostagePrice = () => {
  fetch('.dll?API=RateV4&XML=<RateV4Request USERID="XXXXXXXXXXX"><PackageID="1ST"><Service>PRIORITY</Service><ZipOrigination>44106</ZipOrigination><ZipDestination>20770</ZipDestination><Pounds>1</Pounds><Ounces>8</Ounces><Container>NONRECTANGULAR</Container><Size>LARGE</Size><Width>15</Width><Length>30</Length><Height>15</Height><Girth>55</Girth></Package></RateV4Request>', {
       method: 'get',
   }).then((response) => {
       console.log(response.text());
   }).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")
   ).then(data => console.log(data));
}

The Postal Service has an API that allows you to send an xml request with package weight, travel info, etc. It will return back an xml response.

How do I handle the xml response? I either need to parse the xml on the client-side, or more preferably, put the xml in a variable that I can send to my laravel backend for parsing.

Btw, I'm using react and laravel.

getPostagePrice = () => {
  fetch('http://production.shippingapis.com/ShippingApi.dll?API=RateV4&XML=<RateV4Request USERID="XXXXXXXXXXX"><PackageID="1ST"><Service>PRIORITY</Service><ZipOrigination>44106</ZipOrigination><ZipDestination>20770</ZipDestination><Pounds>1</Pounds><Ounces>8</Ounces><Container>NONRECTANGULAR</Container><Size>LARGE</Size><Width>15</Width><Length>30</Length><Height>15</Height><Girth>55</Girth></Package></RateV4Request>', {
       method: 'get',
   }).then((response) => {
       console.log(response.text());
   }).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")
   ).then(data => console.log(data));
}

• javascript
• laravel
• reactjs
• fetch

• read fetch documentation ... usually you would .then((response) => response.text()) and the next .then would have the text available ... i.e. replace console.log(response.text()) with return response.text() so that you return something – Jaromanda X Commented Jun 6, 2017 at 23:25
• @JaromandaX Note, the "something" is a Promise, .text(), .blob(), .arrayBuffer(), and if implemented at the environment, .formData(), of Response object each return a Promise – guest271314 Commented Jun 6, 2017 at 23:41
• my point was that the first .then isn't returning anything at all, and did make the point that it should return response.text() - so, not sure what point you're trying to make @guest271314 – Jaromanda X Commented Jun 6, 2017 at 23:50
• @JaromandaX Not trying to make a point. Only indicating that .text() method of Response returns a Promise, not "something" – guest271314 Commented Jun 6, 2017 at 23:52
• yeah, my wording was sloppy at the end :p – Jaromanda X Commented Jun 6, 2017 at 23:52

2 Answers 2

Response.text() returns a Promise, chain .then() to get the Promise value of .text() call.

If you are expecting a Promise to be returned from getPostagePrice function, return fetch() call from getPostagePrice() call.

getPostagePrice = () => {
  fetch('/path/to/server')
  .then(response => response.text())
  .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
  .then(data => console.log(data));
}

Also with async/await you can do the same without lost your scope (remember that if you use .then, you only can work INSIDE the callback function).

async function display(){     
    const xmlFetch = await fetch("./yourXMLorXSL.xml")
    const xmlText = await xmlFetch.text()
    const xml = await (new window.DOMParser()).parseFromString(xmlText, "text/xml")

    console.log(xml)
}