PSONing JSONP $ http.jsonp () प्रतिक्रिया angular.js में

Question

मैं कोणीय के $http.jsonp()अनुरोध का उपयोग कर रहा हूं, जो एक समारोह में लिपटे हुए जसन को सफलतापूर्वक लौटा रहा है:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).
    success(function(data, status, headers, config) {
        //what do I do here?
    }).
    error(function(data, status, headers, config) {
        $scope.error = true;
    });

लौटे फ़ंक्शन लिपटे-JSON तक कैसे पहुंचें / पार्स करें?

Comments

JSONP के साथ आप "दिए गए फ़ंक्शन-लिपटे-JSON को एक्सेस / पार्स नहीं करते हैं।" आपका कॉलबैक कहा जाता है; यह JSON डेटा को एक तर्क के रूप में प्राप्त करता है।

— मैट बॉल

मैंने ऐसा कुछ करने की कोशिश की है

— akronymn

(सॉरी हिट दर्ज करें बहुत जल्द ऊपर) मेरे कॉलबैक को किस बिंदु पर कहा जाता है? एक कोड स्निपेट वास्तव में सहायक होगा। मैंने इस बिंदु पर कई अलग-अलग चीजों की कोशिश की है और स्टम्प्ड हूं।

— akronymn

प्रतिक्रिया वापस आने पर कॉलबैक कहा जाता है। क्या आपके पास कोई फ़ंक्शन नाम है jsonp_callback? यदि नहीं, तो आपकी समस्या है।

— मैट बॉल

अभी के लिए मैंने एक सरल कार्य लिखा है, जो कि function jsonp_callback(data) { return data.found; //should be 3 }

— जोंस

Answer 1

अद्यतन: कोणीय 1.6 के बाद से

आप कॉल-अप पैरामीटर मान जाने के लिए निर्दिष्ट करने के लिए प्लेसहोल्डर के रूप में अब JSON_CALLBACK स्ट्रिंग का उपयोग नहीं कर सकते

अब आपको कॉलबैक को इस तरह परिभाषित करना होगा:

$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})

बदलें / पहुँच / घोषित परम के माध्यम से $http.defaults.jsonpCallbackParam, चूक करने के लिएcallback

नोट: आपको यह भी सुनिश्चित करना चाहिए कि आपका URL विश्वसनीय / श्वेतसूची में जोड़ा गया है:

$sceDelegateProvider.resourceUrlWhitelist

या इसके माध्यम से स्पष्ट रूप से विश्वसनीय:

$sce.trustAsResourceUrl(url)

success/errorपदावनत कर दिया गया ।

$httpविरासत वादा तरीकों successऔर errorपदावनत किया गया है और v1.6.0 में निकाल दिया जाएगा। इसके बजाय मानक तो विधि का उपयोग करें। अगर $httpProvider.useLegacyPromiseExtensionsसेट किया गया falseतो ये तरीके फेंक देंगे $http/legacy error।

उपयोग:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
var trustedUrl = $sce.trustAsResourceUrl(url);

$http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function(data){
        console.log(data.found);
    });

पिछला उत्तर: कोणीय 1.5.x और उससे पहले

आपको बस इतना callback=jsonp_callbackकरने के लिए परिवर्तन करना चाहिए callback=JSON_CALLBACK:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

और फिर आपके .successफ़ंक्शन को आग लगनी चाहिए जैसे कि अगर वापसी सफल रही तो आपके पास यह है।

इस तरह से करने से आपको वैश्विक स्थान को गंदा करना पड़ता है। यह यहाँ AngularJS प्रलेखन में प्रलेखित है ।

इस विधि का उपयोग करने के लिए मैट बॉल की फिडेल अपडेट की गई: http://jsfiddle.net/subhaze/a4Rc2/114/

पूर्ण उदाहरण:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)
    .success(function(data){
        console.log(data.found);
    });

Comments

मेरा एक अलग कॉलबैक लौट रहा है: angular.callbacks._0 मुझे इसे कैसे ठीक करना चाहिए?

— राबेराना

@ eaon21 क्या आपके पास एक बेला उदाहरण है?

— subhaze

@ ea2121 यह वांछित व्यवहार है, कोणीय विकल्प JSON_CALLBACK एक गतिशील रूप से उत्पन्न करने के लिए, आपको इस पर ध्यान देने की ज़रूरत नहीं है

— Guillaume86

और उदाहरण के लिए आप Youtube api को कैसे कहते हैं?

— गीनो

ऐसा लगता है कि एपीआई के साथ बातचीत के लिए उनके अपने ग्राहक पक्ष हैं। आपके पास कोई भी उदाहरण जो आप क्या करने की कोशिश कर रहे हैं उसे संकीर्ण करने में मदद कर सकता है?

— 14:17

Answer 2

सबसे महत्वपूर्ण बात यह मैं काफी कुछ समय के लिए समझ में नहीं आया कि अनुरोध करना चाहिए , "कॉलबैक = JSON_CALLBACK" हो क्योंकि AngularJS संशोधित अनुरोध यूआरएल , "JSON_CALLBACK" के लिए अद्वितीय पहचानकर्ता प्रतिस्थापन। सर्वर प्रतिक्रिया को हार्ड कॉलिंग "JSON_CALLBACK" के बजाय 'कॉलबैक' पैरामीटर के मान का उपयोग करना चाहिए:

JSON_CALLBACK(json_response);  // wrong!

चूंकि मैं अपनी खुद की PHP सर्वर स्क्रिप्ट लिख रहा था, मैंने सोचा कि मुझे पता था कि यह किस फ़ंक्शन का नाम चाहता था और अनुरोध में "कॉलबैक = JSON_CALLBACK" पास करने की आवश्यकता नहीं थी। बड़ी गलती!

AngularJS "JSON_CALLBACK" को एक अद्वितीय फ़ंक्शन नाम (जैसे "कॉलबैक = angular.callbacks._0") के साथ अनुरोध में बदल देता है, और सर्वर प्रतिक्रिया को उस मान को वापस करना चाहिए:

angular.callbacks._0(json_response);

Comments

क्या किसी भी तरह से हम कॉलबैक का नाम बदल सकते हैं ताकि यह हार्ड-कोडित स्थिर jsonफ़ाइल के साथ काम करे ।

— पावेल निकोलोव

Answer 3

यह बहुत मददगार था। कोणीय JQuery की तरह बिल्कुल काम नहीं करता है। इसकी अपनी jsonp () विधि है, जिसे क्वेरी स्ट्रिंग के अंत में वास्तव में "& callback = JSON_CALLBACK" की आवश्यकता होती है। यहाँ एक उदाहरण है:

var librivoxSearch = angular.module('librivoxSearch', []);
librivoxSearch.controller('librivoxSearchController', function ($scope, $http) {
    $http.jsonp('http://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK').success(function (data) {
        $scope.data = data;
    });
});

फिर अपने कोणीय टेम्पलेट में {{डेटा}} प्रदर्शित या हेरफेर करें।

Answer 4

यह आपके लिए ठीक काम करना चाहिए, जब तक कि फ़ंक्शन jsonp_callbackवैश्विक दायरे में दिखाई देता है:

function jsonp_callback(data) {
    // returning from async callbacks is (generally) meaningless
    console.log(data.found);
}

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url);

पूर्ण डेमो: http://jsfiddle.net/mattball/a4Rc2/ (अस्वीकरण: मैंने पहले कभी कोई AngularJS कोड नहीं लिखा है)

Comments

यह किया! यह उस दायरे का पता लगाता है जिसे मैं गड़बड़ कर रहा था। धन्यवाद!

— akronymn

यह उत्तर बहुत उपयोगी नहीं था। यह AngularJS के दायरे का पालन नहीं करता है।

— xil3

@ xil3 प्रतिक्रिया के लिए धन्यवाद; दुर्भाग्य से केवल ओपी (अक्रोनिमन) ही स्वीकृत उत्तर को बदल सकता है, मुझे नहीं।

— मैट बॉल

@DanieleBrugnara कृपया इस उत्तर के लिए पिछली टिप्पणियाँ देखें।

— मैट बॉल

Answer 5

आपको अभी भी callbackपरमेस में सेट करने की आवश्यकता है :

var params = {
  'a': b,
  'token_auth': TOKEN,
  'callback': 'functionName'
};
$sce.trustAsResourceUrl(url);

$http.jsonp(url, {
  params: params
});

जहाँ 'functionName' विश्व स्तर पर परिभाषित फ़ंक्शन का एक कड़ा संदर्भ है। आप इसे अपने कोणीय लिपि के बाहर परिभाषित कर सकते हैं और फिर अपने मॉड्यूल में इसे फिर से परिभाषित कर सकते हैं।

Answer 6

पार्सिंग के लिए यह करें-

   $http.jsonp(url).
    success(function(data, status, headers, config) {
    //what do I do here?
     $scope.data=data;
}).

या आप `$ गुंजाइश.data = JSON.Stringify (डेटा) का उपयोग कर सकते हैं;

कोणीय टेम्प्लेट में आप इसका उपयोग कर सकते हैं

{{data}}

Answer 7

मेरे लिए उपरोक्त समाधानों ने केवल एक बार काम किया, मैंने अनुरोध पैरामीटर में "प्रारूप = जोंसप" जोड़ा।

Answer 8

मैं कोणीय 1.6.4 का उपयोग कर रहा हूं और सब्ज़ द्वारा प्रदान किया गया उत्तर मेरे लिए काम नहीं कर रहा है। मैंने इसे थोड़ा संशोधित किया और फिर इसने काम किया - आपको $ sce.trustAsResourceUrl द्वारा लौटाए गए मान का उपयोग करना होगा । पूर्ण कोड:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
url = $sce.trustAsResourceUrl(url);

$http.jsonp(url, {jsonpCallbackParam: 'callback'})
    .then(function(data){
        console.log(data.found);
    });