How filter out JSON using JavaScript

Question

I need to filter a huge JSON file based on its value.

this is my JSON code(this is part of my JSON object, In real behaviour, its have more than 1000).

var jsonObject = [  
   {  
      "UserId":10259,
      "FullName":"hello world",
      "CustomerId":"10165"
   },
   {  
      "UserId":10405,
      "FullName":"test value",
      "CustomerId":"10261"
   },
   {  
      "UserId":10400,
      "FullName":"mark ant",
      "CustomerId":"10161"
   },
   {  
      "UserId":16224,
      "FullName":"jhon cena",
      "CustomerId":""
   },
   {  
      "UserId":10416,
      "FullName":"shoze ahh",
      "CustomerId":"1"
   },
   {  
      "UserId":10244,
      "FullName":"kajal man",
      "CustomerId":"10"
   }
];

To filter the above JSON object, I used the following filter function.

function usersBasedOnIDs(CustomerIds) {
    if (CustomerIds == "") {
        console.log(jsonObject);
    } else if (CustomerIds == "9999xx") {

        let result = jsonObject.filter(c => c.CustomerId == "");
        console.log(result);
    } else {
        let result = jsonObject.filter(c => c.CustomerId != "" && CustomerIds.includes(c.CustomerId));
        console.log(result);
    }   
}

How I call the function

usersBasedOnIDs("");
usersBasedOnIDs("10261,10165");
usersBasedOnIDs("9999xx");

There are a couple of problems with my code,

This function not working with IE 11 an early version
And another thing is when I call the function as usersBasedOnIDs("10261,10165"); or usersBasedOnIDs("10261"); , its returns follwing JSON output

{UserId: 10405, FullName: "test value", CustomerId: "10261"} {UserId: 10416, FullName: "shoze ahh", CustomerId: "1"} {UserId: 10244, FullName: "kajal man", CustomerId: "10"}

But my expectation is, only this

{UserId: 10405, FullName: "test value", CustomerId: "10261"}

How can change the function to avoid those two problems

adiga · Accepted Answer · 2019-06-28 04:01:55Z

3

The string "10261,10165" includes 10261 as well as the strings 1 and 10. This is why you are getting those ids filtered as well.

Instead, you can split the string at , first to get an array of customer Ids and then use Array#includes

const array=[{"UserId":10259,"FullName":"hello world","CustomerId":"10165"},{"UserId":10405,"FullName":"test value","CustomerId":"10261"},{"UserId":10400,"FullName":"mark ant","CustomerId":"10161"},{"UserId":16224,"FullName":"jhon cena","CustomerId":""},{"UserId":10416,"FullName":"shoze ahh","CustomerId":"1"},{"UserId":10244,"FullName":"kajal man","CustomerId":"10"}]

function usersBasedOnIDs(CustomerIds) {
    if (CustomerIds === "")
        return array;
    
    if (CustomerIds == "9999xx")
      return array.filter(c => c.CustomerId == "")
    
   const ids =  CustomerIds.split(",");
   return array.filter(c => c.CustomerId !== "" && ids.includes(c.CustomerId));
}

console.log(usersBasedOnIDs("10261,10165"))
console.log(usersBasedOnIDs("10261"))

IE11 doesn't support arrow functions, String#includes and Array#includes. You can change your arrow function to:

array.filter(function(c) {
  return c.CustomerId == ""
})

And

Use a polyfill for Array#includes and String#includes

edited Jun 28, 2019 at 4:01

answered Jun 28, 2019 at 3:48

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sachith Wickramaarachchi Over a year ago

Thank you, but please read my question, there is another problem. this includes and lambda expressions not working IE 11 and its early versions

vicnoob Over a year ago

@Sachith you can change arrow function to normal function and use indexOf instead of includes to resolve the problem

Sachith Wickramaarachchi Over a year ago

Yeah I tried with indexOf but its not working, sometimes it could be my fault, can u please give me a final answer to sort this out

adiga Over a year ago

@Sachith you copy the code mentioned in the link and include it in one of your javascript file before you use includes. Basically, you are adding Array.prototype.includes so that your array can access it

adiga Over a year ago

@Sachith also vicnoob has added an answer using indexOf which doesn't invlove adding a polyfill

|

adiga · Accepted Answer · 2019-06-28 04:20:00Z

2

So this is the full answer for IE 11, based on @adiga answer. Change the arrow function to normal function and using Array.indexOf instead of includes.

const array = [
  { UserId: 10259, FullName: "hello world", CustomerId: "10165" },
  { UserId: 10405, FullName: "test value", CustomerId: "10261" },
  { UserId: 10400, FullName: "mark ant", CustomerId: "10161" },
  { UserId: 16224, FullName: "jhon cena", CustomerId: "" },
  { UserId: 10416, FullName: "shoze ahh", CustomerId: "1" },
  { UserId: 10244, FullName: "kajal man", CustomerId: "10" }
];

function usersBasedOnIDs(CustomerIds) {
  if (CustomerIds === "") return array;

  if (CustomerIds == "9999xx") {
    return array.filter(function(c) {
      return c.CustomerId == "";
    });
  }

  const ids = CustomerIds.split(",");
  return array.filter(function(c) {
    return c.CustomerId !== "" && ids.indexOf(c.CustomerId) > -1;
  });
}

console.log(usersBasedOnIDs("10261,10165"))

edited Jun 28, 2019 at 4:20

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jun 28, 2019 at 4:01

vicnoob

1,17313 silver badges27 bronze badges

3 Comments

adiga Over a year ago

This is a better option considering this works without a polyfill.

Sachith Wickramaarachchi Over a year ago

@adiga Thank for your answer and humble qualities. problem solve. Thanks for both of you :)

adiga Over a year ago

@Sachith please mark this answer as accepted if your issue is resolved

sachin mathew · Accepted Answer · 2019-06-28 03:52:51Z

1

1 ) IE 11 not support arrow functions

try changing your function to

var result = jsonObject.filter(function(c) { return c.CustomerId === ""; });

answered Jun 28, 2019 at 3:52

sachin mathew

1,47215 silver badges20 bronze badges

Comments

Nadir Latif · Accepted Answer · 2019-06-28 04:01:03Z

1

Well the reason your code does not work on IE 11 is that it uses the includes function for checking if array contains a value. The includes function is supported in IE 14 and above. Also arrow functions are not supported in IE 11 and earlier.

Your code wont work because of a couple of bugs. Firstly the arrow function callback needs a return statement. So instead of:

c => c.CustomerId == ""

use:

c => return (c.CustomerId == "")

Also the customer ids should be passed as an array instead of a string. So instead of using:

usersBasedOnIDs("10261,10165");

You need to use:

usersBasedOnIDs([10261,10165]);

answered Jun 28, 2019 at 4:01

Nadir Latif

3,7671 gold badge17 silver badges24 bronze badges

Collectives™ on Stack Overflow

How filter out JSON using JavaScript

4 Answers 4

8 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related