मेरे एंगुलर.जेएस एनजी-मॉडल में जसन को कैसे लोड किया जाए?

Question

मुझे लगता है कि मुझे लगता है कि शायद एक बहुत स्पष्ट सवाल है, लेकिन मुझे कहीं भी जवाब नहीं मिला।

मैं बस अपने सर्वर से क्लाइंट में कुछ JSON डेटा लोड करने का प्रयास कर रहा हूं। अभी, मैं इसे AJAX कॉल (नीचे कोड) के साथ लोड करने के लिए JQuery का उपयोग कर रहा हूं।

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

यह html फ़ाइल में स्थित है। यह अब तक काम करता है, लेकिन मुद्दा यह है कि मैं AngularJS का उपयोग करना चाहता हूं। अब, जबकि एंगुलर कैन चर का उपयोग कर सकते हैं, मैं पूरी चीज को एक चर में लोड नहीं कर सकता, इसलिए मैं प्रत्येक लूप के लिए उपयोग कर सकता हूं। यह "$ स्कोप" से संबंधित प्रतीत होता है, जो आमतौर पर .js फ़ाइल में स्थित होता है।

समस्या यह है कि मैं एक .js फ़ाइल में अन्य पृष्ठों से कोड लोड नहीं कर सकता। एंगुलर का हर उदाहरण केवल सामान दिखाता है:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

तो, यह उपयोगी है, अगर आईए) हाथ से यह सब टाइप करना चाहते हैं, और बी) अगर मुझे पहले से पता है कि सभी डेटा क्या हैं ...

मुझे पहले से पता नहीं है (डेटा गतिशील है) और मैं इसे टाइप नहीं करना चाहता।

इसलिए, जब मैंने $ संसाधन का उपयोग करके AJAX कॉल को कोणीय में बदलने की कोशिश की, तो यह काम नहीं करता है। शायद मैं इसका पता नहीं लगा सकता, लेकिन यह JSON डेटा के लिए अपेक्षाकृत सरल GET अनुरोध है।

tl: dr मुझे बाहरी डेटा को कोणीय मॉडल में लोड करने के लिए AJAX कॉल करने के लिए काम नहीं मिल सकता है।

Comments

क्या हम $ संसाधन का उपयोग करके आपके प्रयास को देख सकते हैं? यह काम करना चाहिए, इसलिए शायद यह सबसे आसान है अगर हम आपकी मदद करें कि ...

— Kris Jenkins

Answer 1

जैसा कि क्रिस का उल्लेख है, आप $resourceसर्वर के साथ बातचीत करने के लिए सेवा का उपयोग कर सकते हैं , लेकिन मुझे लगता है कि आप अपनी यात्रा की शुरुआत कोणीय के साथ कर रहे हैं - मैं पिछले हफ्ते वहां गया था - इसलिए मैं सीधे $httpसेवा के साथ प्रयोग शुरू करने की सलाह देता हूं । इस मामले में आप इसकी getविधि कह सकते हैं ।

यदि आपके पास निम्नलिखित JSON है

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

आप इसे इस तरह लोड कर सकते हैं

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

getविधि एक रिटर्न वादा वस्तु जो पहला तर्क एक है सफलता कॉलबैक और दूसरा एक त्रुटि कॉलबैक।

जब आप $httpकिसी फ़ंक्शन के पैरामीटर के रूप में जोड़ते हैं तो कोणीय यह जादू करता है और $httpआपके नियंत्रक में संसाधन को इंजेक्ट करता है ।

मैंने यहाँ कुछ उदाहरण रखे हैं

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

Comments

बहुत बहुत धन्यवाद, मैंने $ http सेवा का उपयोग करने के बजाय अंत किया ... थोड़ा अलग तरीके से ... code$ http.get ('/ json')। सफलता (कार्य (प्रतिक्रिया) {$ गुंजाइश.reports = response; getData (); code जो मेरे लिए दिलचस्प है, वह वादा वस्तु है ... मैं वास्तव में इसके बारे में अधिक जानना चाहता हूं। मुझे इसका विचार बहुत पसंद है। मुझे जो दूसरी समस्या आ रही है, वह मूल रूप से अजाक्स अनुरोध पर एक लूप चल रही है। मैं लगातार पृष्ठ को "स्वचालित रूप से" ताज़ा कर सकता हूं। $ टाइमआउट मेरे लिए काम नहीं कर रहा है।

— MJR_III

मेरा मानना ​​है कि यह $ स्कोप होना चाहिए। Res.data के बजाय।

— एंटिज

प्रतिक्रिया ऑब्जेक्ट चार गुण है: config, data, headersऔर status। dataसंपत्ति में मूल्य वे हैं जो आप चाहते हैं।

— jaime

$ स्कोप होने के लायक.टोडोस = []; http अनुरोध से पहले, ताकि आपके पास कम से कम एक डिफ़ॉल्ट खाली संरचना हो ताकि आपके टेम्पलेट में त्रुटियां न हों।

— एस ..

पुन: $scope.todos = res;या $scope.todos = res.data;- अंतर नहीं है कि क्या आप एक कर रहे हैं .then(response)या एक में दिया जाता है , जबकि पूरे दिया जाता है । .success(result).successresponse.data.thenresponse

— जेसी चिशोल्म

Answer 2

यहां JSON डेटा को एक कोणीय मॉडल में लोड करने का एक सरल उदाहरण दिया गया है।

मेरे पास एक JSON 'GET' वेब सेवा है जो Microsoft के नॉर्थविंड SQL सर्वर डेटाबेस की ऑनलाइन कॉपी से ग्राहक विवरण की एक सूची लौटाती है ।

http://www.iNorthwind.com/Service1.svc/getAllCustomers

यह कुछ JSON डेटा देता है जो इस तरह दिखता है:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..और मैं इस डेटा के साथ एक ड्रॉप डाउन सूची को पॉप्युलेट करना चाहता हूं, इस तरह से देखने के लिए ...

मैं चाहता हूं कि प्रत्येक आइटम का पाठ "CompanyName" फ़ील्ड से आए, और आईडी "CustomerID" फ़ील्ड से आए।

मैं यह कैसे करूंगा ?

मेरा कोणीय नियंत्रक इस तरह दिखेगा:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... जो JSON डेटा के इस सेट के साथ एक "listOfCustomers" चर भरता है।

फिर, अपने HTML पृष्ठ में, मैं इसका उपयोग करूंगा:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

और बस। अब हम एक वेब पेज पर अपने JSON डेटा की एक सूची देख सकते हैं, जिसका उपयोग करने के लिए तैयार है।

इसकी कुंजी "एनजी-ऑप्शंस" टैग में है:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

यह आपके सिर के चारों ओर एक अजीब वाक्यविन्यास है!

जब उपयोगकर्ता इस सूची में एक आइटम का चयन करता है, तो "$ गुंजाइश.selectedCustomer" चर उस ग्राहक रिकॉर्ड की आईडी (CustomerID फ़ील्ड) पर सेट हो जाएगा।

इस उदाहरण की पूरी पटकथा यहाँ मिल सकती है:

JSON डेटा कोणीय के साथ

माइक

Comments

क्या यह वास्तव में काम करता है? आपका JSON अमान्य है (कुंजियाँ उद्धरण चिह्नों में नहीं हैं)। क्या आपको त्रुटियाँ नहीं मिलीं?

— कॉडबगस्टीन

क्षमा करें, आप सही हैं। मैंने Google Chrome से ऊपर दिए गए स्क्रीनशॉट को उत्कृष्ट JSONView एडिन इंस्टॉल किया है (ताकि आप JSON को अच्छी तरह से स्वरूपित तरीके से देख सकें)। लेकिन हां, मेरी वेब सेवा से JSON मान्य है। यदि आप मेरे लेख के लिंक पर क्लिक करते हैं, तो आप इस कोड का लाइव संस्करण देख सकते हैं।

— माइक गेल्डहिल

क्या यह काम करता है? मुझे लगता है कि यह data.GetAllCustomersResult

— ihappyk

उफ़, आप बिल्कुल सही कह रहे हैं। मैंने "GetAllCustomersResult" में JSON परिणामों को शामिल करने के लिए वेब सेवा को बदल दिया था, इसलिए हां, इसकी आवश्यकता है। मैंने कोड नमूना अपडेट किया है। सर उठाने के लिए धन्यवाद।

— माइक गिल्डहिल

Answer 3

मैं निम्नलिखित कोड का उपयोग करता हूं, हालांकि इंटरनेट में कहीं भी स्रोत को याद नहीं है।

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);