รับวัตถุเฉพาะโดย id จากอาร์เรย์ของวัตถุใน AngularJS

ฉันมีไฟล์ JSON ที่มีข้อมูลบางอย่างที่ฉันต้องการเข้าถึงบนเว็บไซต์ AngularJS ของฉัน ตอนนี้สิ่งที่ฉันต้องการคือรับวัตถุเพียงชิ้นเดียวจากอาร์เรย์ ดังนั้นฉันจึงชอบตัวอย่าง Item ที่มี id 1

ข้อมูลมีลักษณะดังนี้:

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

ฉันต้องการโหลดข้อมูลด้วยฟังก์ชัน AngularJS $ http ดังนี้:

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

ซึ่งใช้งานได้ แต่ตอนนี้ฉันจะรับออบเจ็กต์ข้อมูลเฉพาะ (โดย id) จากอาร์เรย์ที่ฉันได้รับมาได้$http.getอย่างไร

ขอบคุณล่วงหน้าสำหรับความช่วยเหลือของ.

ทักทาย Marc

วิธีเดียวที่จะทำได้คือทำซ้ำบนอาร์เรย์ แน่นอนว่าถ้าคุณแน่ใจว่าผลลัพธ์เรียงลำดับตาม id คุณสามารถค้นหาไบนารีได้

ใช้โซลูชัน 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)

ตอนนี้ฉันจะไปหาวิธีแก้ปัญหานี้โดยสิ้นเชิงเพราะผูกติดกับเชิงมุมหรือกรอบอื่น ๆ Javascript บริสุทธิ์

โซลูชันเชิงมุม (โซลูชันเก่า)

ฉันตั้งเป้าที่จะแก้ปัญหานี้โดยทำสิ่งต่อไปนี้:

$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);
}]);

Plunker: http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

สำหรับใครที่ดูโพสต์เก่า ๆ นี้เป็นวิธีที่ง่ายที่สุดในปัจจุบัน ต้องใช้ AngularJS $filterเท่านั้น มันเหมือนกับคำตอบของ Willemoes แต่สั้นและเข้าใจง่ายกว่า

{ 
    "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 ด้วย

โดยส่วนตัวฉันใช้ขีดล่างสำหรับสิ่งประเภทนี้ ...

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

จากนั้น "a" จะเป็นแถวที่คุณต้องการสำหรับอาร์เรย์ของคุณโดยที่ id เท่ากับ 2

ผมแค่อยากจะเพิ่มสิ่งที่คำตอบ Willemoes รหัสเดียวกันที่เขียนโดยตรงภายใน HTML จะมีลักษณะดังนี้:

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

สมมติว่า "ผลลัพธ์" เป็นตัวแปรของ FooController ของคุณและคุณต้องการแสดงคุณสมบัติ "name" ของรายการที่กรอง

คุณสามารถใช้ng-repeatและเลือกข้อมูลได้ก็ต่อเมื่อข้อมูลตรงกับสิ่งที่คุณกำลังมองหาng-show เช่น:

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

คุณสามารถวนซ้ำอาร์เรย์ของคุณ:

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

หากคุณไม่ต้องการเขียนลูปที่ยุ่งเหยิงนี้คุณสามารถพิจารณาใช้underscore.jsหรือLo-Dash (ตัวอย่างในภายหลัง):

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

หากคุณต้องการรายการเช่นเมืองบนพื้นฐานของรหัสรัฐให้ใช้

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

น่าเสียดาย (เว้นแต่ฉันจะเข้าใจผิด) ฉันคิดว่าคุณต้องทำซ้ำบนวัตถุผลลัพธ์

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

อย่างน้อยวิธีนี้มันจะแยกออกจากการทำซ้ำทันทีที่พบรหัสการจับคู่ที่ถูกต้อง

ทำไมสถานการณ์ซับซ้อน? นี่เป็นเรื่องง่ายที่จะเขียนบางฟังก์ชันดังนี้:

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ı

$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

หากทำได้ให้ออกแบบโครงสร้างข้อมูล JSON โดยใช้ดัชนีอาร์เรย์เป็น ID คุณสามารถ "ทำให้ปกติ" อาร์เรย์ JSON ของคุณเป็นปกติได้ตราบเท่าที่คุณไม่มีปัญหาในการใช้ดัชนีอาร์เรย์เป็น "คีย์หลัก" และ "คีย์ต่างประเทศ" เช่น RDBMS ดังนั้นในอนาคตคุณสามารถทำสิ่งนี้ได้:

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

นี่เป็นวิธีการแก้"โดยการออกแบบ" สำหรับกรณีของคุณเพียง:

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

แน่นอนว่าหากรูปแบบ ID ของคุณเป็น"XX-0001"ซึ่งดัชนีอาร์เรย์เป็น0คุณสามารถจัดการสตริงเพื่อแมป ID ได้ มิฉะนั้นจะไม่มีอะไรสามารถทำได้ยกเว้นผ่านวิธีการวนซ้ำ

ฉันรู้ว่าฉันสายเกินไปที่จะตอบ แต่ก็ยังดีกว่าที่จะแสดงตัวแทนที่จะไม่แสดงเลย :) วิธีรับ 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
});

วิธีง่ายๆในการรับ (หนึ่ง) องค์ประกอบจากอาร์เรย์โดย id:

วิธี find () ส่งคืนค่าขององค์ประกอบแรกในอาร์เรย์ที่ตรงตามฟังก์ชันการทดสอบที่ให้มา มิฉะนั้นจะส่งคืนที่ไม่ได้กำหนด

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

แน่นอนถ้าคุณมีหลาย id ให้ใช้วิธี filter () เพื่อรับวัตถุทั้งหมด ไชโย

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

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

    });
});

ไม่แน่ใจว่ามันดีจริงหรือเปล่า แต่นี่เป็นประโยชน์สำหรับฉัน .. ฉันจำเป็นต้องใช้ $ scope เพื่อให้มันทำงานได้อย่างถูกต้อง

ใช้ $ timeout และเรียกใช้ฟังก์ชันเพื่อค้นหาในอาร์เรย์ "results"

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

    });

ฉันจะวนซ้ำอาร์เรย์ผลลัพธ์โดยใช้ตัวกรอง angularjs ดังนี้:

var foundResultObject = getObjectFromResultsList (ผลลัพธ์, 1);

function getObjectFromResultsList(results, resultIdToRetrieve) {
        return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0];
    }