it-swarm-eu.dev

AngularJS: factory $ http.get JSON file

Sto cercando di sviluppare localmente con solo un file JSON hardcoded. Il mio file JSON è il seguente (valido quando inserito nel validatore JSON):

{
    "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" }
            ]
        }
    ]
}

Ho ottenuto il mio controller, fabbrica e html di lavoro quando il JSON era codificato all'interno della fabbrica. Tuttavia, ora che ho sostituito il JSON con il codice $ http.get, non funziona. Ho visto così tanti diversi esempi di risorse $ http e $ ma non sono sicuro di dove andare. Sto cercando la soluzione più semplice. Sto solo cercando di estrarre i dati per le istruzioni ng-repeat e simili.

Fabbrica:

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
});

Qualsiasi aiuto è apprezzato. Grazie!

jsonhttpangularjsfactory
84
jstacks

Ok, ecco un elenco di cose da esaminare:

1) Se non stai eseguendo un server web di alcun tipo e stai solo testando con file: //index.html, probabilmente stai incontrando problemi con la stessa origine. Vedere:

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

Molti browser non consentono ai file ospitati localmente di accedere ad altri file ospitati localmente. Firefox lo consente, ma solo se il file che stai caricando è contenuto nella stessa cartella del file html (o di una sottocartella).

2) La funzione di successo restituita da $ http.get () divide già l'oggetto risultato per te:

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

Quindi è ridondante chiamare successo con funzione (risposta) e return response.data.

3) La funzione di successo non restituisce il risultato della funzione che hai passato, quindi questo non fa quello che pensi che faccia:

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

Questo è più vicino a ciò che intendevi:

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

4) Ma quello che vuoi veramente fare è restituire un riferimento a un oggetto con una proprietà che verrà popolata al caricamento dei dati, quindi qualcosa di simile a questo:

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 partirà da null, e quando i dati verranno caricati, punterà ad esso.

In alternativa è possibile restituire la promessa effettiva restituita da $ http.get e utilizzarla:

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

E quindi puoi usare il valore in modo asincrono nei calcoli in un controller:

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

Volevo notare che la quarta parte di Accepted Answer è sbagliata .

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;    
});

Il codice sopra scritto come scritto da @Karl Zilles fallirà perché obj sarà sempre restituito prima di ricevere i dati (quindi il valore sarà sempre null) e questo perché stiamo facendo una chiamata asincrona.

I dettagli di domande simili sono discussi in questo post

In Angular, utilizzare $promise per gestire i dati recuperati quando si desidera effettuare una chiamata asincrona.

La versione più semplice è

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;
});

La ragione per cui non uso success e error è stata appena scoperta dal doc , questi due metodi sono deprecati.

I successi e gli errori del metodo $http legacy sono stati deprecati. Utilizzare invece il metodo standard then.

21
Qiang

questa risposta mi ha aiutato molto e mi ha indirizzato nella giusta direzione, ma ciò che ha funzionato per me, e spero che gli altri, è:

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);
    });    
});
4
jp093121

++ Questo ha funzionato per me. È Vanilla javascirpt ed è utile per casi d'uso come il de-cluttering durante il test con la libreria ngMocks:

<!-- 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>

Questo è il tuo file javascript che contiene i dati JSON

// 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"
};

Infine, lavora con i dati JSON ovunque nel tuo codice

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

Nota: - Questo è ottimo per il test e anche karma.conf.js accetta questi file per eseguire test come mostrato di seguito. Inoltre, lo consiglio solo per i dati di disordine e l'ambiente testing/development.

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

Spero che questo ti aiuti.

++ Creato sopra questa risposta https://stackoverflow.com/a/24378510/4742733

UPDATE

Un modo più semplice che ha funzionato per me è solo includere un function nella parte inferiore del codice che restituisce qualunque 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/[email protected]@._V1_SX300.jpg",
         "Metascore": "N/A",
         "imdbRating": "8.2",
         "imdbVotes": "5",
         "imdbID": "tt1937109",
         "Type": "movie",
         "Response": "True"
   }
}
1
Akash

Ho circa questo problema. Ho bisogno di debug dell'applicazione AngularJs da Visual Studio 2013.

Per impostazione predefinita IIS Espresso accesso limitato ai file locali (come json).

Ma, innanzitutto: JSON ha una sintassi JavaScript.

Secondo: i file javascript sono consentiti.

Così:

  1. rinominare JSON in JS (data.json->data.js).

  2. comando di caricamento corretto ($http.get('App/data.js').success(function (data) {...

  3. carica lo script data.js nella pagina (<script src="App/data.js"></script>)

Successivamente, carica i dati come al solito. È solo una soluzione, ovviamente.

1
Alex Sam