Exploring various layers of nested data

Question

Exploring various layers of nested data

I am currently developing a comprehensive global data storage system for my application (specifically an Angular JS app - although this question pertains to JavaScript in general).

I have established a 'service' that is responsible for setting the data, retrieving the data, and other related functions.

Here is how it looks:

angular.module('core').factory('dataService', function(callsService) {
  let properties = {
    globalData: {}
  };

  properties.insertData = function(data) {
    for (let x in data) {
      this.globalData[x] = data[x];
    }
    return;
  }

  properties.getData = function(data) {
    return this.globalData[data];
  }

  return properties;
});

The usage of the service would be like this:

dataService.insertData({foo: 'bar'});
dataService.getData('foo'); // 'bar'

However, issues arise when dealing with nested data structures, for example:

dataService.insertData({foo: {bar: 'hello world'}});
dataService.getData('foo'); // {bar: 'hello world'}

While this behavior is expected due to object references, how can I achieve something like:

dataService.getData('foo.bar'); // 'hello world'

or

dataService.getData('[foo][bar]'); // 'hello world'

When revisiting my 'properties.getData' method, is there a way to recursively access nested objects or employ another technique?

properties.getData = function(data) {
  return this.globalData[data]; // should be able to retrieve nested objects
}

javascript angularjs square-bracket

Answer 1

Answer №1

New Answer:

This concise recursive function is designed to meet your specific requirements:

retrieveData = (args, data) => args.length ? this.getData(args.slice(1), data ? data[args[0]] : this.globalData[args[0]]) : data ? data : this.globalData

Simply provide an array of property arguments or array indices to fetch the desired value:

dataService.retrieveData(['arrayOfData', 2, 'propOnArrElement', 'subProp', 'desiredValue'])

Explanation:

The function's signature looks like this:

getData(args: Array, data?: any): any

,

With the following characteristics:

It expects an Array as the first argument (containing the path to the nested data)
An optional second argument represents the data structure being queried (either an Object or Array)
The function returns the requested data in any format.

Functionality Overview:

Upon invocation,

Ensure no definition for the second argument, allowing access to the globalData object.
Check the length of the args Array (args.length ?),
- If elements exist, initiate a recursive call (this.getData(),
  - Omit the first arg from args Array (args.slice(1),),
  - Reintroduce the data argument if applicable (data ?).
    - Accessible properties/indices are identified on the data Object/Array using the first arg element in the latest recursive call (data[args[0]] :),
    - In instances where it remains undefined (initial function call), utilize the globalData property instead (this.globalData[args[0]])).
- Through further recursion, the data structure narrows to deeper levels while args list diminishes.
  - Once args length evaluates to false (exhausted exploration!), the function merely returns the current data object (: data ? data).
  - For calls with an empty array, the entire globalData will be returned instead (: this.globalData).

I trust you find this helpful or engaging to read. It was quite satisfying when this solution emerged while showering tonight. :P

Bonus Content:

An alternative method utilizing ES6 rest parameters and Array.reduce goes even further (enabling function calling without passing an array):

retrieveData = (...args) => args.reduce((data, arg) => data[arg], this.globalData)

Invocation example:

dataService.retrieveData('firstarg', 'secondarg', 'onemorearg', 'desireddata')

Initial Discouraging Response:

To directly fetch the data property, simply access it during function invocation:

const result = dataService.getData(‘foo’).bar

Alternatively:

const result = dataService.getData(‘foo’)[‘bar’]

Answer 2

New Answer:

This concise recursive function is designed to meet your specific requirements:

retrieveData = (args, data) => args.length ? this.getData(args.slice(1), data ? data[args[0]] : this.globalData[args[0]]) : data ? data : this.globalData

Simply provide an array of property arguments or array indices to fetch the desired value:

dataService.retrieveData(['arrayOfData', 2, 'propOnArrElement', 'subProp', 'desiredValue'])

Explanation:

The function's signature looks like this:

getData(args: Array, data?: any): any

,

With the following characteristics:

It expects an Array as the first argument (containing the path to the nested data)
An optional second argument represents the data structure being queried (either an Object or Array)
The function returns the requested data in any format.

Functionality Overview:

Upon invocation,

Ensure no definition for the second argument, allowing access to the globalData object.
Check the length of the args Array (args.length ?),
- If elements exist, initiate a recursive call (this.getData(),
  - Omit the first arg from args Array (args.slice(1),),
  - Reintroduce the data argument if applicable (data ?).
    - Accessible properties/indices are identified on the data Object/Array using the first arg element in the latest recursive call (data[args[0]] :),
    - In instances where it remains undefined (initial function call), utilize the globalData property instead (this.globalData[args[0]])).
- Through further recursion, the data structure narrows to deeper levels while args list diminishes.
  - Once args length evaluates to false (exhausted exploration!), the function merely returns the current data object (: data ? data).
  - For calls with an empty array, the entire globalData will be returned instead (: this.globalData).

I trust you find this helpful or engaging to read. It was quite satisfying when this solution emerged while showering tonight. :P

Bonus Content:

An alternative method utilizing ES6 rest parameters and Array.reduce goes even further (enabling function calling without passing an array):

retrieveData = (...args) => args.reduce((data, arg) => data[arg], this.globalData)

Invocation example:

dataService.retrieveData('firstarg', 'secondarg', 'onemorearg', 'desireddata')

Initial Discouraging Response:

To directly fetch the data property, simply access it during function invocation:

const result = dataService.getData(‘foo’).bar

Alternatively:

const result = dataService.getData(‘foo’)[‘bar’]

Answer 3

Answer №2

It seems like you're asking two questions at once.

To address your first query about passing something similar to dataService.getData('foo.bar');

You have the ability to access object properties using strings in this manner:

var property = foo['bar'];

If desired, you can make this recursive like so:

var property = foo['bar']['baz'];

As for your second question, it might be related to another discussion found at this link?

Answer 4

It seems like you're asking two questions at once.

To address your first query about passing something similar to dataService.getData('foo.bar');

You have the ability to access object properties using strings in this manner:

var property = foo['bar'];

If desired, you can make this recursive like so:

var property = foo['bar']['baz'];

As for your second question, it might be related to another discussion found at this link?

Answer 5

Answer №3

Utilize the $parse service:

  var object = { 'a': [{ 'b': { 'c': 3 } }] };
  var accessor= 'a[0].b.c';

  var result = $parse(accessor)(object);
  console.log("result =>",result);

  // Output: 3

A Sneak Peek at The DEMO

angular.module("app",[])
.run(function($parse) {

  var object = { 'a': [{ 'b': { 'c': 3 } }] };
  var accessor= 'a[0].b.c';
  
  var result = $parse(accessor)(object);
  console.log("result =>",result);
  
  // Output: 3 
})

 <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
</body>

For further details, check out AngularJS $parse Service API Reference.

Answer 6

Utilize the $parse service:

  var object = { 'a': [{ 'b': { 'c': 3 } }] };
  var accessor= 'a[0].b.c';

  var result = $parse(accessor)(object);
  console.log("result =>",result);

  // Output: 3

A Sneak Peek at The DEMO

angular.module("app",[])
.run(function($parse) {

  var object = { 'a': [{ 'b': { 'c': 3 } }] };
  var accessor= 'a[0].b.c';
  
  var result = $parse(accessor)(object);
  console.log("result =>",result);
  
  // Output: 3 
})

 <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
</body>

For further details, check out AngularJS $parse Service API Reference.

Answer 7

Answer №4

In my opinion, using an arrow function as a selector would be beneficial. Here is how you can implement it:

dataService.getData(storage => storage.foo.bar);

The corresponding function in your service should look like this:

properties.getData = function (dataSelector) {
    return dataSelector(this.globalData);
}

Here is a practical example to demonstrate how it works:

const data = {
  prop1: {
    prop2: 1
  }
};

function getData(dataSelector) {
  return dataSelector(data);
}

const prop2 = getData(data => data.prop1.prop2);

console.log(prop2);

If you prefer not to use arrow functions as selectors, you could also use regex to split the string. Here's an alternative approach:

properties.getData = function(data) {  
  var props = data.replace(/\]/g,'').split(/\.\[/g);

 return props.reduce((obj, prop) => obj[prop], this.globalData);

}

For more information, you may find this article helpful.

Answer 8

In my opinion, using an arrow function as a selector would be beneficial. Here is how you can implement it:

dataService.getData(storage => storage.foo.bar);

The corresponding function in your service should look like this:

properties.getData = function (dataSelector) {
    return dataSelector(this.globalData);
}

Here is a practical example to demonstrate how it works:

const data = {
  prop1: {
    prop2: 1
  }
};

function getData(dataSelector) {
  return dataSelector(data);
}

const prop2 = getData(data => data.prop1.prop2);

console.log(prop2);

If you prefer not to use arrow functions as selectors, you could also use regex to split the string. Here's an alternative approach:

properties.getData = function(data) {  
  var props = data.replace(/\]/g,'').split(/\.\[/g);

 return props.reduce((obj, prop) => obj[prop], this.globalData);

}

For more information, you may find this article helpful.

Exploring various layers of nested data

Answer №1

Answer №2

Answer №3

A Sneak Peek at The DEMO

Answer №4

Similar questions

Is there a way to automatically close one menu when another is opened by clicking?

The issue of ng-checked not functioning correctly in conjunction with ng-change and ng-model

The baffling quirks of variables within a Jquery loop

Live search bar feature with jQuery更新

After changing pages, the checkbox's state is reset to empty

Two interdependent select fields

constructing a nested container using XMLHttpRequest

Select elements from a PHP loop

What methods can be used to authenticate the user's input?

What is the best way to determine the count of elements in an array that have the active property set to true?

Within jQuery lies the power to perform multiplication operations effortlessly

What is the best way to implement switchMap when dealing with a login form submission?

The error message "gaq is not defined in opencart 2.0" indicates

Having trouble getting rid of the border-bottom?

Pug does not have access to computed properties within the dynamic class attribute of a Vue component

Verify the password by checking each character as you type

Making an AJAX call to a PHP script to add data

How to Create a Speech Bubble in SVG Using SnapSVG

React JS does not allow TextField and Select to change

Using AngularJS to update attributes in an HTML tag within a string