angularjs में फॉरेस्ट लूप


110

मैं के माध्यम से जा रहा था forEach loopमें AngularJS। ऐसे कुछ बिंदु हैं जिनके बारे में मुझे समझ नहीं आया।

  1. पुनरावृत्ति फ़ंक्शन का उपयोग क्या है? क्या इसके बिना जाने का कोई रास्ता है?
  2. नीचे दिखाए गए अनुसार कुंजी और मूल्य का क्या महत्व है?

angular.forEach($scope.data, function(value, key){});

पुनश्च: मैंने इस फ़ंक्शन को तर्कों के बिना चलाने की कोशिश की और यह काम नहीं किया।

यहाँ मेरा है json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

मेरी JavaScriptफ़ाइल:

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

app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );

   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});

एक और सवाल : अगर ऊपर का फ़ंक्शन कंडिशन में दर्ज नहीं होता है और कंसोल में "यूजरनेम थोमस" प्रिंट करता है?


6
क्योंकि आप successअपने होने की प्रतीक्षा नहीं कर रहे हैं $http.get(), इस प्रकार, जब angular.forEach()होता है, तब $scope.dataभी अपरिभाषित होता है।
टॉम

1
क्या कोड को अंजाम देने के लिए कोई विशेष तरीका है जब तक कि
जोसन

इस कोणीय में बदल दें ।forEach (मान, फ़ंक्शन (मान, कुंजी) {कंसोल.लॉग (कुंजी + ':' + value.Name);});
इज़राइल Ocbina

जवाबों:


208

प्रश्न 1 और 2

तो मूल रूप से, पहला पैरामीटर उस पर पुनरावृति करने के लिए ऑब्जेक्ट है। यह एक सरणी या एक वस्तु हो सकती है। यदि यह इस तरह एक वस्तु है:

var values = {name: 'misko', gender: 'male'};

कोणीय प्रत्येक मान एक के बाद एक पहले एक नाम लेगा, दूसरा लिंग है।

यदि आपकी वस्तु पर चलना एक सरणी है (संभव भी है), इस तरह:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEach पहली वस्तु द्वारा एक के बाद एक ले जाएगा, फिर दूसरी वस्तु।

इस प्रत्येक ऑब्जेक्ट के लिए, यह उन्हें एक-एक करके ले जाएगा और प्रत्येक मूल्य के लिए एक विशिष्ट कोड निष्पादित करेगा। इस कोड को इटरेटर फ़ंक्शन कहा जाता है । यदि आप किसी संग्रह की एक सरणी का उपयोग कर रहे हैं तो forEach स्मार्ट है और अलग तरह से व्यवहार करता है। यहाँ कुछ छूट है:

var obj = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(obj, function(value, key) {
  console.log(key + ': ' + value);
});
// it will log two iteration like this
// name: misko
// gender: male

तो कुंजी आपकी कुंजी का स्ट्रिंग मान है और मान है ... मान। आप इस तरह से अपने मूल्य का उपयोग करने के लिए कुंजी का उपयोग कर सकते हैं:obj['name'] = 'John'

यदि इस बार आप इस तरह एक सरणी प्रदर्शित करते हैं:

var values = [{ "Name" : "Thomas", "Password" : "thomasTheKing" },
           { "Name" : "Linda", "Password" : "lindatheQueen" }];
angular.forEach(values, function(value, key){
     console.log(key + ': ' + value);
});
// it will log two iteration like this
// 0: [object Object]
// 1: [object Object]

तो मान आपकी वस्तु (संग्रह) है, और कुंजी आपके सरणी का सूचकांक है:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}

मुझे आशा है कि यह आपके प्रश्न का उत्तर देगा। यहाँ एक JSFiddle कुछ कोड और परीक्षण चलाने के लिए यदि आप चाहते हैं: http://jsfiddle.net/ygahqdge/

अपना कोड डीबग करना

समस्या इस तथ्य से आती है कि यह $http.get()एक अतुल्यकालिक अनुरोध है।

आप अपने बेटे पर एक प्रश्न भेजने के लिए, तब जब आप ब्राउज़र अंत को डाउनलोड करने से यह सफलता पर अमल। लेकिन अपने अनुरोध को भेजने के बाद ही angular.forEachअपने JSON के जवाब का इंतजार किए बिना एक पाश प्रदर्शन करें।

आपको सफलता समारोह में लूप को शामिल करने की आवश्यकता है

var app = angular.module('testModule', [])
    .controller('testController', ['$scope', '$http', function($scope, $http){
    $http.get('Data/info.json').then(function(data){
         $scope.data = data;

         angular.forEach($scope.data, function(value, key){
         if(value.Password == "thomasTheKing")
           console.log("username is thomas");
         });
    });

});

यह काम करना चाहिए।

अधिक गहराई से जा रहा है

$ Http API पर आधारित टाल / एपीआई वादा $ q सेवा द्वारा उजागर। जबकि साधारण उपयोग पैटर्न के लिए यह बहुत मायने नहीं रखता है, उन्नत उपयोग के लिए इन एपीआई और अपने द्वारा प्रदान की गई गारंटी के साथ खुद को परिचित करना महत्वपूर्ण है।

आप API को स्थगित / वादा पर एक नज़र दे सकते हैं , यह सहज अतुल्यकालिक क्रियाएं बनाने के लिए कोणीय की एक महत्वपूर्ण अवधारणा है।


2
कॉलिन बी ( यहाँ प्रोफाइल ।) टिप्पणी करना चाहता था कि successऔर error पदावनत कर दिया गया है । सुझाव के thenबजाय विधि का उपयोग करना success। अब, @Colin, बाहर जाओ और 50 प्रतिनिधि प्राप्त करने के लिए कुछ सवालों के जवाब दो! : पी
ड्रू

3
Async समानांतर नहीं है। समानांतर के लिए, उसे वेबवर्कर्स की आवश्यकता होगी, वादों की नहीं। टिनी बिट पांडित्य, लेकिन जब भी ऐसा होता है उस पर गलत सूचना को रोकने के लायक है।
काइल बेकर

1
धन्यवाद @KyleBaker, मैंने इस उत्तर को अपडेट किया, आप सही हैं "समानांतर" भाषा का दुरुपयोग था।
sebastienbarbier

@sebastienbarbier क्या आप इस stackoverflow.com/questions/50100381/…
निकसन

7

आपको नीचे दिखाए गए JSON के लिए नेस्टेड कोणीय.forEach छोरों का उपयोग करना है:

 var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

    angular.forEach(values,function(value,key){
        angular.forEach(value,function(v1,k1){//this is nested angular.forEach loop
            console.log(k1+":"+v1);
        });
    });

1
नहीं, आप एकल लूप का उपयोग करेंगे, और स्पष्ट रूप से, इस मामले में, आपको केवल देशी forEach (), a ला values.forEach(object => console.log($ {object.name}: $ {object.password} का उपयोग करना चाहिए ))
काइल बेकर

बस लाइन कंसोल बदलें। क्लॉग (कुंजी + ':' + मान); INTO कंसोल.लॉग (की + ':' + वैल्यू.नाम);
इज़राइल Ocbina

5

angular.forEach()आपके माध्यम से पुनरावृति जाएगा jsonवस्तु।

पहला पुनरावृत्ति,

कुंजी = 0, मान = {"नाम": "थॉमस", "पासवर्ड": "thomasTheKing"}

दूसरा पुनरावृत्ति,

कुंजी = 1, मान = {"नाम": "लिंडा", "पासवर्ड": "लिंडथे क्यूवेन" "

अपने मूल्य प्राप्त करने के लिए name, आप उपयोग कर सकते हैं value.nameया value["name"]। उसी के साथ password, आप उपयोग करते हैं value.passwordया value["password"]

नीचे दिया गया कोड आपको वही देगा जो आप चाहते हैं:

   angular.forEach(json, function (value, key)
         {
                //console.log(key);
                //console.log(value);
                if (value.password == "thomasTheKing") {
                    console.log("username is thomas");
                }
         });

2

इसमें लाइन बदलें

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value);
 });

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value.Name);
 });

2

कोणीय 7 में लूप के लिए नीचे की तरह है

var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

for (let item of values)
{
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.