Angular 1, problem z HTTP, czytanie pliku json

pytanie zadane 11 czerwca 2017 w JavaScript przez Bartlomiej Bywalec (2,480 p.)

Siema mam problem zrobiłem taka funkcja i plik json chce go zczytac i mam błąd, że

Błąd przetwarzania XML: nieprawidłowo sformowany
Obszar: file:///C:/Users/Piotrek/Desktop/shop/model/products.json
Numer wiersza: 1, kolumna 1:

Czemu chce otworzyć strukture XML, jak zrobic by oczekiwal jsona?

'use strict';

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

application.controller('products', ['$scope', '$http', function($scope, $http){


		$http({
		  method: 'GET',
		  url: 'model/products.json'
			}).then(function successCallback(response) {
		  		     $scope.status = response.status;
         			 $scope.data = response.data;
			  }, function errorCallback(response) {
			          $scope.data = response.data || 'Request failed';
			          $scope.status = response.status;
		 });




	console.log();
}]);

[
	{ 
		"name": "pomarancza", 
		"waga": 0.25, 
		"opis": "Świeże, smaczne, prosto z Hiszpanii." 
	},
	{ 
		"name": "jabłko", 
		"waga": 0.35, 
		"opis": "Świeże, smaczne, prosto z Włoszech." 
	},
	{ 
		"name": "wiśnia", 
		"waga": 0.05, 
		"opis": "Świeże, smaczne, prosto z Anglii." 
	},
	{ 
		"name": "winogron", 
		"waga": 0.17, 
		"opis": "Świeże, smaczne, prosto z Polski." 
	}
]

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Zobacz w zakładce Network (lub Sieć) w dev toolsach, co przychodzi w odpowiedzi z serwera (XML czy JSON). Sprawdź też jaki typ contentu oczekuje aplikacja - może musisz wymusić typ JSON - ustawisz to obiektem headers.

komentarz 11 czerwca 2017 przez Bartlomiej Bywalec (2,480 p.)

W sensie ze to ma wygladac jakos tak?

		$http({
		  method: 'GET',
		  url: 'model/products.json', 
		  headers: { Accept: application/json }
			}).then(function successCallback(response) {
		  		     $scope.status = response.status;
         			 $scope.data = response.data;
			  }, function errorCallback(response) {
          $scope.data = response.data || 'Request failed';
          $scope.status = response.status;
		 });

Poprawilbys mnie?

ReferenceError: json is not defined

A wczesniej w sieci/network wgl nie pokazywalo ze pobiera cokolwiek innego niz jquery

A w konsoli mialem ten blad:

Błąd przetwarzania XML: nieprawidłowo sformowany
Obszar: file:///C:/Users/Piotrek/Desktop/shop/model/products.json
Numer wiersza: 1, kolumna 1:

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

headers: { Accept: application/json }

Wartość application/json podaj jako string (czyli w cudzysłowach)

A wczesniej w sieci/network wgl nie pokazywalo ze pobiera cokolwiek innego niz jquery

Której linijki kodu ten błąd dotyczy?

komentarz 11 czerwca 2017 przez Bartlomiej Bywalec (2,480 p.)

No nie ma bledu w network/sieci tam tlyko pobiera jquery

Poprawilem apllication json w '' dalem a bład w consoli jest taki dalej:

Błąd przetwarzania XML: błąd składni
Obszar: file:///C:/Users/Piotrek/Desktop/Shop/model/products.json
Numer wiersza: 1, kolumna 1: products.json:1:1

poprawione zapytanie:


		$http({
		  method: 'GET',
		  url: 'model/products.json', 
		  headers: { Accept: 'application/json' }
			}).then(function successCallback(response) {
		  		     $scope.status = response.status;
         			 $scope.data = response.data;
			  }, function errorCallback(response) {
          $scope.data = response.data || 'Request failed';
          $scope.status = response.status;
		 });

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Używasz Chrome, czy FIrefox? Pokaż screen z zakładki Network/Sieć.

Czy nie masz w module.run() ustawionej jakiejś domyślnej konfiguracji dla serwisu $http?

komentarz 11 czerwca 2017 przez Bartlomiej Bywalec (2,480 p.)

tak wyglada caly plik w application.js

'use strict';

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

application.config( ['$routeProvider', function($routeProvider){

	$routeProvider.when('/products', {
		controller : 'products',
		templateUrl : 'partials/products.html'
	});

	$routeProvider.when('/product', {
		controller : 'products',
	
	});
}]);

application.controller('products', ['$scope', '$http', function($scope, $http){




		$http({
		  method: 'GET',
		  url: 'model/products.json', 
		  headers: { Accept: 'application/json' }
			}).then(function successCallback(response) {
		  		     $scope.status = response.status;
         			 $scope.data = response.data;
			  }, function errorCallback(response) {
          $scope.data = response.data || 'Request failed';
          $scope.status = response.status;
		 });




	console.log();
}]);

http://imgur.com/a/skJOM

komentarz 11 czerwca 2017 przez Bartlomiej Bywalec (2,480 p.)

a i uzywam firefoxa

a ten headers na pewno jest dobrze napisany?

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Spróbuj na Chrome. Jeśli nie pójdzie, to sprawdź, czy dostaniesz odpowiedź (bez błędu), gdy podmienisz url na ten: "https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49" (jakieś randomowe API) - u mnie działa na Chrome i Firefox. Jeśli będzie działać, to postaw sobie jakiś serwer i wczytuj swój plik przez niego, a nie bezpośrednio z dysku.

komentarz 11 czerwca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Dorzuć jeszcze responseType z wartością "json".

https://docs.angularjs.org/api/ng/service/$http#usage

komentarz 11 czerwca 2017 przez Bartlomiej Bywalec (2,480 p.)

Nie rozumiem jednego jezeli nie dolaczam nigdzie pliku products.json ani w url dlaczego mam komunikat

Błąd przetwarzania XML: błąd składni
Obszar: file:///C:/Users/Piotrek/Desktop/ngShop/model/products.json
Numer wiersza: 1, kolumna 1:

___???