Get Nested Value in Object

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore how to get nested values in JavaScript objects using a function called dig. This function can be used to retrieve a specific value from a complex nested object, making it easier to access the necessary information. Through this lab, you will learn how to use the in operator and the reduce() method to traverse through nested objects and find the target value.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/data_types -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/arith_ops -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/comp_ops -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/cond_stmts -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/array_methods -.-> lab-28357{{"`Get Nested Value in Object`"}} javascript/higher_funcs -.-> lab-28357{{"`Get Nested Value in Object`"}} end

How to Get a Nested Value in a JSON Object

To retrieve a target value from a nested JSON object based on a given key, follow these steps:

  • Open the Terminal/SSH and type node to start practicing coding.
  • Check if the target exists in the obj using the in operator.
  • If the target is found, return the corresponding value in the obj.
  • If the target is not found, use Object.values() and Array.prototype.reduce() to recursively call the dig function on each nested object until the first matching key/value pair is found.

Here is the code for the dig function:

const dig = (obj, target) =>
  target in obj
    ? obj[target]
    : Object.values(obj).reduce((acc, val) => {
        if (acc !== undefined) return acc;
        if (typeof val === "object") return dig(val, target);
      }, undefined);

To use the dig function, first create a JSON object with nested levels, like this:

const data = {
  level1: {
    level2: {
      level3: "some data"
    }
  }
};

Then, call the dig function with the JSON object and the desired key:

dig(data, "level3"); // 'some data'
dig(data, "level4"); // undefined

These examples will return the value of the level3 key in the data object and undefined for the non-existent level4 key.

Summary

Congratulations! You have completed the Get Nested Value in Object lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like