Entrar Ainda não tem acesso?
4
respostas

Foto é deletada corretamente, porém console mostra msg de erro

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Dados inconsistentes? Precisamos removê-los ou alterá-los! e atividade Removendo e editando fotos

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Implementei o botão para remover a foto na principal.html e no fotos-controller.js a função remover(foto), porém quando clico no botão Remover a foto é excluída do servidor, a mensagem de remoção com sucesso é mostrada, mas no console aparece a seguinte mensagem de erro:

XML Parsing Error: no root element found Location: http://localhost:3000/v1/fotos/JT1OGXxJDZd4swwb Line Number 1, Column 1:

Qual o motivo do erro está acontecendo?

Segue os códigos:

principal.html

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>

<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>

<div class="row">
    <div class="col-md-12">
        <form>
            <div class="input-group">
                <span class="input-group-btn">
                    <a href="/fotos/new" class="btn btn-primary" type="button">
                        Nova foto
                    </a>
                </span>
                <input class="form-control" placeholder="filtrar pelo título da foto" ng-model="filtro" ng-model-options="{ debounce: 500 }">
            </div> <!-- fim input-group -->
        </form> <!-- fim form -->
    </div> <!-- fim col-md-12 -->
</div> <!-- fim row -->

<div class="row">
    <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: {titulo: filtro}" titulo="{{foto.titulo}}">
        <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
        <a class="btn btn-primary btn-block" href="">Editar</a>
        <button class="btn btn-danger btn-block" ng-click="remover(foto)">Remover</button>
    </meu-painel><!-- fim do da diretiva meu-painel -->
</div><!-- fim row -->

fotos-controller.js

angular.module('alurapic').controller('FotosController', function($scope, $http) {

    $scope.fotos = [];
    $scope.filtro = '';

    $http.get('/v1/fotos')
    .success(function(fotos) {
        $scope.fotos = fotos;
    })
    .error(function(erro) {
        console.log(erro);
    });

    $scope.remover = function(foto) {

        $http.delete('/v1/fotos/' + foto._id)
        .success(function() {
            var indiceDaFoto = $scope.fotos.indexOf(foto);
            $scope.fotos.splice(indiceDaFoto, 1);
            $scope.mensagem = 'Foto ' + foto.titulo + ' removida com sucesso!';

        })
        .error(function(erro) {
            console.log(erro);
            $scope.mensagem = 'Não foi possível apagar a foto ' + foto.titulo;
        });
    };
});
4 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Joaquim, tudo bem? Parece ser um erro na API, está tentando fazer algum parse de XML onde o mesmo não possuí um elemento root.

Está sempre dando esse erro ou em apenas alguns casos?

Espero ter ajudado.

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Oi, Matheus!

A aplicação inclui fotos através do $http.post sem o erro. A busca realizada com o $http.get também não apresenta o erro. Já a exclusão e a alteração de fotos, que foram implementadas nesse capítulo através de $http.delete e $http.put respectivamente, estão retornando o erro.

Lembrando que tanto na exclusão como na alteração é passado a foto._id, o que não acontece na inclusão e na busca, que é passado somente a foto.

Utilização do $http.get e do $http.delete no fotos-controller.js para exemplificar a passagem dos parâmetros:

$http.get('/v1/fotos')
.success(function(fotos) {
    $scope.fotos = fotos;
})
$http.delete('/v1/fotos/' + foto._id)

Utilização do $http.post e do $http.put no foto-controller.js para exemplificar a passagem dos parâmetros:

$http.post('/v1/fotos', $scope.foto)
.success(function() {
    $scope.foto = {};
    $scope.mensagem = 'Foto cadastrada com sucesso';
})
$http.put('/v1/fotos/' + $scope.foto._id, $scope.foto)
.success(function() {
    $scope.mensagem = 'Foto ' + $scope.foto.titulo + ' foi alterada';
})

O $http.get também é utilizado no foto-controller.js para recuperar uma foto específica para realização da alteração da mesma. Neste momento também é passado o id da foto, porém para isso é utilizado $routeParams.fotoId e, aparentemente, não apresenta o erro, pois o erro só aparece no console depois de realizada a alteração.

$http.get('/v1/fotos/' + $routeParams.fotoId)
.success(function(foto) {
    $scope.foto = foto;
})
por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

O console continua mostrando o erro!

XML Parsing Error: no root element found Location: http://localhost:3000/v1/fotos/JT1OGXxJDZd4swwb Line Number 1, Column 1:

O erro aparece tanto na alteração da foto, quanto na exclusão!

Não está impedindo em nada minha aplicação, porém gostaria de entender o motivo do erro!

Será que alguém consegue me orientar?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Joaquim, tudo bem? Consegue me mandar o projeto? Pode ser o repositório do Github, ficaria melhor para eu simular/visualizar e entender o problema.

Fico no aguardo.