$ http.get 404 файла JSON с использованием .then

0

Я просматривал набор видеороликов на YouTube и узнал, что.success устарел и вместо этого использовал.then. Я получаю ошибку 404, используя как.json файл, так и файл.txt. Я попытался использовать.txt, поскольку упомянутые выше браузеры не позволяют локальным файлам обращаться к другим локальным файлам.

Это $ http-запрос, который у меня есть на данный момент

$http.get('data/ninjas.txt').then(function(response) {
       // Success!!!
        $scope.ninjas = response.data;
    });

Это мой.json файл, который действителен через JSONLint

[{
    "name": "Yoshi",
    "belt": "green",
    "rate": 50,
    "available": true,
    "thumb": "content/img/yoshi.png"
}, {
    "name": "Crystal",
    "belt": "yellow",
    "rate": 30,
    "available": true,
    "thumb": "content/img/crystal.png"
}, {
    "name": "Ryu",
    "belt": "orange",
    "rate": 10,
    "available": true,
    "thumb": "content/img/ryu.png"
}, {
    "name": "Shaun",
    "belt": "black",
    "rate": 1000,
    "available": true,
    "thumb": "content/img/shaun.png"
}]

Я попробовал тестирование с помощью обоих httpster и с помощью скобок, встроенных в предварительный просмотр в реальном времени. Я получаю ошибку 404, но файл действительно существует, как вы можете видеть на изображении

Изображение 174551

Если это помогает, это мой весь файл app.js

var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);

myNinjaApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
        templateUrl: 'views/home.html'
    })
        .when('/directory', {
        templateUrl: 'views/directory.html',
        controller: 'NinjaController'
    })
        .otherwise({
        redirectTo: '/home'
    });
}]);

myNinjaApp.controller('NinjaController', ['$scope', '$http', function($scope, $http){

    $scope.removeNinja = function(ninja){
        var removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja, 1)
    };

    $scope.addNinja = function(){
        $scope.ninjas.push({
            name: $scope.newninja.name,
            belt: $scope.newninja.belt,
            rate: parseInt($scope.newninja.rate),
            available: true
        }); 

        $scope.newninja.name = "";
        $scope.newninja.belt = "";
        $scope.newninja.rate = "";
    };

    $http.get('data/ninjas.txt').then(function(response) {
       // Success!!!
        $scope.ninjas = response.data;
    });

}]); 
  • 0
    Почему файл ninjas.txt не является файлом ninjas.json?
  • 0
    @JoeriShoeby Я попробовал оба и оба 404. Я прочитал еще один вопрос, что при запуске локальных браузеров / локальных хостов возникают проблемы с интерпретацией JSON, но по какой-то причине создание файла в формате .txt или .html работает. У меня есть файл .json, и я тоже попробовал это. Оба 404.
Показать ещё 4 комментария
Теги:
http
get

2 ответа

2
Лучший ответ

Чтобы сделать ответ полным,

Ваш корень вашего приложения - "index.html", и поскольку Angular работает в "index.html", все файлы, которые вы загружаете в свои файлы, относятся к вашему "index.html".

Пример этого показан в конфигурации вашего маршрута, где загружаются ваши шаблоны, начиная с "views/*", который является дочерней папкой вашего "index.html",

  • 0
    Спасибо за публикацию ответа!
  • 1
    не совсем точно при использовании маршрутизации htm5Mode. Относительно пути URL. Также views брат и сестра индекса
Показать ещё 1 комментарий
0
myNinjaApp.controller('NinjaController', ['$scope', '$http', function ($scope, $http) {

    $http({
        url: "data/ninjas.json",
        method: "GET"
    }).then(function (resp) {
        $scope.ninjas = resp;
    }, function (resp) {
       // bla bla bal
    });

    $scope.removeNinja = function (ninja) {
        var removeNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removeNinja, 1);
    }

    $scope.addNinja = function () {
        $scope.ninjas.push({
            name: $scope.newninja.name,
            belt: $scope.newninja.belt,
            rate: parseInt($scope.newninja.rate),
            available: true
        });
        $scope.newninja.name = "";
        $scope.newninja.belt = "";
        $scope.newninja.rate = "";
    };

    $scope.removeAll = function () {
        $scope.ninjas = [];
    };

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname; 
        $scope.reverse = !$scope.reverse;
    }

}]);
  • 1
    Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню