Filtering JSON array is just as simple as working with XML

Question

Filtering JSON array is just as simple as working with XML

During my project, I have transitioned from using XML format to JSON format. The XML structure includes nodes such as:

<Creature>
    <Name>Someone</Name>
    <Desert>false</Desert>
    <Woods>false</Woods>
    <Mountains>false</Mountains>
    <Swamp>false</Swamp>
</Creature>

Accompanied by a radio button list with values matching the tag names. For example:

<input type="radio" name="creature_terrain" value="Desert" />Desert<br>

In the old code, filtering the XML list was achieved through the following method:

let selector = 'Creature > ' + selectedTerrain + ':contains("true")';
var filteredCreatures = $(creaturesArray).find(selector).parent();

Now that I am working with a JSON array like:

  {
    "Name": "Someone",
    "Desert": false,
    "Woods": false,
    "Mountains": false,
    "Swamp": false
  }

I am struggling to find an elegant way to filter it compared to how it was done with XML. The only solution I can think of is utilizing switch/case statements. Any other suggestions?

javascript arrays json xml

Answer 1

Answer №1

If you're dealing with an array, utilizing the filter method can help narrow down your search for the specified terrain that is true.

UPDATE: While omitting == true would automatically evaluate as boolean, personally I find it clearer and easier to include it for readability purposes.

const creatures = [
  {
    "Name": "None",
    "Desert": false,
    "Woods": false,
    "Mountains": false,
    "Swamp": false
  },
  {
    "Name": "Swamp",
    "Desert": false,
    "Woods": false,
    "Mountains": false,
    "Swamp": true
  }
]

const terrain = "Swamp";

const creature = creatures.filter((e) => e[terrain] == true)

console.log(creature)

Answer 2

If you're dealing with an array, utilizing the filter method can help narrow down your search for the specified terrain that is true.

UPDATE: While omitting == true would automatically evaluate as boolean, personally I find it clearer and easier to include it for readability purposes.

const creatures = [
  {
    "Name": "None",
    "Desert": false,
    "Woods": false,
    "Mountains": false,
    "Swamp": false
  },
  {
    "Name": "Swamp",
    "Desert": false,
    "Woods": false,
    "Mountains": false,
    "Swamp": true
  }
]

const terrain = "Swamp";

const creature = creatures.filter((e) => e[terrain] == true)

console.log(creature)

Answer 3

Answer №2

In case you have a collection of objects rather than just one object, you can utilize the filter method to refine out those objects that fulfill a specific condition.

Let's elaborate on your scenario.

We have two objects (with lowercase key names). One matches "desert" and the other matches "swamp". There are corresponding radio inputs provided for illustration purposes.
An event listener has been added to the fieldset element to capture events from its child elements (event delegation).
Upon triggering a change event, the handler initially verifies if the element responsible for the event is a radio button. It then filters out the objects into a new array based on the condition of "is the value of this object key true?" The value of the altered radio button is utilized as the object key under examination.
To enhance user experience, the refined array of objects is showcased in an output element.

const data=[{name:"Someone",desert:false,woods:false,mountains:false,swamp:true},{name:"Someone 2",desert:true,woods:false,mountains:false,swamp:false}];

// Accessing terrain and output elements
const terrain = document.querySelector('.terrain');
const output = document.querySelector('.output');

// Adding a listener to the terrain (fieldset) element
terrain.addEventListener('change', handleInput);

// Upon event capturing by the terrain element
function handleInput(e) {

  // Checking if it relates to a matching
  // creature_terrain radio button
  if (e.target.matches('[name="creature_terrain"]')) {
    
    // Setting the changed radio input's value as `key`
    const key = e.target.value;

    // Using this key in filtering conditions to identify matches
    const filtered = data.filter(obj => obj[key]);

    // Displaying the filtered objects in the output element
    if (filtered.length) {
      output.textContent = JSON.stringify(filtered, null, 2);
    } else {
      output.textContent = '';
    }
  }
}

code { display: block; margin-top: 1rem; }

<fieldset class="terrain">
  <legend>Terrain</legend>
  <input type="radio" name="creature_terrain" value="desert" />Desert
  <input type="radio" name="creature_terrain" value="swamp" />Swamp
</fieldset>
<pre><code class="output"></code></pre>

Answer 4

In case you have a collection of objects rather than just one object, you can utilize the filter method to refine out those objects that fulfill a specific condition.

Let's elaborate on your scenario.

We have two objects (with lowercase key names). One matches "desert" and the other matches "swamp". There are corresponding radio inputs provided for illustration purposes.
An event listener has been added to the fieldset element to capture events from its child elements (event delegation).
Upon triggering a change event, the handler initially verifies if the element responsible for the event is a radio button. It then filters out the objects into a new array based on the condition of "is the value of this object key true?" The value of the altered radio button is utilized as the object key under examination.
To enhance user experience, the refined array of objects is showcased in an output element.

const data=[{name:"Someone",desert:false,woods:false,mountains:false,swamp:true},{name:"Someone 2",desert:true,woods:false,mountains:false,swamp:false}];

// Accessing terrain and output elements
const terrain = document.querySelector('.terrain');
const output = document.querySelector('.output');

// Adding a listener to the terrain (fieldset) element
terrain.addEventListener('change', handleInput);

// Upon event capturing by the terrain element
function handleInput(e) {

  // Checking if it relates to a matching
  // creature_terrain radio button
  if (e.target.matches('[name="creature_terrain"]')) {
    
    // Setting the changed radio input's value as `key`
    const key = e.target.value;

    // Using this key in filtering conditions to identify matches
    const filtered = data.filter(obj => obj[key]);

    // Displaying the filtered objects in the output element
    if (filtered.length) {
      output.textContent = JSON.stringify(filtered, null, 2);
    } else {
      output.textContent = '';
    }
  }
}

code { display: block; margin-top: 1rem; }

<fieldset class="terrain">
  <legend>Terrain</legend>
  <input type="radio" name="creature_terrain" value="desert" />Desert
  <input type="radio" name="creature_terrain" value="swamp" />Swamp
</fieldset>
<pre><code class="output"></code></pre>

Answer 5

Answer №3

Utilize JavaScript's built-in array functions such as find or filter.

const filteredCreatures = creaturesArray.filter(creature => creature.Desert);

Answer 6

Utilize JavaScript's built-in array functions such as find or filter.

const filteredCreatures = creaturesArray.filter(creature => creature.Desert);

Filtering JSON array is just as simple as working with XML

Answer №1

Answer №2

Answer №3

Similar questions

Tips on maintaining the numerical value while using JSON.stringify()

Having trouble establishing a connection from regular JavaScript to a socket.io backend? Face the issue of connection closure before

Difficulties encountered when adjusting the size or reducing the images in a Cycle2 slideshow

Example: Utilizing data transfer from model to directive

There is an issue with the hook call while trying to establish a context with a reducer

Retrieving data from a collection with the find() method in a custom date format

How can contextual binding be implemented in TypeScript?

Add a click function to an element in a grid when it is databound

Tips for Adding or Deleting 2 Rows in a Table

Creating a menu with items and listeners from a kmllayer - a step-by-step guide

What precautions should I take when setting up my login routes to ensure security?

Retrieve the data-src attribute from the lightGallery plugin

Tips on incorporating a changing variable into a JavaScript Shader

The most efficient way to invoke a jws void method in the fewest steps possible

transfer the value of a method to a different component

Transferring specific form data through a POST request

Is there a method available to retrieve the data values stored within these objects?

A guide to update values in mongodb using node.js

What is the best way to trigger the selection options in a dropdown menu with several buttons?

Searching for attributes in a JSON document