Utilizing JavaScript to sift through JSON data

Question

Utilizing JavaScript to sift through JSON data

Looking to efficiently parse a large JSON file based on its values.

This is an excerpt from my extensive JSON code (with over 1000 entries).

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

In order to filter the JSON object above, I created the following filtering function.

function getUsersBasedOnIDs(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);
    }   
}

Here's how you can call the function:

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

Identified issues with the current implementation include:

The function is not compatible with IE 11 and earlier versions

When calling the function with parameters like usersBasedOnIDs("10261,10165"); or usersBasedOnIDs("10261");, it returns multiple JSON outputs instead of one specific output

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

Ideally, the expected output should be just:

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

To address these issues and achieve the desired results, revisions to the function are necessary.

javascript json object

Answer 1

Answer №1

The string "10261,10165" contains 10261, as well as the substrings 1 and 10. That's why those IDs are being filtered as well.

To address this issue, you can first split the string at , to create 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"))

Keep in mind that IE11 does not support arrow functions, String#includes, or Array#includes. You can switch your arrow function to:

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

And

Consider using a polyfill for Array#includes and String#includes

Answer 2

The string "10261,10165" contains 10261, as well as the substrings 1 and 10. That's why those IDs are being filtered as well.

To address this issue, you can first split the string at , to create 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"))

Keep in mind that IE11 does not support arrow functions, String#includes, or Array#includes. You can switch your arrow function to:

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

And

Consider using a polyfill for Array#includes and String#includes

Answer 3

Answer №2

Here is the complete solution for compatibility with IE 11, inspired by @adiga's response. The arrow function has been replaced with a normal function and Array.indexOf is used 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"))

Answer 4

Here is the complete solution for compatibility with IE 11, inspired by @adiga's response. The arrow function has been replaced with a normal function and Array.indexOf is used 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"))

Answer 5

Answer №3

2 ) It is important to note that IE 11 does not support arrow functions

If you encounter this issue, consider modifying your function to:

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

Answer 6

2 ) It is important to note that IE 11 does not support arrow functions

If you encounter this issue, consider modifying your function to:

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

Answer 7

Answer №4

The reason why your code may not function properly in Internet Explorer 11 is due to the use of the includes function to check if an array contains a value. The includes function is only supported in IE 14 and later versions. Additionally, arrow functions are unsupported in IE 11 and earlier.

Your code could be experiencing issues because of a few mistakes. Firstly, the arrow function callback requires a return statement. Instead of:

c => c.CustomerId == ""

You should write:

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

Furthermore, make sure to pass customer IDs as an array instead of a string. So rather than:

usersBasedOnIDs("10261,10165");

You should do:

usersBasedOnIDs([10261,10165]);

Answer 8

The reason why your code may not function properly in Internet Explorer 11 is due to the use of the includes function to check if an array contains a value. The includes function is only supported in IE 14 and later versions. Additionally, arrow functions are unsupported in IE 11 and earlier.

Your code could be experiencing issues because of a few mistakes. Firstly, the arrow function callback requires a return statement. Instead of:

c => c.CustomerId == ""

You should write:

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

Furthermore, make sure to pass customer IDs as an array instead of a string. So rather than:

usersBasedOnIDs("10261,10165");

You should do:

usersBasedOnIDs([10261,10165]);

Utilizing JavaScript to sift through JSON data

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Send the contents of a `<ul>` element to the server using AJAX for form submission

The jqGrid displays a plus sign even when the subgrid is empty while using XML

What is the best way to display a collection of images in an HTML page?

Encountered an Error: Exceeded the number of hooks rendered in the previous render. Any solutions to resolve this issue?

Looking for help with an ajax request

What is the best way to merge two tables together using the server-side JQuery Datatable plugin?

Interacting with wpdb using AngularJS

The integration of single page applications and <form> elements is a powerful combination in web development

What is the best way to remove unicode characters from Python's output?

Am I utilizing window.setInterval correctly in this code, or am I potentially causing issues?

Creating unique error messages for handling JSON requests

Exploring Angular 2 Application Testing: Tips for Interacting with HTML Elements

Incorporating Mediainfo.js into Angular 8: A Seamless Integration

GraphQL queries that are strongly-typed

Central alignment of div with cursor

The dynamically generated hyperlink is not displaying correctly

Tips for updating a specific portion of a component in react.js

Pull information from database based on selection made in combo box

The HTML table inexplicably displays a random comma out of nowhere

invoking a jquery method through the onClick event handler