AngularJS: Factory $ http.get JSON-Datei

Ich möchte lokal mit nur einer fest codierten JSON-Datei entwickeln. Meine JSON-Datei lautet wie folgt (gültig, wenn sie in den JSON-Validator gestellt wird):

{
    "contentItem": [
            {
            "contentID" : "1", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        },{
            "contentID" : "2", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        }
    ]
}

Ich habe meinen Controller, meine Factory und mein HTML zum Laufen gebracht, als der JSON in der Factory fest codiert wurde. Jetzt, da ich den JSON durch den Code $ http.get ersetzt habe, funktioniert er jedoch nicht mehr. Ich habe so viele verschiedene Beispiele für $ http und $ resource gesehen, bin mir aber nicht sicher, wohin ich gehen soll. Ich suche die einfachste Lösung. Ich versuche nur, Daten für ng-repeat und ähnliche Anweisungen abzurufen.

Fabrik:

theApp.factory('mainInfoFactory', function($http) { 
    var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });
    var factory = {}; // define factory object
    factory.getMainInfo = function() { // define method on factory object
        return mainInfo; // returning data that was pulled in $http call
    };
    return factory; // returning factory to make it ready to be pulled by the controller
});

Jede Hilfe wird geschätzt. Vielen Dank!

Okay, hier ist eine Liste von Dingen, die Sie untersuchen sollten:

1) Wenn Sie keinen Webserver ausführen und nur mit der Datei //index.html testen, treten wahrscheinlich Probleme mit Richtlinien gleichen Ursprungs auf. Sehen:

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-origin_policy

In vielen Browsern können lokal gehostete Dateien nicht auf andere lokal gehostete Dateien zugreifen. Firefox erlaubt dies jedoch nur, wenn sich die geladene Datei im selben Ordner befindet wie die HTML-Datei (oder ein Unterordner).

2) Die von $ http.get () zurückgegebene Erfolgsfunktion teilt das Ergebnisobjekt bereits für Sie auf:

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

Es ist also überflüssig, Erfolg mit Funktion (Antwort) aufzurufen und response.data zurückzugeben.

3) Die Erfolgsfunktion gibt nicht das Ergebnis der Funktion zurück, die Sie übergeben haben. Dies tut also nicht das, was Sie denken:

var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });

Dies ist näher an dem, was Sie beabsichtigt haben:

var mainInfo = null;
$http.get('content.json').success(function(data) {
    mainInfo = data;
});

4) Was Sie aber wirklich tun möchten, ist, einen Verweis auf ein Objekt mit einer Eigenschaft zurückzugeben, die beim Laden der Daten ausgefüllt wird.

theApp.factory('mainInfo', function($http) { 

    var obj = {content:null};

    $http.get('content.json').success(function(data) {
        // you can do some processing here
        obj.content = data;
    });    

    return obj;    
});

mainInfo.content startet mit null und zeigt beim Laden der Daten darauf.

Alternativ können Sie das tatsächliche Versprechen, das $ http.get zurückgibt, zurückgeben und Folgendes verwenden:

theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json');
});

Und dann können Sie den Wert asynchron in Berechnungen in einer Steuerung verwenden:

$scope.foo = "Hello World";
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username;
});

Ich wollte darauf hinweisen, dass der vierte Teil von Accepted Answer falsch ist .

theApp.factory('mainInfo', function($http) { 

var obj = {content:null};

$http.get('content.json').success(function(data) {
    // you can do some processing here
    obj.content = data;
});    

return obj;    
});

Der obige Code, wie er von @Karl Zilles geschrieben wurde, schlägt fehl, da er objimmer zurückgegeben wird, bevor er Daten empfängt (daher ist der Wert immer null), und weil wir einen asynchronen Aufruf tätigen.

Die Details ähnlicher Fragen werden in diesem Beitrag behandelt

Verwenden Sie $promisein Angular, um mit den abgerufenen Daten umzugehen, wenn Sie einen asynchronen Aufruf tätigen möchten.

Die einfachste Version ist

theApp.factory('mainInfo', function($http) { 
    return {
        get:  function(){
            $http.get('content.json'); // this will return a promise to controller
        }
});


// and in controller

mainInfo.get().then(function(response) { 
    $scope.foo = response.data.contentItem;
});

Der Grund, den ich nicht benutze successund den errorich gerade aus dem Dokument herausgefunden habe , ist, dass diese beiden Methoden veraltet sind.

Der $httpErfolg und Fehler der alten Versprechensmethoden wurde verworfen. Verwenden Sie thenstattdessen die Standardmethode .

Diese Antwort hat mir sehr geholfen und mich in die richtige Richtung gelenkt, aber was für mich und hoffentlich für andere funktioniert hat, ist:

menuApp.controller("dynamicMenuController", function($scope, $http) {
$scope.appetizers= [];
$http.get('config/menu.json').success(function(data) { 
    console.log("success!");
    $scope.appetizers = data.appetizers;
        console.log(data.appetizers);
    });    
});

Ich habe ungefähr dieses Problem. Ich muss die AngularJs-Anwendung aus Visual Studio 2013 debuggen.

Standardmäßig beschränkt IIS Express den Zugriff auf lokale Dateien (wie z. B. json).

Aber zuerst: JSON hat JavaScript-Syntax.

Zweitens: Javascript-Dateien sind zulässig.

So:

1. Benennen Sie JSON in JS ( data.json->data.js) um.

2. korrekter Ladebefehl ($http.get('App/data.js').success(function (data) {...

3. Laden Sie das Skript data.js auf page ( <script src="App/data.js"></script>)

Verwenden Sie als nächstes die geladenen Daten auf übliche Weise. Es ist natürlich nur eine Problemumgehung.

++ Das hat bei mir funktioniert. Es ist vanilla javascirptund gut für Anwendungsfälle wie das Aufräumen beim Testen mit der ngMocksBibliothek:

<!-- specRunner.html - keep this at the top of your <script> asset loading so that it is available readily -->
<!--  Frienly tip - have all JSON files in a json-data folder for keeping things organized-->
<script src="json-data/findByIdResults.js" charset="utf-8"></script>
<script src="json-data/movieResults.js" charset="utf-8"></script>

Dies ist Ihre javascriptDatei, die die JSONDaten enthält

// json-data/JSONFindByIdResults.js
var JSONFindByIdResults = {
     "Title": "Star Wars",
     "Year": "1983",
     "Rated": "N/A",
     "Released": "01 May 1983",
     "Runtime": "N/A",
     "Genre": "Action, Adventure, Sci-Fi",
     "Director": "N/A",
     "Writer": "N/A",
     "Actors": "Harrison Ford, Alec Guinness, Mark Hamill, James Earl Jones",
     "Plot": "N/A",
     "Language": "English",
     "Country": "USA",
     "Awards": "N/A",
     "Poster": "N/A",
     "Metascore": "N/A",
     "imdbRating": "7.9",
     "imdbVotes": "342",
     "imdbID": "tt0251413",
     "Type": "game",
     "Response": "True"
};

Schließlich arbeiten Sie mit den JSON-Daten an einer beliebigen Stelle in Ihrem Code

// working with JSON data in code
var findByIdResults = window.JSONFindByIdResults;

Hinweis: - Dies ist ideal zum Testen und karma.conf.jsakzeptiert diese Dateien sogar zum Ausführen von Tests (siehe unten). Außerdem empfehle ich dies nur, um Daten und testing/developmentUmgebung übersichtlicher zu gestalten .

// extract from karma.conf.js
files: [
     'json-data/JSONSearchResultHardcodedData.js',
     'json-data/JSONFindByIdResults.js'
     ...
]

Hoffe das hilft.

++ Aufbauend auf dieser Antwort https://stackoverflow.com/a/24378510/4742733

AKTUALISIEREN

Eine einfachere Möglichkeit, die für mich funktioniert hat, besteht darin, functionam Ende des Codes ein Zeichen einzufügen, das alles zurückgibt JSON.

// within test code
let movies = getMovieSearchJSON();
.....
...
...
....
// way down below in the code
function getMovieSearchJSON() {
      return {
         "Title": "Bri Squared",
         "Year": "2011",
         "Rated": "N/A",
         "Released": "N/A",
         "Runtime": "N/A",
         "Genre": "Comedy",
         "Director": "Joy Gohring",
         "Writer": "Briana Lane",
         "Actors": "Brianne Davis, Briana Lane, Jorge Garcia, Gabriel Tigerman",
         "Plot": "N/A",
         "Language": "English",
         "Country": "USA",
         "Awards": "N/A",
         "Poster": "http://ia.media-imdb.com/images/M/MV5BMjEzNDUxMDI4OV5BMl5BanBnXkFtZTcwMjE2MzczNQ@@._V1_SX300.jpg",
         "Metascore": "N/A",
         "imdbRating": "8.2",
         "imdbVotes": "5",
         "imdbID": "tt1937109",
         "Type": "movie",
         "Response": "True"
   }
}