AngularJS : factory $ http.get JSON 파일

Question

하드 코딩 된 JSON 파일을 사용하여 로컬로 개발하려고합니다. 내 JSON 파일 (JSON 검사기에 넣어 유효) 다음과 같습니다

나는 JSON가 공장 내부에 하드 코딩 할 때 작업 내 컨트롤러, 공장 및 HTML을 왔

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

. 그러나 JSON을 $ http.get 코드로 대체 했으므로 작동하지 않습니다. 나는 $ http와 $ resource의 많은 다른 예제를 보았지만 어디로 가야할지 모르겠습니다. 나는 가장 간단한 해결책을 찾고있다. 난 그냥 ng-repeat 및 유사한 지시어에 대한 데이터를 가져 오려고합니다.

공장 :

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

일체의 도움도 감사합니다. 감사!

Answer 1

좋아, 여기에 보는 것들의 목록입니다 :

1) 당신이 어떤 종류의 웹 서버를 실행하고 단지 파일을 테스트하지 않는 경우 : //index.html를, 그때는 아마 실행중인 같은 근원 정책 문제로. 참조 :

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

대부분의 브라우저가 로컬 수 있도록 파일을 로컬 호스트 다른 액세스 할 파일을 호스팅하지 않습니다. Firefox는 허용하지만,로드하는 파일이 html 파일 (또는 하위 폴더)과 동일한 폴더에있는 경우에만 허용됩니다.

2) $ http.get (에서 반환 성공 기능) 이미 당신을 위해 결과 객체를 분할 :

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

은 그래서 기능 (응답 성공을 부르는)와 response.data을 반환 중복입니다.

3) 성공의 기능은 당신이 그것을 전달하는 함수의 결과를 반환하지 않습니다, 그래서 이것은 당신이하지 생각하지 않습니다

:

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

이것은 당신이 의도에 가까운

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

4) 그러나 당신이 정말로하고 싶은 채워집니다 속성과 객체에 대한 참조를 반환 할 때, 그래서 뭔가이 같은 데이터로드 :

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는 null을 시작하고 데이터가로드되면 해당 데이터를 가리 킵니다.

은 또는 당신은 $ http.get 반환 실제 약속을 반환하고 사용할 수 있습니다

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

을 그리고 당신은 컨트롤러에서 계산에 비동기 적으로 값을 사용할 수 있습니다 :

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

Answer 2

이 대답은 나를 많이 도왔고 올바른 방향으로 나를 가리켰다. 그러나 나와 나를 위해서 일한 것은 다음과 같다.

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

Answer 3

대략 이러한 문제가 있습니다. Visual Studio 2013에서 AngularJs 응용 프로그램을 디버깅해야합니다.

기본적으로 IIS Express는 로컬 파일 (예 : json)에 대한 액세스를 제한합니다.

하지만 먼저 JSON에 JavaScript 구문이 있습니다.

둘째 : 자바 스크립트 파일이 허용됩니다. 그래서

: JS (data.json->data.js)에

1. 이름 바꾸기 JSON.

는

2. 올바른로드 명령 ($http.get('App/data.js').success(function (data) {...

3. 로드 스크립트 페이지 (<script src="App/data.js"></script>)

다음 사용로드 된 데이터는 평소 방식을 data.js. 그것은 물론 단지 해결 방법입니다.

Answer 4

Accepted Answer의 네 번째 부분 인 이 잘못되었습니다.

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

@Karl Zilles는이 데이터를 수신하기 전에 obj 항상 반환되기 때문에 실패 쓴 위의 코드는 (따라서 값은 항상 null 될 것입니다) 그리고 우리는 비동기 호출을하기 때문입니다. 비슷한 질문

세부 사항은 비동기 호출을 할 때 가져온 데이터를 처리 할 수 ​​$promise를 사용하여 각도에서

---

this post에서 설명합니다.

간단한 버전은

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

내가 success 및 error 난 그냥이 두 가지 방법이 사용되지 않습니다는 doc에서 발견되어 사용하지 않는 이유입니다.

$http 성공 가능성 및 오류가 권장되지 않습니다. 대신 then 표준 방법을 사용하십시오.

Answer 5

++ 이것은 나를 위해 일했습니다.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" 
}; 

, 어디서나 JSON 데이터와 작업

이

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

이것은 당신의 javascript 파일이 포함됩니다 : ngMocks 라이브러리를 테스트 할 때이 같은 탈 어지럽히는 등의 사용 사례에 대한 vanilla javascirpt 및 좋은 코드에서

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

참고 : - 이것은 테스트에 매우 유용하며 심지어 karma.conf.js도 아래 보이는 테스트 실행을 위해 이러한 파일을 허용합니다. 또한, 난 단지 de-cluttering 데이터와 testing/development 환경을 권장합니다.

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

희망이 있습니다.

++

이 나를 위해 일한이 답변 https://stackoverflow.com/a/24378510/4742733

UPDATE

쉬운 방법 위에 구축은 어떤 JSON 반환 코드의 하단에 function을 포함한다.

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