AngularJS: কারখানা $ http.get JSON ফাইল ON

Question 1

আমি কেবল একটি হার্ডকোডযুক্ত জেএসএন ফাইল দিয়ে স্থানীয়ভাবে বিকাশ করতে চাই। আমার জেএসওএন ফাইলটি নিম্নরূপ (জেএসএন বৈধকারীর মধ্যে রাখার সময় বৈধ):

{
    "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 কারখানার ভিতরে হার্ডকোড করা অবস্থায় আমি আমার কন্ট্রোলার, কারখানা এবং এইচটিএমএল কাজ করেছিলাম। তবে, এখন আমি JSON কে replaced http.get কোড দিয়ে প্রতিস্থাপন করেছি, এটি কার্যকর হয় না। আমি $ এইচটিপি এবং $ সংস্থান উভয়ের অনেকগুলি বিভিন্ন উদাহরণ দেখেছি তবে কোথায় যেতে হবে তা নিশ্চিত নয়। আমি সহজ সমাধান খুঁজছি। আমি কেবল এনজি-রিপিট এবং অনুরূপ নির্দেশের জন্য ডেটা টানতে চেষ্টা করছি।

কারখানা:

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

প্রত্যেকের সাহায্যকে সাধুবাদ জানাই। ধন্যবাদ!

Question 2

ঠিক আছে, এখানে দেখার জন্য এখানে একটি তালিকা রয়েছে:

1) আপনি যদি কোনও প্রকারের ওয়েবসভারটি চালাচ্ছেন না এবং কেবল ফাইল: //index.html দিয়ে পরীক্ষা করছেন, তবে আপনি সম্ভবত একই-উত্স নীতি সম্পর্কিত সমস্যা নিয়ে চলেছেন। দেখা:

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

অনেক ব্রাউজার স্থানীয়ভাবে হোস্ট করা ফাইলগুলি স্থানীয়ভাবে হোস্ট করা ফাইলগুলিতে অ্যাক্সেসের অনুমতি দেয় না। ফায়ারফক্স এটির অনুমতি দেয় তবে কেবলমাত্র আপনি যে ফাইলটি লোড করছেন সে ফাইলটি যদি এইচটিএমএল ফাইল (বা একটি সাবফোল্ডার) হিসাবে একই ফোল্ডারে থাকে।

2) সাফল্য ফাংশনটি $ http.get () থেকে ফিরে এসেছে আপনার জন্য ইতিমধ্যে ফলাফল অবজেক্টটিকে আলাদা করে দিয়েছে:

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

সুতরাং ফাংশন (প্রতিক্রিয়া) এবং প্রতিক্রিয়া.ডেটা দিয়ে সাফল্য কল করা বাড়াবাড়ি।

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

৪) তবে আপনি যা করতে চান তা হ'ল কোনও সম্পত্তি সহ কোনও বস্তুর একটি রেফারেন্স ফিরিয়ে দেওয়া হবে যা ডেটা লোড হওয়ার পরে পপুলেশন হবে, সুতরাং এরকম কিছু:

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

Question 3

আমি লক্ষ করতে চেয়েছিলাম যে গৃহীত উত্তরের চতুর্থ অংশটি ভুল ।

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

@ কার্ল জিলস লিখেছেন উপরের কোডটি ব্যর্থ হবে কারণ objএটি ডেটা পাওয়ার আগে সর্বদা ফিরে আসবে (সুতরাং মানটি সর্বদা থাকবে null) এবং এটি কারণ আমরা একটি অ্যাসিঙ্ক্রোনাস কল করছি।

অনুরূপ প্রশ্নের বিবরণ এই পোস্টে আলোচনা করা হয়

কৌণিক ক্ষেত্রে, $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উত্তরাধিকার প্রতিশ্রুতি পদ্ধতি সাফল্য এবং ত্রুটি অবচিত হয়েছে। thenপরিবর্তে মান পদ্ধতিটি ব্যবহার করুন।

Question 4

এই উত্তরটি আমাকে অনেক সাহায্য করেছে এবং আমাকে সঠিক দিকে নির্দেশ করেছে তবে আমার পক্ষে এবং অন্যদের জন্য যা কাজ করেছে তা হ'ল:

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

Question 5

আমার প্রায় এই সমস্যা আছে। আমার ভিজ্যুয়াল স্টুডিও 2013 থেকে অ্যাংুলারজেএস অ্যাপ্লিকেশনটি প্রয়োজন

ডিফল্টরূপে আইআইএস এক্সপ্রেস স্থানীয় ফাইলগুলিতে অ্যাক্সেসকে সীমাবদ্ধ করে (যেমন জসন)।

তবে, প্রথম: JSON এর জাভাস্ক্রিপ্ট সিনট্যাক্স রয়েছে।

দ্বিতীয়: জাভাস্ক্রিপ্ট ফাইল অনুমোদিত।

সুতরাং:

JSON এর নামকরণ জেএস ( data.json->data.js) করুন।
সঠিক লোড কমান্ড ($http.get('App/data.js').success(function (data) {...
স্ক্রিপ্ট ডেটা.জেড পৃষ্ঠাতে লোড করুন ( <script src="App/data.js"></script>)

এরপরে স্বাভাবিকভাবে লোড হওয়া ডেটা ব্যবহার করুন। এটি অবশ্যই একচেটিয়া কাজ।

Question 6

++ এটি আমার পক্ষে কাজ করেছে। এটি লাইব্রেরির vanilla javascirptসাথে টেস্ট করার সময় ডি-ক্লটারিংয়ের মতো ব্যবহারের ক্ষেত্রে এবং ভাল 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নীচে দেখানো টেস্টগুলির জন্য এই ফাইলগুলি গ্রহণ করে। এছাড়াও, আমি কেবল ডি-ক্লটারিং ডেটা এবং 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"
   }
}