How to access a nested object inside another object in javascript?

Question

I am using Vue.js an I have a data object that I want to access properties dynamically. But I can't seem to be able to access the properties of the filters object dynamically.

export export default {
    template: ``,
    data() {
        return {
            something: 'This is some value.',
            filters: {
                fullSearch: 'This is full search.'
            }
        }
    }
}

I can access "something" but I can't access filters.fullSearch dynamically.

This works

console.log(this['something']) // This is some value.

But this does not work

console.log(this['filters.fullSearch']) // Component.js:589 undefined

Here is the full code. I am looping through all of the properties of this.$route.query and assigning them to filters in my data like this. But it's not working. What am I doing wrong?

for (let [key, value] of Object.entries(this.$route.query)) {
    if (this['filters.' + key] !== undefined) {
        this['filters.' + key] = value
    }
}

Possible duplicate of [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Charlie, Jul 23 '19 at 08:33

Nina Scholz · Answer 1 · 2019-07-23T08:38:06.873

2

You need to address the inner object with the right property accessor.

this['filters']['fullSearch']

or with static properties

this.filters.fullSearch

edited Jul 23 '19 at 08:38

answered Jul 23 '19 at 08:30

Nina Scholz

376,160
25
347
392

The first gives - syntax error: Uncaught SyntaxError: Unexpected identifier – Liga Jul 23 '19 at 08:36
have you tried `this['filters']['fullSearch']`? with the keys as strings in brackets? – Nina Scholz Jul 23 '19 at 08:38

Charlie · Accepted Answer · 2019-07-23T08:37:15.043

1

It should be

console.log(this['filters']['fullSearch'])

or

console.log(this['filters'].fullSearch)

or

console.log(this.filters.fullSearch)

edited Jul 23 '19 at 08:37

answered Jul 23 '19 at 08:31

Charlie

22,886
11
59
90

The first one gives a syntax error: Uncaught SyntaxError: Unexpected identifier – Liga Jul 23 '19 at 08:35
That is because you don't have the `'` (single quote) at the end of your string. – Charlie Jul 23 '19 at 08:37

score 0 · Answer 3 · answered Jul 23 '19 at 08:31

0

You have mixed the dot and bracket notation. The following solution will work.

for (let [key, value] of Object.entries(this.$route.query)) {
    if (this['filters'][key] !== undefined) {
        this['filters'][key] = value
    }
}

answered Jul 23 '19 at 08:31

PaulShovan

2,140
1
13
22

How to access a nested object inside another object in javascript?

3 Answers3