CODEWITHSUNDEEP
javascriptjsonangulartypescript
pierre
pierre

Reputation: 933

Json data to typescript model

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.

Upvotes: 1

Views: 293

Answers (2)

Ajay
Ajay

Reputation: 4971

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.

Upvotes: 1

vince
vince

Reputation: 8306

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;
}

Upvotes: 5

Related Questions