Create the correct interface for a JSON-CodePudding

Having a JSON that looks like this

[
    {
        "Background": [
            {
                "Blue": 16.58
            },
            {
                "Orange": 15.39
            },
            {
                "Yellow": 14.0
            },
            {
                "Pink": 14.74
            },
            ...
        ]
    },
    {
        "Type": [
            {
                "Brown": 12.89
            },
            {
                "Gold": 6.8
            },
            {
                "Robot": 6.75
            },
            ...
        ]
    },
    {
        "Body": [
            {
                "BlackBasic": 5.15
            },
            {
                "Bathrobe": 5.85
            },
            ...
        ]
    },
    ...
]

I would like to have an interface for my angular app. I currently have:

export interface Attributes{
  [key: string]: Array<Attribute>;
}

export interface Attribute {
  [key: string]: number;
}

I have a fixed set of "top" categories, Background, Type, etc. and each top category has a fixed set of values, e.g. Background has the ones shown above (and more) etc.

Is there a way to have interfaces that allow only the subvalues, depending on the "top level"?

Hint: I have control over the structure of the json as well, if there is an easier way, I could also change the json.

CodePudding user response：

since you have control over the json structure, you should modify it. Is there any reason you have an array at the top level? For me it seems that object would fit better. Also for your "top categories", you could also use object instead of array. There is no need to have an array of objects when they only contain one key.

example JSON:

{
  "Background": {
    "Blue": 16.58,
    "Orange": 15.39,
    "Yellow": 14,
    "Pink": 14.74
  },
  "Type": {
    "Brown": 12.89,
    "Gold": 6.8,
    "Robot": 6.75
  },
  "Body": {
    "BlackBasic": 5.15,
    "Bathrobe": 5.85
  }
}

example interface:

    export interface Background {
        Blue: number;
        Orange: number;
        Yellow: number;
        Pink: number;
    }

    export interface Type {
        Brown: number;
        Gold: number;
        Robot: number;
    }

    export interface Body {
        BlackBasic: number;
        Bathrobe: number;
    }

    export interface RootObject {
        Background: Background;
        Type: Type;
        Body: Body;
    }

CodePudding user response：

I changed your json model cause I think it's more readable:

{
  "Background": {
     "Blue": 16.58,
     "Orange": 15.39,
     "Yellow": 14.0,
     "Pink": 14.74
  },
  "Type": {
     "Brown": 12.89,
     "Gold": 6.8,
     "Robot": 6.75
  },
  "Body": {
     "BlackBasic": 5.15,
     "Bathrobe": 5.85
  }
}

so in this model your interface would be like:

export interface Attributes {
 [key: string]: Attribute;
}

export interface Attribute {
 [key: string]: number;
}