Syntaxerror: Unexpected token < in JSON at position 0

Question

I’m trying to file a requisition HTTP for a API and I get the following error:

Uncaught (in Promise) Syntaxerror: Unexpected token < in JSON at position 0

• Why is this happening error?
• How to treat XML in the components of React?

Call to API:

  plotarCamadaNoMapa(camadas) {
        fetch('api/TelaOperadorRJ/GetXMLCamada?idCamada=' + camadas)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    xmlCamada: data

                });
            });


        console.log(this.state.xmlCamada);     
    }

Filing cabinet XML:

<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Style id="Style1">
      <LineStyle>
        <color>ff000000</color>
        <width>1.2</width>
      </LineStyle>
      <PolyStyle>
        <color>8000ffff</color>
        <fill>true</fill>
        <outline>true</outline>
      </PolyStyle>
    </Style>
    <Placemark>
      <name>Polígono 0</name>
      <styleUrl>#Style1</styleUrl>
      <Polygon>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates>-46.878889999999998,-23.54439
-46.843359999999997,-23.52
-46.837859999999999,-23.516220000000001
-46.812629999999999,-23.522829999999999
-46.808340000000001,-23.54007
-46.797870000000003,-23.563590000000001
-46.814169999999997,-23.57067
-46.850740000000002,-23.56831
-46.878889999999998,-23.54439</coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>
    </Placemark>
  </Document>
</kml>

Answer 1

I believe the server’s response body is not Content-Type:application/json, this does not affect the manipulation of the data received, but in my opinion it is a mistake for the backend not to notify you the true type of content that will be received (even for security reasons), because the Content-Type tells the customer what kind of content the answer actually has...

But your real problem as said above, you’re probably not getting content like JSON, with this you are trying to force a conversion that can not, in this case you are trying to pass a content received from the server of type HTML or XML for JSON, therefore is generated the error.

To find out what kind of content you’re receiving from the server, do the following:

Mark the tab "Network" in the tools of Chrome Dev to see the content type of the server response, or debug using this code:

.then(function(response) {
    console.log(response);
    console.log(response.status);
    console.log(response.json());
    console.log(response.text());
}).catch(function(err) {  
       console.log('Fetch Error :-S', err);  
});

To correctly manipulate the content XML received, follow the instructions:

• 1) Remove the response.json()
• 2) To transform content of type text in XML in the React, you can use the library React-xml-parser.

How to use the library react-xml-parser?

Using this XML as an example:

<?xml version='1.0' encoding='utf-8'?>
<Library>
   <Books count='1'>
       <Book id='1'>
           <Name>Me Before You</Name>
           <Author>Jojo Moyes</Author>
       </Book>
   </Books>
   <Music count=1>
       <CD id='2'>
           <Name>Houses of the Holy</Name>
           <Artist>Led Zeppelin</Artist>
       </CD>
   </Music>
</Library>

Step 1): Install it with the command below in your terminal:

npm i react-xml-parser

Step 2): Use the code below the library to convert content of type text for XML and can manipulate the same.

var XMLParser = require('react-xml-parser');
var xml = new XMLParser().parseFromString(xmlText);
console.log(xml);
console.log(xml.getElementsByTagName('Name'));

Methods that are currently supported by the library:

parseFromString(string): Returns an object XML as described in the output example representing the input text.

toString(objeto XML): returns the text representation of a XML incoming.

getElementsByTagName(string): Returns all tags with the same name as the method input string (no case differentiation). for all possible tags, use '*' as input.

Note

Add the code of step (2) within your .then(), replace the xmlText for his response and use the xml.getElementsByTagName('nomeDaTag') according to your scenario.