Json data to typescript model

Question

I have a json file, i want to create the model to use the data list(department number and name) for auto-completion use, i found the site json2ts.com but it doesn't work any more. Can you give me an example plese?

{
    "regions": {
        "alsace": [67, 68],
        "aquitaine": [40, 47, 33, 24, 64],
        "auvergne": [43, 3, 15, 63],
        "basse-normandie": [14, 61, 50],
        "bourgogne": [21, 58, 71, 89],
        "bretagne": [29, 35, 22, 56],
        "centre": [45, 37, 41, 28, 36, 18],
        "champagne-ardenne": [10, 8, 52, 51],
        "corse": ["2b", "2a"],
        "franche-compte": [39, 25, 70, 90],
        "haute-normandie": [27, 76],
        "languedoc-roussillon": [48, 30, 34, 11, 66],
        "limousin": [19, 23, 87],
        "lorraine": [55, 54, 57, 88],
        "midi-pyrennees": [46, 32, 31, 12, 9, 65, 81, 82],
        "nord-pas-de-calais": [62, 59],
        "pays-de-la-loire": [49, 44, 72, 53, 85],
        "picardie": [2, 60, 80],
        "poitou-charentes": [17, 16, 86, 79],
        "provences-alpes-cote-dazur": [4, 5, 6, 13, 84, 83],
        "rhones-alpes": [38, 42, 26, 7, 1, 74, 73, 69],
        "ile-de-france": [77, 75, 78, 93, 92, 91, 95, 94]
    },
    "departments": {
        "2a": {
            "name": "Corse-du-Sud",
            "formatted_name": "corse-du-sud"
        },
        "2b": {
            "name": "Haute-Corse",
            "formatted_name": "haute-corse"
        },
        "01": {
            "name": "Ain",
            "formatted_name": "ain"
        },
        "02": {
            "name": "Aisne",
            "formatted_name": "aisne"
        },
        "03": {
            "name": "Allier",
            "formatted_name": "allier"
        },
     ...
}

Can you give me a suggestion, please? At least for the departments. Is it better to create interface or class in this case? Thank you.

One of the VSCode plugins mentioned in Ajay's answer is available to test drive online: jsontots.com — Mike Patrick
– Mike Patrick, Commented Jan 17, 2018 at 19:08
I notice you're new to SO - welcome! Consider "accepting" an answer (by clicking the check mark) if you feel that it answered your question correctly. — vince
– vince, Commented Jan 19, 2018 at 13:22

vince · Accepted Answer · 2018-01-16 15:56:36Z

For regions, you can use this interface with your current data:

interface Regions {
 [name: string]: number[];
}

This will create an interface for an object that can have any string as key, and the value of each property must be an array of numbers (your "regions" property in the above object matches this description).

For departments, I recommend breaking it up into two interfaces, like so:

interface Departments {
  [id: string]: Department;
}

interface Department {
  name: string;
  formatted_name: string;
}

Now each member of the "departments" object can have any key as long as it's a string, and must be attached to a department. It looks like your data requires every department to have a name and a formatted_name (no more, no less), which I've represented in the interface Department above.

Then your whole object would look like this:

interface WholeThing {
  regions: Regions;
  departments: Departments;
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

For VScode IDE (Preferable IDE for Angular Dev), I would suggest you to add plugins which provide functionality of converting JSON to Typescript. Possible solutions can be JSON to TS and JSON to Type.

I hope it might helps.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 16, 2018 at 16:15

Ajay

5,0013 gold badges28 silver badges39 bronze badges

1 Comment

pierre Over a year ago

That's great, a new solution

Collectives™ on Stack Overflow

Json data to typescript model

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related