AngularJS: 공장 출하시 $http.JSON 파일 가져오기
저는 JSON 파일만 하드코드로 로컬로 개발하려고 합니다.JSON 파일은 다음과 같습니다(JSON Validator에 넣으면 유효합니다).
{
"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이 공장 내에서 하드코드 되었을 때 컨트롤러, 공장, HTML을 작동시켰습니다.하지만 지금은 JSON을 $http로 교체했습니다.코드를 받아도 소용없어$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
});
모든 도움에 감사드립니다.감사합니다!
다음은 검토해야 할 사항 목록입니다.
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) {
따라서 function(response)을 사용하여 성공을 호출하고 response.data를 반환하는 것은 중복됩니다.
3) success function(성공함수)은 사용자가 통과시킨 함수의 결과를 반환하지 않기 때문에 다음과 같은 작업을 수행할 수 없습니다.
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는 늘에서 시작하여 데이터가 로드되면 해당 데이터를 가리킵니다.
또는 실제 약속인 $http를 반환할 수도 있습니다.반환을 받고 다음을 사용합니다.
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;
});
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이것은, 비동기 콜을 발신하고 있기 때문입니다.
유사한 질문에 대한 자세한 내용은 이 게시물에서 설명합니다.
Angular ] [Mangular]를 합니다.$promise비동기 콜을 발신할 때 취득한 데이터를 처리합니다.
가장 간단한 버전은
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방금 의사 선생님한테 알아냈는데 이 두 가지 방법은 더 이상 사용되지 않아요
$http기존 약속 메서드의 성공과 오류는 폐지되었습니다.인 준용 use 합니다.then대신 메서드를 사용합니다.
이 답변은 저에게 많은 도움이 되었고 올바른 방향으로 인도해 주었지만, 저와 다른 사람들에게 효과가 있었던 것은 다음과 같습니다.
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);
});
});
저는 대략 이런 문제가 있습니다.Visual Studio 2013의 디버깅 AngularJs 어플리케이션이 필요합니다.
기본적으로는 IIS Express는 로컬 파일(json 등)에 대한 액세스가 제한됩니다.
그러나 먼저 JSON은 JavaScript 구문을 가지고 있습니다.
두 번째: javascript 파일을 사용할 수 있습니다.
그래서:
의 이름을JS(JSON)로
data.json->data.js를 참조해 주세요.올바른 로드)
$http.get('App/data.js').success(function (data) {...data to to page)
<script src="App/data.js"></script>)
다음으로 로드된 데이터를 일반적인 방법으로 사용합니다.물론 그것은 그냥 회피책일 뿐이다.
++ 이것으로 충분했습니다.그건…vanilla javascirpt시(de-clatering) 합니다.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>
은 당신의 것입니다.javascript되어 있습니다.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 데이터를 조작할 수 있습니다.
// working with JSON data in code
var findByIdResults = window.JSONFindByIdResults;
주의: 이 기능은 테스트에 적합하며karma.conf.js는 다음과 같이 테스트 실행용으로 이러한 파일을 받아들입니다. 이것은, 나 「 data」및 「De-cluttering de또또 also 。testing/development★★★★★★ 。
// extract from karma.conf.js
files: [
'json-data/JSONSearchResultHardcodedData.js',
'json-data/JSONFindByIdResults.js'
...
]
이게 도움이 됐으면 좋겠다.
++ 이 답변 위에 구축 https://stackoverflow.com/a/24378510/4742733
갱신하다
더 '마음대로'를 이다.function의 맨 됩니다.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"
}
}
언급URL : https://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file
'programing' 카테고리의 다른 글
| 컴포넌트를 반응시키기 위한 전달 (0) | 2023.03.28 |
|---|---|
| 로드 시 WordPress 플러그인 변환 파일 재정의 (0) | 2023.03.28 |
| 워드프레스로 삭제하지만 html은 유지합니다. (0) | 2023.03.23 |
| MAMP 설치에서 작업하는 WordPress permalinks 가져오기 (0) | 2023.03.23 |
| Wordpress 3.9 - 4.1 및 qTranslate 문제 (0) | 2023.03.23 |