如何使用 JQuery 根据 Ids 搜索 JSON 对象

Question

在我的 Web 应用程序中，当初始加载 AJAX 调用给出以下 JSON 字符串时。

[  
   {  
      "UserId":10259,
      "FullName":"jhno doil",
      "SupervisorId":"10165"
   },
   {  
      "UserId":10405,
      "FullName":"Adam mark",
      "SupervisorId":"10261"
   },
   {  
      "UserId":10400,
      "FullName":"belly barra",
      "SupervisorId":"10161"
   },
   {  
      "UserId":16224,
      "FullName":"silvester",
      "SupervisorId":""
   },
   {  
      "UserId":10416,
      "FullName":"Arnetta Chatcho",
      "SupervisorId":"10179"
   },
   {  
      "UserId":10244,
      "FullName":"Ashanti Bueti",
      "SupervisorId":"10165"
   }
]

如何编写过滤函数或 LINQ 查询以根据传递的 SupervisorIds 字符串选择匹配的记录？我可以用 JQuery 编写 LINQ 吗？ 此函数应接受逗号分隔的 SupervisorIds 字符串并基于该字符串过滤匹配的 JSON。

function usersBasedOnIDs(SupervisorIds){


}

这就是我调用函数的方式，

usersBasedOnIDs("10165,10179,10161");
usersBasedOnIDs("10179,10161");
usersBasedOnIDs("10165");

如果我将 Empty 字符串传递给函数 usersBasedOnIDs("")，则所有 JSON 对象都应返回而无需任何过滤。

如果我将函数称为usersBasedOnIDs("10165,10179,10161");

，则明确ex:1

应该返回这个 JSON，

[  
   {  
      "UserId":10259,
      "FullName":"jhno doil",
      "SupervisorId":"10165"
   },
   {  
      "UserId":10400,
      "FullName":"belly barra",
      "SupervisorId":"10161"
   },
   {  
      "UserId":10416,
      "FullName":"Arnetta Chatcho",
      "SupervisorId":"10179"
   },
   {  
      "UserId":10244,
      "FullName":"Ashanti Bueti",
      "SupervisorId":"10165"
   }
]

ex: 2 如果我将函数称为usersBasedOnIDs("10165");

[  
   {  
      "UserId":10259,
      "FullName":"jhno doil",
      "SupervisorId":"10165"
   },
   {  
      "UserId":10244,
      "FullName":"Ashanti Bueti",
      "SupervisorId":"10165"
   }
]

Answer 1

您可以使用split 来拆分字符串，filter by SupervisorId 和includes 用于检查数组中的项目。

在使用之前，您可能需要使用JSON.Parse 将字符串转换为对象。

更多关于函数的信息

包括

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes 过滤器

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

function usersBasedOnIDs(SupervisorIds){
  let Supervisors = SupervisorIds.split(",");
  let result = data.filter(c=>SupervisorIds.includes(c.SupervisorId));
  console.log(result);
}

var data = [  
   {  
      "UserId":10259,
      "FullName":"jhno doil",
      "SupervisorId":"10165"
   },
   {  
      "UserId":10405,
      "FullName":"Adam mark",
      "SupervisorId":"10261"
   },
   {  
      "UserId":10400,
      "FullName":"belly barra",
      "SupervisorId":"10161"
   },
   {  
      "UserId":16224,
      "FullName":"silvester",
      "SupervisorId":""
   },
   {  
      "UserId":10416,
      "FullName":"Arnetta Chatcho",
      "SupervisorId":"10179"
   },
   {  
      "UserId":10244,
      "FullName":"Ashanti Bueti",
      "SupervisorId":"10165"
   }
];
//"10165,10179,10161"
function usersBasedOnIDs(SupervisorIds){
let result = [];
if(SupervisorIds == "") {
  result = data;
}else{
  let Supervisors = SupervisorIds.split(",");
  result = data.filter(c=> c.SupervisorId != "" && SupervisorIds.includes(c.SupervisorId));
}
console.log(result);
return result;
}

//usersBasedOnIDs("10165,10179,10161")
//console.log(usersBasedOnIDs("10165"))
usersBasedOnIDs("")

Answer 2

这是你的函数，在这些情况下使用数组更好：

function usersBasedOnIDs(SupervisorIds){

 //SupervisorIds is an Array !
 const data = YOUR DATA;
 var newData = [];
 if(SupervisorIds && SupervisorIds.length > 1){
   SupervisorIds.forEach(e => {
     if(SupervisorIds.includes(e.id))
      newData.push(e)
   });
   //if no match found, return an empty array
   return newData;
 }else{
   //No filter
   return data;
 }
}

Answer 3

const data = [
    {
        "UserId":10259,
        "FullName":"jhno doil",
        "SupervisorId":"10165"
    },
    {
        "UserId":10405,
        "FullName":"Adam mark",
        "SupervisorId":"10261"
    },
    {
        "UserId":10400,
        "FullName":"belly barra",
        "SupervisorId":"10161"
    },
    {
        "UserId":16224,
        "FullName":"silvester",
        "SupervisorId":""
    },
    {
        "UserId":10416,
        "FullName":"Arnetta Chatcho",
        "SupervisorId":"10179"
    },
    {
        "UserId":10244,
        "FullName":"Ashanti Bueti",
        "SupervisorId":"10165"
    }
];

function SearchById(id, field = "SupervisorId") {
    if (id === "") return data;
    return data.filter(value => {
        if(Array.isArray(id)) {
            return id.indexOf(value[field]) !== -1;
        }
        return value[field] === id;
    });
}

SearchById("10165");
SearchById(["10165", "10179"]);
// Search By Other Field
SearchById(10259, "UserId");

我建议通过数组传递多个 id，但如果你想要旧的方式，你可以使用这个函数

function SearchById(id, field = "SupervisorId") {
    if (id === "") return data;
    return data.filter(value => {
        if(id.split(',').length > 0) {
            const ids = id.split(',');
            return ids.indexOf(value[field]) !== -1;
        }
        return value[field] === id;
    });
}

使用 jQuery：

const data = [
    {
        "UserId":10259,
        "FullName":"jhno doil",
        "SupervisorId":"10165"
    },
    {
        "UserId":10405,
        "FullName":"Adam mark",
        "SupervisorId":"10261"
    },
    {
        "UserId":10400,
        "FullName":"belly barra",
        "SupervisorId":"10161"
    },
    {
        "UserId":16224,
        "FullName":"silvester",
        "SupervisorId":""
    },
    {
        "UserId":10416,
        "FullName":"Arnetta Chatcho",
        "SupervisorId":"10179"
    },
    {
        "UserId":10244,
        "FullName":"Ashanti Bueti",
        "SupervisorId":"10165"
    }
];
function SearchById(id, field = "SupervisorId") {
    return jQuery.grep(data, function(value) {
        if(id === "") return data;
        if(typeof(id) === "string" && id.split(',').length > 0) {
            const ids = id.split(',');
            return ids.indexOf(value[field]) !== -1;
        } else if(Array.isArray(id)) {
            return id.indexOf(value[field]) !== -1;
        }
        return value[field] === id;
    });
}

console.log("single", SearchById("10165"));
console.log("multiple array", SearchById(["10165", "10179"]));
console.log("multiple split", SearchById("10165,10179"));
console.log("empty", SearchById(""));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

阅读更多关于filter