Using javascript, retrieve the JSON values for each level

Question

Using javascript, retrieve the JSON values for each level

I need help using a recursive function in JavaScript to retrieve the last key value pair from a simple JSON object.

Here is an example JSON object:

{
  'a': {
    'b': {
      'c': 12,
      'd': 'Hello World'
    },
    'e': [1,2,3]
  }
}

The expected result should look like this:

{
  'a/b/c': 12,
  'a/b/d': 'Hello World',
  'a/e': [1,2,3]
}

This is the function I am currently trying to work with:

function getDeepKeys(obj) {
    var keys = [];
    for (var key in obj) {
        keys.push(key);
        if (typeof obj[key] === "object") {
            var subkeys = getDeepKeys(obj[key]);
            keys = keys.concat(subkeys.map(function (subkey) {
                return key + "/" + subkey;
            }));
        }
    }
    return keys;
}

However, the output I am getting includes unexpected numbers like a/b/c/d/e/0/1/. Can anyone suggest a solution to fix this issue?

javascript json

Answer 1

Answer №1

If you want to achieve this task iteratively, you can utilize an explicit stack approach. This method is more efficient than using recursion and prevents the risk of overflowing the call stack:

const pathify = object => {
  const paths = {};
  const stack = [[object, []]];
  
  while (stack.length) {
    const [current, path] = stack.pop();
    
    for (const key in current) {
      if (typeof current[key] === "object" && !Array.isArray(current[key])) {
        stack.push([current[key], path.concat(key)]);
      }
      else {
        paths[`${path.join("/")}/${key}`] = current[key];
      }
    }
  }
  
  return paths;
};

console.log(pathify({'a':{'b':{'c':12,'d':'Hello World'},'e':[1,2,3]}}));

Answer 2

If you want to achieve this task iteratively, you can utilize an explicit stack approach. This method is more efficient than using recursion and prevents the risk of overflowing the call stack:

const pathify = object => {
  const paths = {};
  const stack = [[object, []]];
  
  while (stack.length) {
    const [current, path] = stack.pop();
    
    for (const key in current) {
      if (typeof current[key] === "object" && !Array.isArray(current[key])) {
        stack.push([current[key], path.concat(key)]);
      }
      else {
        paths[`${path.join("/")}/${key}`] = current[key];
      }
    }
  }
  
  return paths;
};

console.log(pathify({'a':{'b':{'c':12,'d':'Hello World'},'e':[1,2,3]}}));

Answer 3

Answer №2

It seems like you may be overcomplicating things unnecessarily. One way to approach this is by checking for an array using Array.isArray, and for a non-object (typeof !== 'object), then simply returning the path and its corresponding value. If it is not an array or a non-object, you can recursively iterate through each entry using reduce(). It's also helpful to pass the current path as an argument to the recursive function:

let sampleObj = {'a': {'b': {'c': 12,'d': 'Hello World'},'e': [1,2,3]}}

function retrieveValues(obj, path = []) {
    return (Array.isArray(obj) || typeof obj !== 'object')
    ? {[path.join('/')]: obj}
    : Object.entries(obj).reduce((acc, [key, val]) =>
        Object.assign(acc, retrieveValues(val, path.concat(key)) )
    , {})
}

console.log(retrieveValues(sampleObj))

Answer 4

It seems like you may be overcomplicating things unnecessarily. One way to approach this is by checking for an array using Array.isArray, and for a non-object (typeof !== 'object), then simply returning the path and its corresponding value. If it is not an array or a non-object, you can recursively iterate through each entry using reduce(). It's also helpful to pass the current path as an argument to the recursive function:

let sampleObj = {'a': {'b': {'c': 12,'d': 'Hello World'},'e': [1,2,3]}}

function retrieveValues(obj, path = []) {
    return (Array.isArray(obj) || typeof obj !== 'object')
    ? {[path.join('/')]: obj}
    : Object.entries(obj).reduce((acc, [key, val]) =>
        Object.assign(acc, retrieveValues(val, path.concat(key)) )
    , {})
}

console.log(retrieveValues(sampleObj))

Answer 5

Answer №3

To iterate over keys in objects and recursively navigate nested objects, you can utilize the Object.keys function.

let obj = {'a': {'b': {'c': 12,'d': 'Hello World'},'e': [1,2,3]}},
    result = Object.create(null),
    loop = function (o, arr, result) {
      Object.keys(o).forEach(k => {
        arr.push(k);
        if (typeof o[k] === 'object' && !Array.isArray(o[k])) loop(o[k], arr, result);
        else result[arr.join('/')] = o[k];        
        arr.splice(-1);
      });
    };    
    
loop(obj, [], result);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

To iterate over keys in objects and recursively navigate nested objects, you can utilize the Object.keys function.

let obj = {'a': {'b': {'c': 12,'d': 'Hello World'},'e': [1,2,3]}},
    result = Object.create(null),
    loop = function (o, arr, result) {
      Object.keys(o).forEach(k => {
        arr.push(k);
        if (typeof o[k] === 'object' && !Array.isArray(o[k])) loop(o[k], arr, result);
        else result[arr.join('/')] = o[k];        
        arr.splice(-1);
      });
    };    
    
loop(obj, [], result);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Using javascript, retrieve the JSON values for each level

Answer №1

Answer №2

Answer №3

Similar questions

Tips on updating a JSON file exclusively using vanilla JavaScript with an AJAX call using the HTTP POST method?

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

Transforming the "[myObject][1][application]" string into a valid path for a JObject

The functionality of the jQuery function is disrupted when I navigate to a different page/row or perform a search for specific items

Posting JSON data in MVC4 to upload a large amount of data into the database

The act of exporting components from the main index file allows for

The button labeled "issett" is malfunctioning

Obtaining a JSON reply using Ember

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

Increase the Z-Index of the Header above the Material UI Modal Background

Is the RouterModule exclusively necessary for route declarations?

Eliminate specific content from within a div tag

Is there a way to have the collapsible content automatically expanded upon loading?

Rotating arrows enhance the functionality of the accordion menu

Serializing a Map containing key-value pairs represented as a case class using circe

Using Ionic to invoke a function within another function in a JavaScript service

Display a bootstrap toast using a JavaScript class method

Automatic Refresh and Search Functionality on PHP Page

Encountering a 404 error with Angular 6 routing after refreshing the page when using an Nginx proxy

Anomaly in Date String Comparison within Angular Controller