AngularJS में वस्तुओं के सरणी से आईडी द्वारा विशिष्ट वस्तु प्राप्त करें


111

मेरे पास एक JSON फाइल है जिसमें कुछ डेटा हैं जो मैं अपनी AngularJS वेबसाइट पर एक्सेस करना चाहता हूं। अब मैं जो चाहता हूं, वह है कि केवल एक ऑब्जेक्ट को ऐरे से प्राप्त करें। इसलिए मैं आईडी 1 के साथ उदाहरण के लिए पसंद करता हूं।

डेटा इस तरह दिखता है:

{ "results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] }

मैं इस तरह से डेटा को AngularJS $ http कार्यक्षमता के साथ लोड करना चाहता हूं:

$http.get("data/SampleData.json");

जो काम कर रहा है। लेकिन जिस सरणी से मैं प्राप्त करता हूं, उससे अब मैं एक विशिष्ट डेटा ऑब्जेक्ट (आईडी द्वारा) कैसे प्राप्त कर सकता हूं $http.get?

आपकी सहायता के लिये पहले से ही धन्यवाद।

मार्किट को बधाई


क्या आपने इसे खुद जाना है? यदि हां, तो क्या हम देख सकते हैं कि आप क्या लेकर आए हैं?
सिमोनचिल्ड्स

1
वैसे मुझे इस बात का कोई अंदाज़ा नहीं है कि AngularJS का उपयोग करना किस तरह से सबसे अच्छा होगा। मुझे जो पसंद नहीं है वह सरणी पर चलना और आईडी पर एक समान करना है। शायद एक बेहतर तरीका है?
मूनली

आपको ऐसी प्रसंस्करण के लिए अंडरस्कोरज या समान पुस्तकालयों पर भरोसा करना चाहिए। AngularJS MVVM फ्रेमवर्क है और इसके लिए एपीआई नहीं हो सकता है।
विजय पांडे

@marcbaur - आपको सरणी को पुनरावृत्त करना होगा। यहां तक ​​कि अगर आप अंडरस्कोर, या कुछ समान का उपयोग करते हैं, तो यह फ़ंक्शन है, पर्दे के पीछे, बस पुनरावृत्ति कर रहे हैं।
एडम

1
कृपया इसके लिए कोणीय कोड जोड़ें
अंकुश कोंदलकर

जवाबों:


4

ऐसा करने का एकमात्र तरीका सरणी पर ओवररेट करना है। जाहिर है कि यदि आप सुनिश्चित हैं कि परिणाम आईडी द्वारा आदेश दिए गए हैं तो आप एक द्विआधारी खोज कर सकते हैं


46
... मुझे आशा है कि इस उत्तर को पढ़ने के बाद लोगों को यह नहीं लगता कि एक सरणी को सॉर्ट करना अच्छा लगता है फिर एक द्विआधारी खोज करें। द्विआधारी खोज चतुर है , निश्चित है, लेकिन केवल अगर सरणी पहले से ही सॉर्ट की गई है, और वास्तव में है: 1. खराब तरीके से लागू करना आसान, 2. खराब तरीके से लागू होने पर पढ़ने के लिए कठिन।
बेन लेश

4
मैं बहुत सराहना करूंगा अगर डाउनवोटर्स अपने निर्णय को प्रेरित कर सकते हैं।
एंटोनियो ई।

1
डिफ़ॉल्ट जावास्क्रिप्ट द्वारा ऐरे प्रकार की विधि खोज () है। खोज () विधि सरणी में पहले तत्व का मान लौटाती है जो प्रदान किए गए परीक्षण फ़ंक्शन को संतुष्ट करता है।
abosancic

246

ES6 समाधान का उपयोग करना

इस उत्तर को पढ़ने वालों के लिए, यदि आप ES6 का उपयोग कर रहे हैं, तो findविधि सरणियों में जोड़ी गई थी। तो एक ही संग्रह मानकर, समाधान होगा:

const foo = { "results": [
    {
        "id": 12,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] };
foo.results.find(item => item.id === 2)

मैं अब पूरी तरह से इस समाधान के लिए जाना होगा, जैसा कि कोणीय या किसी अन्य ढांचे से कम बंधा हुआ है। शुद्ध जावास्क्रिप्ट।

कोणीय समाधान (पुराना समाधान)

मैंने निम्न कार्य करके इस समस्या को हल करने का लक्ष्य रखा है:

$filter('filter')(foo.results, {id: 1})[0];

उपयोग का मामला उदाहरण:

app.controller('FooCtrl', ['$filter', function($filter) {
    var foo = { "results": [
        {
            "id": 12,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] };

    // We filter the array by id, the result is an array
    // so we select the element 0

    single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0];

    // If you want to see the result, just check the log
    console.log(single_object);
}]);

प्लंकर: http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview


1
वास्तव में, मुझे लगता है कि यह करता है! सरणी लाने के बाद, आप आइटम को सही आईडी से फ़िल्टर करने के लिए $ फ़िल्टर फ़ंक्शन का उपयोग कर सकते हैं।
जुप

10
यह स्वीकृत उत्तर होना चाहिए। मेरे दिमाग में एक ही सवाल था और यह जवाब केवल वही है जो मौजूदा AngularJS और isn 'व्हील को रीइनवेंट करने के लिए इस्तेमाल करता है। और हाँ, यह काम कर रहा है।
ज़ोरान पी।

4
इसके लिए +1 स्वीकृत उत्तर है। कोणीय पुस्तकालयों का उपयोग करते हुए सबसे अच्छा समाधान।
मेकी

1
एक अभिव्यक्ति में फिल्टर के साथ प्लंकर: plnkr.co/edit/yc0uZejGqWTcUVKvI7Tq?p=preview
एरोन रोलर

4
ध्यान रखें कि फ़िल्टर डिफ़ॉल्ट रूप से केस असंवेदनशील सब्सट्रेटिंग द्वारा ढूंढते हैं। तो (foo.results, {id: 2}) रिटर्न [{id: 12}, {id: 2}], {id: 222}] लेकिन (foo.results, function (d) {रिटर्न d.id == = 2;}) रिटर्न [{आईडी: 2}]
रयान.लेड

26

इस पुराने पोस्ट को देखने वाले किसी भी व्यक्ति के लिए, वर्तमान में यह सबसे आसान तरीका है। इसके लिए केवल एक AngularJS की आवश्यकता होती है $filter। इसका विलेमो जवाब देता है, लेकिन छोटा और समझने में आसान है।

{ 
    "results": [
        {
            "id": 1,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] 
}

var object_by_id = $filter('filter')(foo.results, {id: 2 })[0];
// Returns { id: 2, name: "Beispiel" }

चेतावनी

जैसा @mpgn कहता है, यह ठीक से काम नहीं करता है । यह अधिक परिणाम पकड़ेगा। उदाहरण: जब आप 3 खोजते हैं तो यह 23 को भी पकड़ लेगा


1
भी पकड़ आईडी: 24 12 222 2002 आदि
mpgn

मुझे लगता है कि [0]इससे संग्रह से मिलने वाले पहले परिणाम को वापस करने का कारण होगा, इसलिए यह केवल तभी काम करेगा जब आपका संग्रह क्रमबद्ध हो और जिस वस्तु की आप तलाश कर रहे हैं वह पहली बार इसके पुनरावृत्ति के दौरान मिले। उदाहरण के लिए। अगर वहाँ एक आईडी है: 12 जो आईडी से पहले आता है: 2, यह आईडी लौटाएगा: 12.
फ्रोजन मटर की रोडी

25

व्यक्तिगत रूप से मैं इस तरह के सामान के लिए अंडरस्कोर का उपयोग करता हूं ... इसलिए

a = _.find(results,function(rw){ return rw.id == 2 });

तब "ए" वह पंक्ति होगी जिसे आप अपने एरे से चाहते थे जहां आईडी 2 के बराबर थी


1
मैं वास्तव में अंडरस्कोर से प्यार करता हूं , लेकिन, क्या यह एक और जावास्क्रिप्ट लाइब्रेरी होने से भी बदतर है?
जेनुअल्फा

8
ध्यान दें कि findसंभावित रूप से कई ऑब्जेक्ट वापस कर सकते हैं। चूँकि हम केवल एक चाहते हैं, हम उपयोग कर सकते हैं findWhereजो केवल पहली घटना लौटाता है (जिसे हम जानते हैं कि केवल घटना है), उदाहरण के लिए a = _.findWhere(results, {id: 2})
gregoltsov

16

मैं सिर्फ विलेमोज़ जवाब में कुछ जोड़ना चाहता हूं । HTML के अंदर सीधे लिखा हुआ कोड इस तरह दिखेगा:

{{(FooController.results | filter : {id: 1})[0].name }}

यह मानते हुए कि "परिणाम" आपके FooController का एक चर है और आप फ़िल्टर्ड आइटम की "नाम" संपत्ति प्रदर्शित करना चाहते हैं।


@ Ena- फ़िल्टर के परिणाम की जाँच कैसे करें अशक्त या अपरिभाषित नहीं है?
अभिजीत

मैंने इस HTML संस्करण का उपयोग किया क्योंकि मुझे यकीन था कि एक परिणाम मौजूद था। मैंने कोशिश की और अगर कोई परिणाम नहीं है तो कंसोल कोई त्रुटि नहीं देता है, यह बस पाठ को खाली छोड़ देता है। यदि आपको कोई तर्क करने की आवश्यकता है यदि कोई परिणाम नहीं मिला है, तो मुझे लगता है कि जाने का सबसे अच्छा तरीका विलेमस जवाब (नियंत्रक के साथ जेएस कोड) है। उस उदाहरण में, आपको तब HTML में जांचना चाहिए कि सिंगल_बॉज चर शून्य या अपरिभाषित है।
एना

2
{{(FooController.results | फ़िल्टर: {आईडी: 1}) [0] .name}: सच} - अगर किसी को एक सटीक मैच की तलाश है
जॉर्ज शारवाज़े

12

आप ng-repeatडेटा का उपयोग कर सकते हैं और ले सकते हैं यदि डेटा ng-show उदाहरण के लिए उपयोग के लिए आप जो देख रहे हैं उससे मेल खाता है :

 <div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>    

2
यदि आपके सरणी में एक तुच्छ संख्या से अधिक आइटम हैं, तो यह बहुत सारे अनावश्यक स्कोप बनाएगा जो आपके एप्लिकेशन को धीमा कर सकता है।
DIMM रीपर

9

आप अपने सरणी पर सिर्फ लूप कर सकते हैं:

var doc = { /* your json */ };

function getById(arr, id) {
    for (var d = 0, len = arr.length; d < len; d += 1) {
        if (arr[d].id === id) {
            return arr[d];
        }
    }
}

var doc_id_2 = getById(doc.results, 2);

यदि आप इस गन्दे लूप को लिखना नहीं चाहते हैं, तो आप अंडरस्कोर। Js या लो-डैश (बाद में उदाहरण) का उपयोग करने पर विचार कर सकते हैं :

var doc_id_2 = _.filter(doc.results, {id: 2})[0]

8

यदि आप राज्य आईडी के आधार पर शहर जैसी वस्तुओं की सूची चाहते हैं तो उपयोग करें

var state_Id = 5;
var items = ($filter('filter')(citylist, {stateId: state_Id }));

7

दुर्भाग्य से (जब तक मैं गलत नहीं हूँ), मुझे लगता है कि आपको परिणाम ऑब्जेक्ट पर पुनरावृति करने की आवश्यकता है।

for(var i = 0; i < results.length; i += 1){
    var result = results[i];
    if(result.id === id){
        return result;
    }
}

सही मिलान आईडी मिलते ही कम से कम इस तरह से यह पुनरावृत्ति से बाहर हो जाएगा।


क्यों? क्या आपके पास वापस जाने के लिए कुछ है?
सिमोनचिल्ड्स

11
अच्छा, क्या आप जानते हैं ..? अपने तर्क का मुकाबला करने के अच्छा भागों और मैं - मैं सिर्फ फिर से पढ़ जावास्क्रिप्ट के लिए रवाना हो गया था हूँ गलत! इस समय के लिए मैं यह गलत कर रहा हूँ! हालांकि इससे मुझे कोई समस्या नहीं हुई है ... फिर भी। मैंने अपना उत्तर अपडेट कर दिया है।
simonlchilds

6

स्थिति क्यों उलझी? यह कुछ इस तरह के समारोह सरल है:

function findBySpecField(data, reqField, value, resField) {
    var container = data;
    for (var i = 0; i < container.length; i++) {
        if (container[i][reqField] == value) {
            return(container[i][resField]);
        }
    }
    return '';
}

उदाहरण:

var data=[{
            "id": 502100,
            "name": "Bərdə filialı"
        },
        {
            "id": 502122
            "name": "10 saylı filialı"
        },
        {
            "id": 503176
            "name": "5 sayli filialı"
        }]

console.log('Result is  '+findBySpecField(data,'id','502100','name'));

उत्पादन:

Result is Bərdə filialı

4
$scope.olkes = [{'id':11, 'name':'---Zəhmət olmasa seçim edin---'},
                {'id':15, 'name':'Türkyə'},
                {'id':45, 'name':'Azərbaycan'},
                {'id':60, 'name':'Rusya'},
                {'id':64, 'name':'Gürcüstan'},
                {'id':65, 'name':'Qazaxıstan'}];

<span>{{(olkes | filter: {id:45})[0].name}}</span>

आउटपुट: Azərbaycan


2

यदि आप कर सकते हैं, तो आईडी के रूप में सरणी इंडेक्स का उपयोग करके अपने JSON डेटा संरचना को डिज़ाइन करें। आप अपने JSON सरणियों को तब तक "सामान्यीकृत" कर सकते हैं जब तक कि आपको आरडीबीएमएस जैसी किसी चीज को "प्राथमिक कुंजी" और "विदेशी कुंजी" के रूप में सरणी इंडेक्स का उपयोग करने में कोई समस्या नहीं है। जैसे, भविष्य में, आप ऐसा कुछ भी कर सकते हैं:

function getParentById(childID) {
var parentObject = parentArray[childArray[childID].parentID];
return parentObject;
}

यह "बाय डिजाइन" का समाधान है । आपके मामले के लिए, बस:

var nameToFind = results[idToQuery - 1].name;

बेशक, यदि आपका आईडी प्रारूप "XX-0001" जैसा कुछ है, जिसका सरणी सूचकांक 0 है , तो आप आईडी को मैप करने के लिए कुछ स्ट्रिंग हेरफेर कर सकते हैं; या इसके बारे में और कुछ नहीं किया जा सकता है, सिवाय इसके कि पुनरावृत्ति दृष्टिकोण के अलावा।


2

मुझे पता है कि मुझे जवाब देने में बहुत देर हो चुकी है लेकिन यह हमेशा बेहतर है कि मैं बिल्कुल नहीं दिखाऊं। ES6 इसे प्राप्त करने का तरीका:

$http.get("data/SampleData.json").then(response => {
let id = 'xyz';
let item = response.data.results.find(result => result.id === id);
console.log(item); //your desired item
});

2

आईडी द्वारा सरणी से (एक) तत्व प्राप्त करने का सरल तरीका:

खोज () विधि सरणी में पहले तत्व का मान लौटाती है जो प्रदान किए गए परीक्षण फ़ंक्शन को संतुष्ट करता है। अन्यथा अपरिभाषित वापस कर दिया जाता है।

function isBigEnough(element) {
    return element >= 15;
}

var integers = [12, 5, 8, 130, 160, 44];
integers.find(isBigEnough); // 130  only one element - first

आपको उपरोक्त टिप्पणियों की तरह फ़िल्टर () और प्रथम तत्व xx.filter () [0] को पकड़ने की आवश्यकता नहीं है

सरणी में वस्तुओं के लिए भी ऐसा ही है

var foo = {
"results" : [{
    "id" : 1,
    "name" : "Test"
}, {
    "id" : 2,
    "name" : "Beispiel"
}, {
    "id" : 3,
    "name" : "Sample"
}
]};

var secondElement = foo.results.find(function(item){
    return item.id == 2;
});

var json = JSON.stringify(secondElement);
console.log(json);

बेशक, यदि आपके पास एक से अधिक आईडी हैं तो सभी ऑब्जेक्ट प्राप्त करने के लिए फ़िल्टर () विधि का उपयोग करें। चियर्स

function isBigEnough(element) {
    return element >= 15;
}

var integers = [12, 5, 8, 130, 160, 44];
integers.find(isBigEnough); // 130  only one element - first

var foo = {
"results" : [{
    "id" : 1,
    "name" : "Test"
}, {
    "id" : 2,
    "name" : "Beispiel"
}, {
    "id" : 3,
    "name" : "Sample"
}
]};

var secondElement = foo.results.find(function(item){
    return item.id == 2;
});

var json = JSON.stringify(secondElement);
console.log(json);


0
    projectDetailsController.controller('ProjectDetailsCtrl', function ($scope, $routeParams, $http) {
    $http.get('data/projects.json').success(function(data) {

        $scope.projects = data;
        console.log(data);

        for(var i = 0; i < data.length; i++) {
        $scope.project = data[i];
        if($scope.project.name === $routeParams.projectName) {
            console.log('project-details',$scope.project);
        return $scope.project;
        }
        }

    });
});

यकीन नहीं होता कि यह वास्तव में अच्छा है, लेकिन यह मेरे लिए मददगार था .. इसे ठीक से काम करने के लिए मुझे $ गुंजाइश का उपयोग करने की आवश्यकता थी।


0

$ टाइमआउट का उपयोग करें और "परिणाम" सरणी में खोजने के लिए एक फ़ंक्शन चलाएं

app.controller("Search", function ($scope, $timeout) {
        var foo = { "results": [
          {
             "id": 12,
             "name": "Test"
          },
          {
             "id": 2,
             "name": "Beispiel"
          },
          {
             "id": 3,
            "name": "Sample"
          }
        ] };
        $timeout(function () {
            for (var i = 0; i < foo.results.length; i++) {
                if (foo.results[i].id=== 2) {
                    $scope.name = foo.results[i].name;
                }
            }
        }, 10);

    });

0

मैं इस तरह से एक कोणीय फिल्टर का उपयोग कर परिणाम सरणी पर पुनरावृति करेगा:

var foundResultObject = getObjectFromResultsList (परिणाम, 1);

function getObjectFromResultsList(results, resultIdToRetrieve) {
        return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0];
    }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.