Exploring different ways to navigate JSON data dynamically and efficiently modify it

Question

Exploring different ways to navigate JSON data dynamically and efficiently modify it

I have a JSON data structure resembling a map.

var map =  {        
    level1 : {          
            x : {name:'level1 x' , },
            y : {name:'level1 y'}
    },
    level2 : {          
            x : {name:'level2 x'},
            y : {name:'level2 y'}
    }

}

To traverse this data, I am provided with a string representing the path to follow:

"level1 x name" , "level2 y name";

How can I access and manipulate the JSON data based on this string path?

This is what I have attempted so far:

var path = "level1 x name".split(" ");
var pointer = map; // assuming it will take reference of map and change will cause to map also
 for (var i = 0, len = path.length; i < len; i++) {
   if(pointer){
      pointer = pointer[path[i]];
   }else{
     pointer = map[path[i]];
   } 
 }
 pointer = "level1 xx";

console.log(map);

However, the map data does not seem to be changing. How can I iterate through the data and update its values accordingly?

javascript arrays json parsing object

Answer 1

Answer №1

Here is a step-by-step guide to retrieve your desired value:

var result = [data].concat("categoryA subcategoryX".split(" ")).reduce(function(previous, current) {
    return previous[current];
});

console.log(result);

// -> 'subcategoryY'

In JavaScript, arguments are passed by value and not by reference.

To make it easier for you, I have modified the code as per your requirements:

var path = "categoryA subcategoryX".split(" ");
var pointer = data;
for (var index = 0, length = path.length-1; index < length; index++) {
    if(pointer){
        pointer = pointer[path[index]];
    }else{
        pointer = data[path[index]];
    } 
}
pointer[path[path.length-1]] = "subcategoryZ";

console.log(data);

Answer 2

Here is a step-by-step guide to retrieve your desired value:

var result = [data].concat("categoryA subcategoryX".split(" ")).reduce(function(previous, current) {
    return previous[current];
});

console.log(result);

// -> 'subcategoryY'

In JavaScript, arguments are passed by value and not by reference.

To make it easier for you, I have modified the code as per your requirements:

var path = "categoryA subcategoryX".split(" ");
var pointer = data;
for (var index = 0, length = path.length-1; index < length; index++) {
    if(pointer){
        pointer = pointer[path[index]];
    }else{
        pointer = data[path[index]];
    } 
}
pointer[path[path.length-1]] = "subcategoryZ";

console.log(data);

Answer 3

Answer №2

Give this a try! Modify the path variable as needed. It's functioning properly as confirmed in firebug.

var map =  {        
    level1 : {          
            x : {name:'level1 x' , },
            y : {name:'level1 y'}
    },
    level2 : {          
            x : {name:'level2 x'},
            y : {name:'level2 y'}
    }
};
var path = "level1 x name";
var pathInfor = path.split(' ');
var pathLength = pathInfor.length;
//alert(map[pathInfor[0]][pathInfor[1]][pathInfor[2]].name);

for(level in map)
{
    if(level == pathInfor[0]){
       var selLevel = map[level];
        for(xy in selLevel)
        {
           if(xy == pathInfor[1])
           {
                  var selVariable = map[level][xy];
                    for(innerVal in selVariable){
                               if(innerVal == pathInfor[2]){
                               alert(map[level][xy][innerVal]);
                               }
                    }
           }
        }
    }
}

This approach eliminates the need to compare values. To display all JSON values, simply remove the condition.

Answer 4

Give this a try! Modify the path variable as needed. It's functioning properly as confirmed in firebug.

var map =  {        
    level1 : {          
            x : {name:'level1 x' , },
            y : {name:'level1 y'}
    },
    level2 : {          
            x : {name:'level2 x'},
            y : {name:'level2 y'}
    }
};
var path = "level1 x name";
var pathInfor = path.split(' ');
var pathLength = pathInfor.length;
//alert(map[pathInfor[0]][pathInfor[1]][pathInfor[2]].name);

for(level in map)
{
    if(level == pathInfor[0]){
       var selLevel = map[level];
        for(xy in selLevel)
        {
           if(xy == pathInfor[1])
           {
                  var selVariable = map[level][xy];
                    for(innerVal in selVariable){
                               if(innerVal == pathInfor[2]){
                               alert(map[level][xy][innerVal]);
                               }
                    }
           }
        }
    }
}

This approach eliminates the need to compare values. To display all JSON values, simply remove the condition.

Exploring different ways to navigate JSON data dynamically and efficiently modify it

Answer №1

Answer №2

Similar questions

Swap out the div block with a new one

What is the best way to generate the message dynamically?

NodeJS guide: Enabling cross-domain access for web services

A step-by-step guide on disabling Google Analytics in a Next.js document.js file

Conceal the HTTP status code alert in the Chrome developer console

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties

Enhancing image search functionality through dynamic HTML updates

The Hydration error is caused by dynamic imports in NextJS v14.2.3

Is there a way to retrieve the previous value in an input field's onChange event?

JavaScript form not working on submission

How can I display input only when a checkbox is selected? React with Next.js

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Implementing Github Oauth2 in a Rails server independent from a chrome extension

Chrome and Firefox provide excellent compatibility for running JavaScript, whereas Safari may encounter some issues. Opera's performance with JavaScript can be quirky

Tips for utilizing date objects instead of date 'strings' while still obtaining the desired outcome

Code written in JQuery functions correctly when executed within the console, yet encounters issues when located within the script tag or

What is the process for deleting headers in a $http.get call and simultaneously including "application/json" and "text/plain" under the "Accept" header?

Implementing a JSON array to object conversion in an Express REST API

Issue with scrolling functionality on dynamically inserted items in jQuery mobile list