What is the best way to retrieve a specific children element from a JSON object in JavaScript based on a keyname and value match

Question

What is the best way to retrieve a specific children element from a JSON object in JavaScript based on a keyname and value match

Recently, I encountered a JSON data structure that looked like this:

var jsonData = {
    "id": 0,
    "content": "abc",
    "children" : [{
        "id": 1,
        "content": "efg",
        "children" : []
        }
        {
        "id": 2,
        "content": "hij",
        "children" : []
        }
    ]}

I am interested in extracting the children part of the JSON by searching for a specific key and value combination. For example:

 if(id == 2)

If the condition holds true, then I can access jsonData.children[1] and perform operations on it. This approach reminds me of using Hashtables in Java and C#. Unfortunately, JavaScript does not have built-in hashtable support.

Therefore, I am seeking any possible solutions to efficiently tackle this problem.

javascript json hashtable

Answer 1

Answer №1

To find an object in a collection using recursion and a reducer, you can implement the following function:

function findObjectById(idToFind, collection) {
  return collection.reduce(function(accumulator, currentObj) {
    if (currentObj.id === idToFind) {
      return currentObj;
    } else if (currentObj.children.length > 0) {
      return findObjectById(idToFind, currentObj.children);
    } else {
      return accumulator;
    }
  }, null);
}

findObjectById(2, [jsonData])
//^ {id: 2, content: 'hij', children: []}

If the function does not find any object with the specified id, it will return null.

Answer 2

To find an object in a collection using recursion and a reducer, you can implement the following function:

function findObjectById(idToFind, collection) {
  return collection.reduce(function(accumulator, currentObj) {
    if (currentObj.id === idToFind) {
      return currentObj;
    } else if (currentObj.children.length > 0) {
      return findObjectById(idToFind, currentObj.children);
    } else {
      return accumulator;
    }
  }, null);
}

findObjectById(2, [jsonData])
//^ {id: 2, content: 'hij', children: []}

If the function does not find any object with the specified id, it will return null.

Answer 3

Answer №2

If you want to filter the data, try using the filter method:

var targetId = 5;
var results = jsonData.children.filter(function (item) {
    return item.id === targetId;
});

UPDATE: Introducing a recursive solution

In addition to the concise and efficient solution provided by @elclanrs in the previous answer (which is highly recommended), here is an alternative approach for handling recursion.

var matches = [];
function searchForMatches(children, targetId) {
    if (children && Array.isArray(children)) {
        var newResults = children.filter(function (item) {
            return item.id === targetId;
        });
        Array.prototype.push.apply(matches, newResults);
        for (var i = 0; i < children.length; i++)
            searchForMatches(children[i].children, targetId);
    }
}
searchForMatches(jsonData.children, 7);
console.log('All matching items:', matches);

Run it on JS Fiddle: http://jsfiddle.net/q1owtj3h/

Answer 4

If you want to filter the data, try using the filter method:

var targetId = 5;
var results = jsonData.children.filter(function (item) {
    return item.id === targetId;
});

UPDATE: Introducing a recursive solution

In addition to the concise and efficient solution provided by @elclanrs in the previous answer (which is highly recommended), here is an alternative approach for handling recursion.

var matches = [];
function searchForMatches(children, targetId) {
    if (children && Array.isArray(children)) {
        var newResults = children.filter(function (item) {
            return item.id === targetId;
        });
        Array.prototype.push.apply(matches, newResults);
        for (var i = 0; i < children.length; i++)
            searchForMatches(children[i].children, targetId);
    }
}
searchForMatches(jsonData.children, 7);
console.log('All matching items:', matches);

Run it on JS Fiddle: http://jsfiddle.net/q1owtj3h/

Answer 5

Answer №3

Did you know that in Javascript, objects are essentially Maps? Take a look at this example:

var person = {}
person[1] = {"id": 1, "name": "Alice"}
person[2] = { "id": 2,"name": "Bob"}

You can easily access the value like this:

var name = person[1].name;

I hope this explanation clarifies things for you!

Answer 6

Did you know that in Javascript, objects are essentially Maps? Take a look at this example:

var person = {}
person[1] = {"id": 1, "name": "Alice"}
person[2] = { "id": 2,"name": "Bob"}

You can easily access the value like this:

var name = person[1].name;

I hope this explanation clarifies things for you!

Answer 7

Answer №4

Here's a method that I discovered. It was influenced by @Jason W , @Mr.Green and @elclanrs .

I decided to give it a try, and surprisingly, it worked.

However, there are still some aspects that puzzle me about why this method is effective, and I will be posting my queries shortly. Feel free to take a look if you can offer assistance.

var dataMap = {};

function matchData (jsonObj) {
  dataMap[jsonObj.id] = jsonObj;

  if (jsonObj.children.length > 0) {
    for (var i = 0; i < jsonObj.children.length; i++) {
      dataMap[jsonObj.children[i].id] = jsonObj.children[i];

      if (jsonObj.children[i].children > 0) {
        matchData(jsonObj.children[i]);
      }
    }
  }
}

matchData(jsonData);
console.log(dataMap[2]); 
//you will get "{"id": 2,"content": "hij","children" :[]}

Answer 8

Here's a method that I discovered. It was influenced by @Jason W , @Mr.Green and @elclanrs .

I decided to give it a try, and surprisingly, it worked.

However, there are still some aspects that puzzle me about why this method is effective, and I will be posting my queries shortly. Feel free to take a look if you can offer assistance.

var dataMap = {};

function matchData (jsonObj) {
  dataMap[jsonObj.id] = jsonObj;

  if (jsonObj.children.length > 0) {
    for (var i = 0; i < jsonObj.children.length; i++) {
      dataMap[jsonObj.children[i].id] = jsonObj.children[i];

      if (jsonObj.children[i].children > 0) {
        matchData(jsonObj.children[i]);
      }
    }
  }
}

matchData(jsonData);
console.log(dataMap[2]); 
//you will get "{"id": 2,"content": "hij","children" :[]}

What is the best way to retrieve a specific children element from a JSON object in JavaScript based on a keyname and value match

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Developing a custom function within an iterative loop

Angular select automatically saves the selected option when navigating between views

JavaScript for creating dropdown menus using Twitter Bootstrap

Moving a DOM element within AngularJS to a new location

Obscure unidentified attribute within JSON error object

Creating a Chart.js line plot with discontinuous sections (jumps)

Incorrect scope value detected in Angular controller

Error: A SyntaxError was encountered due to a missing closing parenthesis after an argument list while writing JavaScript within PHP code

Extract the href value from an element and append it to the src attribute of an image

The express.js GET method is unable to retrieve the value of req.body

Prevent selection on all elements except for input fields with the type of text

Issues with the script manager functionality in asp.net

How to retrieve textfield value using Material UI and ReactJS

The functionality of AngularJS's state URL depends on numerical URLs for navigation

What is the process for executing mocha tests within a web browser?

ReactJS is encountering a situation where two children are using the same key and causing

Storing form data in a file using React

Misunderstandings between HTML and CSS

Am I utilizing the htmlspecialchars function properly?

Utilizing a series of linked jQuery functions