mảng lọc javascript của các đối tượng

Tôi có một mảng các đối tượng và tôi đang tự hỏi cách tốt nhất để tìm kiếm nó. Với ví dụ dưới đây, tôi làm cách nào để tìm kiếm name = "Joe"và age < 30? Có điều gì jQuery có thể trợ giúp không hay tôi phải tự thực hiện thao tác tìm kiếm này?

var names = new Array();

var object = { name : "Joe", age:20, email: "joe@hotmail.com"};
names.push(object);

object = { name : "Mike", age:50, email: "mike@hotmail.com"};
names.push(object);

object = { name : "Joe", age:45, email: "mike@hotmail.com"};
names.push(object);

Bạn có thể sử dụng jQuery.grep():

var found_names = $.grep(names, function(v) {
    return v.name === "Joe" && v.age < 30;
});

DEMO: http://jsfiddle.net/ejPV4/

Bạn có thể làm điều này rất dễ dàng với [].filterphương pháp:

var filterednames = names.filter(function(obj) {
    return (obj.name === "Joe") && (obj.age < 30);
});

Bạn sẽ cần thêm một miếng đệm cho các trình duyệt không hỗ trợ [].filterphương pháp: trang MDN này cung cấp mã như vậy.

Bạn có thể sử dụng hàm jQuery.filter () để trả về các phần tử từ một tập hợp con của các phần tử phù hợp.

var names = [
    { name : "Joe", age:20, email: "joe@hotmail.com"},
    { name : "Mike", age:50, email: "mike@hotmail.com"},
    { name : "Joe", age:45, email: "mike@hotmail.com"}
   ];
   
   
var filteredNames = $(names).filter(function( idx ) {
    return names[idx].name === "Joe" && names[idx].age < 30;
}); 

$(filteredNames).each(function(){
     $('#output').append(this.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"/>

var nameList = [
{name:'x', age:20, email:'x@email.com'},
{name:'y', age:60, email:'y@email.com'},
{name:'Joe', age:22, email:'joe@email.com'},
{name:'Abc', age:40, email:'abc@email.com'}
];

var filteredValue = nameList.filter(function (item) {
      return item.name == "Joe" && item.age < 30;
});

//To See Output Result as Array
console.log(JSON.stringify(filteredValue));

Bạn chỉ có thể sử dụng javascript :)

Đối với những người muốn lọc từ một mảng đối tượng bằng bất kỳ phím nào:

function filterItems(items, searchVal) {
  return items.filter((item) => Object.values(item).includes(searchVal));
}
let data = [
  { "name": "apple", "type": "fruit", "id": 123234 },
  { "name": "cat", "type": "animal", "id": 98989 },
  { "name": "something", "type": "other", "id": 656565 }]


console.log("Filtered by name: ", filterItems(data, "apple"));
console.log("Filtered by type: ", filterItems(data, "animal"));
console.log("Filtered by id: ", filterItems(data, 656565));

lọc từ một mảng các đối tượng JSON: **

Câu hỏi nhanh quá. Điều gì sẽ xảy ra nếu bạn có hai mảng đối tượng và bạn muốn 'căn chỉnh' các mảng đối tượng này để bạn có thể đảm bảo các đối tượng của mỗi mảng theo thứ tự như của mảng kia? Điều gì sẽ xảy ra nếu bạn không biết các khóa và giá trị bất kỳ đối tượng nào bên trong mảng chứa ... Ít hơn nhiều so với thứ tự của chúng?

Vì vậy, bạn cần có một 'Biểu wildcard' cho bạn [].filter, [].mapvv Làm thế nào để bạn có được một biểu thức thẻ hoang dã?

var jux = (function(){
    'use strict';

    function wildExp(obj){
        var keysCrude = Object.keys(obj),
            keysA = ('a["' + keysCrude.join('"], a["') + '"]').split(', '),
            keysB = ('b["' + keysCrude.join('"], b["') + '"]').split(', '),
            keys = [].concat(keysA, keysB)
                .sort(function(a, b){  return a.substring(1, a.length) > b.substring(1, b.length); });
        var exp = keys.join('').split(']b').join('] > b').split(']a').join('] || a');
        return exp;
    }

    return {
        sort: wildExp
    };

})();

var sortKeys = {
    k: 'v',
    key: 'val',
    n: 'p',
    name: 'param'
};
var objArray = [
    {
        k: 'z',
        key: 'g',
        n: 'a',
        name: 'b'
    },
    {
        k: 'y',
        key: 'h',
        n: 'b',
        name: 't'
    },
    {
        k: 'x',
        key: 'o',
        n: 'a',
        name: 'c'
    }
];
var exp = jux.sort(sortKeys);

console.log('@juxSort Expression:', exp);
console.log('@juxSort:', objArray.sort(function(a, b){
    return eval(exp);
}));

Bạn cũng có thể sử dụng hàm này qua một lần lặp cho từng đối tượng để tạo một biểu thức tập hợp tốt hơn cho tất cả các khóa trong mỗi đối tượng của bạn, rồi lọc mảng của bạn theo cách đó.

Đây là một đoạn mã nhỏ từ API Juxtapose mà tôi có gần như hoàn chỉnh, thực hiện điều này, bình đẳng đối tượng với các trường hợp miễn trừ, hợp nhất đối tượng và ngưng tụ mảng. Nếu đây là những thứ bạn cần hoặc muốn cho dự án của mình, vui lòng bình luận và tôi sẽ làm cho lib có thể truy cập sớm hơn.

Hi vọng điêu nay co ich! Chúc bạn viết mã vui vẻ :)

Cách tiếp cận đơn giản và dễ đọc nhất sẽ là sử dụng phương pháp bộ lọc javascript gốc.

Bộ lọc javaScript gốc có cách tiếp cận khai báo trong việc lọc các phần tử mảng. Vì nó là một phương thức được định nghĩa trên Array.prototype, nó lặp lại trên một mảng được cung cấp và gọi lại trên đó. Lệnh gọi lại này, hoạt động như chức năng lọc của chúng tôi, nhận ba tham số:

element - mục hiện tại trong mảng đang được lặp lại

index - chỉ mục hoặc vị trí của phần tử hiện tại trong mảng đang được lặp lại

array- mảng ban đầu mà phương pháp bộ lọc đã được áp dụng trên Hãy sử dụng phương thức bộ lọc này trong một ví dụ. Lưu ý rằng bộ lọc có thể được áp dụng trên bất kỳ loại mảng nào. Trong ví dụ này, chúng ta sẽ lọc một mảng các đối tượng dựa trên một thuộc tính đối tượng.

Ví dụ về lọc một mảng đối tượng dựa trên thuộc tính đối tượng có thể trông giống như sau:

// Please do not hate me for bashing on pizza and burgers.
// and FYI, I totally made up the healthMetric param :)
let foods = [
  { type: "pizza", healthMetric: 25 },
  { type: "burger", healthMetric: 10 },
  { type: "salad", healthMetric: 60 },
  { type: "apple", healthMetric: 82 }
];
let isHealthy = food => food.healthMetric >= 50;

const result = foods.filter(isHealthy);

console.log(result.map(food => food.type));
// Result: ['salad', 'apple']

Để tìm hiểu thêm về cách lọc mảng trong các hàm và xây dựng bộ lọc của riêng bạn, hãy xem bài viết này: https://medium.com/better-programming/build-your-own-filter-e88ba0dcbfae