0

Estou tentando fazer uma requisição HTTP para uma API e recebo o seguinte error:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

  • Porque está ocorrendo este error?
  • Como tratar XML nos componentes do React?

Chamada a API:

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

                });
            });


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

Arquivo 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>
3
  • 2
    Caro Igor basta remover o .then(response => response.json()), XML não é JSON, logo não tem como ele interpretar isto
    – Syzoth
    Commented 10/06/2019 às 15:00
  • Ele até funcionou, mas entrou em um looping infinito. Commented 10/06/2019 às 16:41
  • Provavelmente é erro em outro lugar caro Igor
    – Syzoth
    Commented 10/06/2019 às 17:02

1 Resposta 1

2

Eu acredito que o corpo de resposta do servidor não é Content-Type:application/json, isto não prejudica em nada em relação a manipulação dos dados recebidos, porém em minha opinião é um erro do backend não te notificar o verdadeiro tipo de conteúdo que será recebido (até mesmo por questão de segurança), pois o Content-Type diz para o cliente qual é o tipo de conteúdo que a resposta, de fato, tem...

Porém o seu verdadeiro problema como disse acima, você provavelmente não está recebendo um conteúdo do tipo JSON, com isto você está tentando forçar uma conversão que não pode, neste caso você está tentando passar um conteúdo recebido do servidor do tipo HTML ou XML para JSON, por isto é gerado o error.

Para saber qual tipo de conteúdo você está recebendo do servidor, faça o seguinte:

Marque a guia "Rede" nas ferramentas do Chrome Dev para ver o tipo de conteúdo da resposta do servidor, ou depure usando este código:

.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);  
});

Para manipular corretamente o conteúdo XML recebido, siga as instruções:

  • 1) Remova o response.json()
  • 2) Para transformar o conteúdo do tipo text em XML no React, você pode utilizar a biblioteca react-xml-parser.

Como utilizar a biblioteca react-xml-parser?

Utilizando este XML como exemplo:

<?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>

Passo 1): Instale a mesma com o comando abaixo no seu terminal:

npm i react-xml-parser

Passo 2): Utilize o código abaixo da biblioteca para converter o conteúdo do tipo text para XML e poder manipular o mesmo.

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

Métodos que são atualmente suportados pela biblioteca:

parseFromString(string): Retorna um objeto XML conforme descrito no exemplo de saída que representa o texto de entrada.

toString(objeto XML): retorna a representação de texto de um XML de entrada.

getElementsByTagName(string): Retorna todas as tags com o mesmo nome da string de entrada do método (sem diferenciação de maiúsculas e minúsculas). para todas as tags possíveis, use '*' como entrada.

Nota

Adicione o código do passo (2) dentro do seu .then(), substitua o xmlText pela sua response e utilize o xml.getElementsByTagName('nomeDaTag') de acordo com o seu cenário.

4
  • 2
    Caro Thiago, o Content-Type é indiferente, o problema é tentar forçar o conteudo em .json() quando o conteudo é um arquivo de texto em formato xml, pode colocar o content-type que quiser, o conteudo será o mesmo e não vai funcionar.
    – Syzoth
    Commented 10/06/2019 às 15:09
  • @GuilhermeNascimento eu compreendo e afirmei isto também na resposta, mas em minha opnião o backend está errado em não declarar o Content-Type do tipo certo, pois o Content-Type diz para o cliente qual é o tipo de conteúdo que a resposta, de fato. Para desenvolvedores menos experientes como é o caso aqui, ele teve dificuldade por conta de talvez o Content-Type não estar correto (não sei se ele analisou também), por fim para eu e você que possuímos experiência, não chegaríamos ao ponto de forçar um arquivo texto em formato xml para json. Caso queira que eu aplique modificação avise.
    – user148754
    Commented 10/06/2019 às 15:15
  • @THIAGODEBONIS por favor mostra o exemplo forçando o texto em formato de xml para json, quero ver todas as vertentes nesse processo. Commented 10/06/2019 às 17:00
  • 1
    @IgorCarreiro tudo bem para você?
    – user148754
    Commented 10/06/2019 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .