Angular: How do you identify JSON objects with id's?

Question

To hopefully simplify my question, I have broken it down like so:

What I do understand

If this is my object:

{ 
     things: [{
         'text': 'version'
         'short': 'v',
         'order': 1,
         'id': 'A'
     },{
         'text': 'update'
         'short': 'u',
         'order': 2,
         'id': 'B'
     }]
}

...then this is my type class:

 export class Thing {
     text: string;
     short: string;
     order: number;
     id: string;
 }

What I do not understand

If this is my data:

 { things: {
         'A': {
             'text': 'version'
             'short': 'v',
             'order': 1,
             'id': 'A'
         },
         'B': {
             'text': 'update'
             'short': 'u'
             'order': 2
             'id': 'B'
         }
     }
 }

...then the type class is...?

I have tried some really creative, ineffective tries to get this to work to no avail. I'm also hoping I can make sense of what to do with this non-array array (no square-brackets). Apologies if this is a duplicate.

JSON is a textual notation for data exchange. (More here.) If you're dealing with JavaScript source code, and not dealing with a string, you're not dealing with JSON. — T.J. Crowder
– T.J. Crowder, Commented Oct 11, 2018 at 14:03

T.J. Crowder · Accepted Answer · 2018-10-11 14:09:25Z

4

In that second situation, your things type would be an index type like this:

interface ThingHolder {
    [key: string]: Thing;
}

That says that the keys are strings and the values are Things.

The interface for data would be something that has a things property of that type:

interface AppropriateNameHere {
  things: ThingHolder;
}

So then, the compiler is happy with this:

const data : AppropriateNameHere = {
  things: {
    'A': {
      'text': 'version',
      'short': 'v',
      'order': 1,
      'id': 'A'
    },
    'B': {
      'text': 'update',
      'short': 'u',
      'order': 2,
      'id': 'B'
    }
  }
};

Live Example on the TypeScript playground.

answered Oct 11, 2018 at 14:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Ambrown Over a year ago

Excellent! Thanks very much!

Collectives™ on Stack Overflow

Angular: How do you identify JSON objects with id's?

What I do understand

What I do not understand

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I do understand

What I do not understand

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related