javascript - जेसन को मेरे angular.js एनजी मॉडल में कैसे लोड करें?




ajax angularjs model (4)

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

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

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

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

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

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

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

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

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

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


Answers

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

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

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

मेरे पास एक 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"
            }
        ]
    }

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

मैं प्रत्येक आइटम का टेक्स्ट "कंपनी नाम" फ़ील्ड से और "ग्राहक आईडी" फ़ील्ड से आने वाली आईडी से चाहता हूं।

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

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

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" चर भरता है।

फिर, मेरे एचटीएमएल पेज में, मैं इसका इस्तेमाल करूंगा:

<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

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

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

इस उदाहरण के लिए पूर्ण स्क्रिप्ट यहां पाई जा सकती है:

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

माइक


जैसा कि क्रिस का उल्लेख है, आप सर्वर से बातचीत करने के लिए $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 संसाधन इंजेक्ट करता है।

मैंने यहां कुछ उदाहरण दिए हैं


यह हर ब्राउज़र के लिए काम करता है:

window.location.href = 'your_url';






javascript ajax angularjs model