How to build programmatically the path for object data in React

Question

I have a data object that looks like the shot below:

The data is coming from my Redux store, so when I want to display let's say the IP of camera_1, I can reach it the following way: this.props.data.settings.cameras.camera_1.IP._text

My problem is that if I want to build programmatically the path above I get an error because REACT take the path as a string. Yes I know, I'm building the path with literal strings but how to solve the problem? :-/

This is the way I'm trying to build the path:

const root = this.props.data.settings
// The following strings are coming from the previous page as routing params
const {page,node,item} = this.props.match.params


// The strings have the following values
page = 'cameras'
node = 'camera_1'
item = 'IP'

const fullPath = `${root}.${page}.${node}.${item}._text`

I appreciate your time and help!

Thanks :-)))

Try `this.props.data.settings[page][node][item]._text` instead — Tholle, Jul 17 '18 at 18:40
Possible duplicate of [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — Raphael Rafatpanah, Jul 17 '18 at 18:43
@Tholle I hope I did it correctly. I'm a bit newbie for posting questions. Just in case, YES, your answer solved my problem. — Fernando Martz, Jul 17 '18 at 19:06

score 2 · Accepted Answer · answered Jul 17 '18 at 18:46

You can get the final value by accessing values in the object with the variables page, node, item as keys:

const text = this.props.data.settings[page][node][item]._text;

If you want the path as a string, you could use lodash.get:

const fullPath = `props.data.settings.${page}.${node}.${item}._text`;
const text = _.get(this, fullPath);

score 0 · Answer 2 · answered Jul 17 '18 at 19:03

0

Thanks for the quick replies. @Tholle answer solved the problem:

You can get the final value by accessing values in the object with the variables page, node, item as keys:

const text = this.props.data.settings[page][node][item]._text; If you want the path as a string, you could use lodash.get:

const fullPath = props.data.settings.${page}.${node}.${item}._text; const text = _.get(this, fullPath);

answered Jul 17 '18 at 19:03

Fernando Martz

53
4

If an answer helped, you should consider accepting it instead of posting your own which is just a repost. – Andrew Li Jul 17 '18 at 19:06

How to build programmatically the path for object data in React

2 Answers2