Angular6 JSON - element "...is not defined"

Question

I have created a starter dictionary for my Angular 6 app...

import { Injectable } from "@angular/core";

@Injectable()
export class Languages {
    //template (in English)
    public dialect = {
        "Vocab": [{
            "Pg1": {
                "tag1": "my first string",
                "tag2": "my second string",
                "tag3": "my third string"
            }
        }, {
            "Pg2": {
                "tag1": "my fourth string",
                "tag2": "my fifth string",
                "tag3": "my sixth string"
            }
        }, {
            "Pg3": {
                "tag1": "my seventh string",
                "tag2": "my eighth string",
                "tag3": "my nineth string"
            }
        }, ]
    }
}

When I type this in the calling component...

console.log(this.languages.dialect.Vocab[0].Pg1.ta

...it auto completes the tag I choose for me--in this case I select "tag2". So I know it all works right. When I run the app, the console shows the string "my second string".

All good

However... when I backtrack, and type "Vocab[0].Pg2.ta" it still auto completes for me, but when I choose any value other than Pg1, I get the following error...

ERROR TypeError: "this.languages.dialect.Vocab[0].Pg2 is undefined"

No errors show in the IDE, and the app compiles just fine. What am I doing wrong?

Osama · Accepted Answer · 2018-07-27 13:17:46Z

1

Change your dialect to this

//template (in English)
public dialect = {
    "Vocab": [{
        "Pg1": {
            "tag1": "my first string",
            "tag2": "my second string",
            "tag3": "my third string"
        }, 
        "Pg2": {
            "tag1": "my fourth string",
            "tag2": "my fifth string",
            "tag3": "my sixth string"
        }, 
        "Pg3": {
            "tag1": "my seventh string",
            "tag2": "my eighth string",
            "tag3": "my nineth string"
        }
    } ];

Or use

this.languages.dialect.Vocab[1].Pg2

answered Jul 27, 2018 at 13:17

Osama

3,0301 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AppDreamer Over a year ago

Thanks. While others pointed out that I could change the Vocab to [1], you were the one that understood what I ultimately wanted, which is to create vocabularies that could be swapped out with a single root change. Thanks!

Pavel Levchuk · Accepted Answer · 2018-07-27 14:02:32Z

this.languages.dialect.Vocab[0].Pg2 must be this.languages.dialect.Vocab[1].Pg2.

You can rewrite your code like this for easier access:

// this.languages.dialect.Vocab.Pg2

public dialect = {
    "Vocab": {
        "Pg1": {
            "tag1": "my first string",
            "tag2": "my second string",
            "tag3": "my third string"
        }, "Pg2": {
            "tag1": "my fourth string",
            "tag2": "my fifth string",
            "tag3": "my sixth string"
        }, "Pg3": {
            "tag1": "my seventh string",
            "tag2": "my eighth string",
            "tag3": "my nineth string"
        }
    }
}

Learning is a mess · Accepted Answer · 2018-07-27 13:06:34Z

0

Try this.languages.dialect.Vocab[1].Pg2

Your Pg2 document is the second element of the parent array.

answered Jul 27, 2018 at 13:06

Learning is a mess

8,3178 gold badges42 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular6 JSON - element "...is not defined"

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related