Incapable de faire un $http.requête get à un fichier JSON à l'aide Angulaire

Je suis en train de faire une application temps où j'ai besoin de saisir un local fichier JSON à partir de l'intérieur de mon contrôleur de gestion, puis de faire des trucs avec les données. Cependant, je ne peux pas obtenir un local $http.get demande de travailler pour une raison quelconque. Que dois-je faire?

C'est mon code actuel:

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

weatherApp.controller('weatherCtrl', function ($scope, $http) {
    $scope.cities = [],
    $scope.getCities = (function() {
        $http.get('http://localhost:81/Webb/angular projekt/jsons/cities.json')
             .success(function(data, status, headers, config) {

                 console.log(data);
             })
             .error(function(data, status, headers, config) {
                 console.log(status);
             });
    }())
}

Qui me donne cette erreur: 

SyntaxError: Unexpected token {                                         angular.js:11598
at Object.parse (native)
at oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:14:156)
at Yb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:77:190)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:50
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:7:302)
at Yc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:32)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:79:165)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:112:343
at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:123:286)

J'ai aussi essayé d'utiliser jsons/cities.json mais qui génère cette erreur:

Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

Faire une requête get à une ressource externe fonctionne très bien, mais à chaque fois que je le fais en local, les choses ne semblent pas fonctionner.

Le fichier JSON que j'essaie de faire ressemble à ceci:

{"cities": {

    {   
        city: "Stockholm", 
        latitud: "59", 
        longitud: "18",
        id: "sthlm"
    }, 
    {
        city: "Göteborg", 
        latitud: "58", 
        longitud: "12",
        id: "gbg"
    },
    {
        city: "Malmö", 
        latitud: "55", 
        longitud: "13",
        id: "malmo"
    },
    {
        city: "Umeå", 
        latitud: "63", 
        longitud: "20",
        id: "umea"
    }
}
}
  • vous n'êtes pas en passant une URI valide. vous ne pouvez pas avoir des espaces dans l'URI.
  • Le JSON est incorrect un trop - clés pour chaque objet doivent être de chaîne échappé, et que les villes doivent être un tableau.
  • J'obtiens le même résultat sans.
  • ah le droit.. la Fixation et tester si cela fonctionne.
  • s'avère, vous pouvez avoir un espace, c'était le fichier JSON qui a été mal apparemment. Je suis capable de le faire maintenant.
  • Il pourrait être judicieux de supprimer la question, que la question était simplement mal formé JSON.
  • Pourriez-vous poster votre commentaire est une réponse? J'ai obtenu des réponses utiles que les réponses du sujet, mais votre commentaire a été la chose qui a résolu le problème.
  • Je pense que c'est mieux de les laisser en place car les réponses pourraient être utiles à d'autres personnes dans le futur.
  • assurez-vous - j'ai édité ma réponse existant pour indiquer le mal formé JSON.

InformationsquelleAutor Chrillewoodz | 2015-01-22
  1. 4

    Sur votre local fichier que vous êtes l'obtention d'un JSON l'analyse d'exception parce que votre JSON est gravement malformé. Essayez ce format à la place:

    {
    "cities": [
        {
            "city": "Stockholm",
            "latitud": "59",
            "longitud": "18",
            "id": "sthlm"
        }
    ]
}
    InformationsquelleAutor JAAulde
  2. 2

    Vous ne pouvez pas faire une croix-origine de la demande pour les fichiers locaux. Sinon, les sites web de demande de fichiers sur votre ordinateur à volonté.

    Voir cette question pour plus d'informations. Les solutions proposées comprennent l'exécution d'un serveur sur votre machine, alors vous vous retrouvez l'appel au fichier via HTTP. file:// n'est tout simplement pas acceptable "protocole" pour faire des appels AJAX.

    • Eh bien, si Chrome ne le permet pas, comment puis-je le forcer à le permet-il? Ou comment puis-je obtenir autour d'elle?
    • Essayez un autre navigateur, peut-être une version plus ancienne, qui permet encore XHR à exécuter. Ou exécuter ce à l'intérieur d'un serveur, même en local sur votre ordinateur.
    • Je suis en cours d'exécution à partir de localhost, ne pourrait-il pas faire fonctionner?
    • Essayez les suggestions sur user1515126 de réponse. Votre serveur local peut avoir une stricte politique de Contrôle d'Accès. Et il ne fait jamais de mal à éviter les espaces dans les noms d'URL (http://localhost:81/Webb/angular projekt/jsons/cities.json).
    InformationsquelleAutor
  3. 1

    'http://localhost:81/Webb/angular projekt/jsons/villes.json' a un espace. Pourriez-vous essayer en supprimant l'espace entre "angulaire" et "projekt'?

    Faire une requête get à une ressource externe fonctionne très bien, mais à chaque fois que je le fais en local, les choses ne semblent pas fonctionner.

    Avez-vous mis le serveur Access-Control-Allow-Origin-tête de réponse pour correspondre à votre demande l'en-tête d'Origine? Réglage de l'en-tête de réponse à l'origine en-tête de demande de travaux.

    Aussi comment voulez-vous accéder à vos Angulaire de la page?

    InformationsquelleAutor user1515126
  4. 1

    Essayez d'utiliser un chemin relatif plutôt qu'absolu:

    $http.get('jsons/cities.json')

    Ou quelque chose le long de ces lignes, en fonction de votre structure de dossier.

    Edit: Voici un Plunkr de montrer ce travail.

    Edit 2: Il semble que le problème était en fait le JSON être mal formé. Le format exact serait:

    {
  "cities": [
    {   
        "city": "Stockholm", 
        "latitud": "59", 
        "longitud": "18",
        "id": "sthlm"
    }, 
    {
        "city": "Göteborg", 
        "latitud": "58", 
        "longitud": "12",
        "id": "gbg"
    },
    {
        "city": "Malmö", 
        "latitud": "55", 
        "longitud": "13",
        "id": "malmo"
    },
    {
        "city": "Umeå", 
        "latitud": "63", 
        "longitud": "20",
        "id": "umea"
    }
  ]
}
    • Je l'ai déjà indiqué dans la question que cela n'a pas fonctionné.
    InformationsquelleAutor surfitscrollit
  5. 1

    En supposant ce sera statique des données. Définir un objet et d'en parler comme d'un script.

    Inclure une référence en index.html (ou autre)

    <script src="../jsons/citiesJSON.js"></script>

    créer un objet et le pompe dans les données

    var GLOBALDATA = {};
GLOBALDATA.citiesJSON =
{"cities": {
{   
    city: "Stockholm", 
    latitud: "59", 
    longitud: "18",
    id: "sthlm"
}, 
{
    city: "Göteborg", 
    latitud: "58", 
    longitud: "12",
    id: "gbg"
},
{
    city: "Malmö", 
    latitud: "55", 
    longitud: "13",
    id: "malmo"
},
{
    city: "Umeå", 
    latitud: "63", 
    longitud: "20",
    id: "umea"
    }
}
} ; //<-- it's a statement now

    pas besoin de demander les données via HTTP

    $scope.cities = GLOBALDATA.citiesJson;
    InformationsquelleAutor Jojo
  6. 0

    Je utiliser un chemin relatif, comme $http.get('../jsons/villes.json'), mais n'a pas fonctionné. Jusqu'à ce que j'ajoute le support pour les .fichier json dans le web.config comme ceci 

    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
      </staticContent>
    InformationsquelleAutor Nedim