Mixing
Angular - How can I define model for complex object?
1
I have this object structure in angular:
this.calendar = {
"years": {
2018: {
"months":
0: {
"weeks":
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
2: {
date: "2018-05-02",
is_valid: true,
price: {'single': 31}
},
3: {
date: "2018-05-03",
is_valid: true,
price: {'single': 231}
},
4: {
date: "2018-05-04",
is_valid: true,
price: {'single': 41}
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
...
}
},
},
1: {
"weeks":
...
},
...
},
2019: {
...
}
}
I want to define this as interface in model because the structure will most likely stay same (or will add a couple of new things in future).
calendar.model.ts
export interface calendar {
...
}
Is it possible to define such a complicated structure in the model in some meaningful and understandable way?
angular
asked Nov 21 '18 at 15:54
DudisDudis
296426
add a comment |
1
I have this object structure in angular:
this.calendar = {
"years": {
2018: {
"months":
0: {
"weeks":
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
2: {
date: "2018-05-02",
is_valid: true,
price: {'single': 31}
},
3: {
date: "2018-05-03",
is_valid: true,
price: {'single': 231}
},
4: {
date: "2018-05-04",
is_valid: true,
price: {'single': 41}
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
...
}
},
},
1: {
"weeks":
...
},
...
},
2019: {
...
}
}
I want to define this as interface in model because the structure will most likely stay same (or will add a couple of new things in future).
calendar.model.ts
export interface calendar {
...
}
Is it possible to define such a complicated structure in the model in some meaningful and understandable way?
angular
asked Nov 21 '18 at 15:54
DudisDudis
296426
1
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
1
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13
add a comment |
1
1
1
I have this object structure in angular:
this.calendar = {
"years": {
2018: {
"months":
0: {
"weeks":
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
2: {
date: "2018-05-02",
is_valid: true,
price: {'single': 31}
},
3: {
date: "2018-05-03",
is_valid: true,
price: {'single': 231}
},
4: {
date: "2018-05-04",
is_valid: true,
price: {'single': 41}
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
...
}
},
},
1: {
"weeks":
...
},
...
},
2019: {
...
}
}
I want to define this as interface in model because the structure will most likely stay same (or will add a couple of new things in future).
calendar.model.ts
export interface calendar {
...
}
Is it possible to define such a complicated structure in the model in some meaningful and understandable way?
angular
asked Nov 21 '18 at 15:54
DudisDudis
296426
I have this object structure in angular:
this.calendar = {
"years": {
2018: {
"months":
0: {
"weeks":
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
2: {
date: "2018-05-02",
is_valid: true,
price: {'single': 31}
},
3: {
date: "2018-05-03",
is_valid: true,
price: {'single': 231}
},
4: {
date: "2018-05-04",
is_valid: true,
price: {'single': 41}
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: {'single': 21}
},
...
}
},
},
1: {
"weeks":
...
},
...
},
2019: {
...
}
}
I want to define this as interface in model because the structure will most likely stay same (or will add a couple of new things in future).
calendar.model.ts
export interface calendar {
...
}
Is it possible to define such a complicated structure in the model in some meaningful and understandable way?
angular
angular
asked Nov 21 '18 at 15:54
DudisDudis
296426
asked Nov 21 '18 at 15:54
DudisDudis
296426
asked Nov 21 '18 at 15:54
DudisDudis
296426
asked Nov 21 '18 at 15:54
DudisDudis
296426
asked Nov 21 '18 at 15:54
DudisDudis
296426
296426
1
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
1
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13
add a comment |
1
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
1
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13
1
1
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
1
1
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13
add a comment |
2 Answers
2
active
oldest
votes
2
Your interface could look like this:
interface calendar {
years: {
[year: number]: {
months: {
[month: number]: {
weeks: {
[week: number]: {
days: {
[day: number]: {
date: string,
is_valid: boolean,
price: {
[quantity: string]: number
}
}
}
}
}
}
}
}
}
}
I don't know if there actually will ever be another price other than single, so feel free to change that accordingly.
But note that the object you posted is not valid JSON. I just guessed that
"months":
0: {
acutally means
"months": {
0: {
etc, so this would be a valid assignment:
const data: calendar = {
"years": {
2018: {
"months": {
0: {
"weeks": {
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
},
2: {
date: "2018-05-02",
is_valid: true,
price: { 'single': 31 }
},
3: {
date: "2018-05-03",
is_valid: true,
price: { 'single': 231 }
},
4: {
date: "2018-05-04",
is_valid: true,
price: { 'single': 41 }
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
}
}
}
}
}
}
}
}
};
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is theday-part.
– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
add a comment |
0
I would suggest to split the declarations into smaller parts. This will be easier when you ever need to construct the data in smaller parts, i.e. add a single day.
export interface Calendar {
years: Year;
}
export interface Year {
year: number;
months: Month;
}
export interface Month {
month: number;
days: Day;
}
export interface Day {
day: number
date: string;
is_valid: boolean;
price: {
single: number
}
}
You can then declare the object as following:
const data: Calendar = {
years: [{
year: 2018,
months: [{
month: 0,
days: [{
day: 1,
date: "2018-01-02",
is_valid: true,
price: { single: 21 }
}]
}]
}]
};
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415863%2fangular-how-can-i-define-model-for-complex-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Your interface could look like this:
interface calendar {
years: {
[year: number]: {
months: {
[month: number]: {
weeks: {
[week: number]: {
days: {
[day: number]: {
date: string,
is_valid: boolean,
price: {
[quantity: string]: number
}
}
}
}
}
}
}
}
}
}
I don't know if there actually will ever be another price other than single, so feel free to change that accordingly.
But note that the object you posted is not valid JSON. I just guessed that
"months":
0: {
acutally means
"months": {
0: {
etc, so this would be a valid assignment:
const data: calendar = {
"years": {
2018: {
"months": {
0: {
"weeks": {
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
},
2: {
date: "2018-05-02",
is_valid: true,
price: { 'single': 31 }
},
3: {
date: "2018-05-03",
is_valid: true,
price: { 'single': 231 }
},
4: {
date: "2018-05-04",
is_valid: true,
price: { 'single': 41 }
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
}
}
}
}
}
}
}
}
};
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is theday-part.
– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
add a comment |
2
Your interface could look like this:
interface calendar {
years: {
[year: number]: {
months: {
[month: number]: {
weeks: {
[week: number]: {
days: {
[day: number]: {
date: string,
is_valid: boolean,
price: {
[quantity: string]: number
}
}
}
}
}
}
}
}
}
}
I don't know if there actually will ever be another price other than single, so feel free to change that accordingly.
But note that the object you posted is not valid JSON. I just guessed that
"months":
0: {
acutally means
"months": {
0: {
etc, so this would be a valid assignment:
const data: calendar = {
"years": {
2018: {
"months": {
0: {
"weeks": {
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
},
2: {
date: "2018-05-02",
is_valid: true,
price: { 'single': 31 }
},
3: {
date: "2018-05-03",
is_valid: true,
price: { 'single': 231 }
},
4: {
date: "2018-05-04",
is_valid: true,
price: { 'single': 41 }
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
}
}
}
}
}
}
}
}
};
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is theday-part.
– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
add a comment |
2
2
2
Your interface could look like this:
interface calendar {
years: {
[year: number]: {
months: {
[month: number]: {
weeks: {
[week: number]: {
days: {
[day: number]: {
date: string,
is_valid: boolean,
price: {
[quantity: string]: number
}
}
}
}
}
}
}
}
}
}
I don't know if there actually will ever be another price other than single, so feel free to change that accordingly.
But note that the object you posted is not valid JSON. I just guessed that
"months":
0: {
acutally means
"months": {
0: {
etc, so this would be a valid assignment:
const data: calendar = {
"years": {
2018: {
"months": {
0: {
"weeks": {
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
},
2: {
date: "2018-05-02",
is_valid: true,
price: { 'single': 31 }
},
3: {
date: "2018-05-03",
is_valid: true,
price: { 'single': 231 }
},
4: {
date: "2018-05-04",
is_valid: true,
price: { 'single': 41 }
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
}
}
}
}
}
}
}
}
};
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
Your interface could look like this:
interface calendar {
years: {
[year: number]: {
months: {
[month: number]: {
weeks: {
[week: number]: {
days: {
[day: number]: {
date: string,
is_valid: boolean,
price: {
[quantity: string]: number
}
}
}
}
}
}
}
}
}
}
I don't know if there actually will ever be another price other than single, so feel free to change that accordingly.
But note that the object you posted is not valid JSON. I just guessed that
"months":
0: {
acutally means
"months": {
0: {
etc, so this would be a valid assignment:
const data: calendar = {
"years": {
2018: {
"months": {
0: {
"weeks": {
1: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
},
2: {
date: "2018-05-02",
is_valid: true,
price: { 'single': 31 }
},
3: {
date: "2018-05-03",
is_valid: true,
price: { 'single': 231 }
},
4: {
date: "2018-05-04",
is_valid: true,
price: { 'single': 41 }
}
}
},
2: {
"days": {
1: {
date: "2018-05-01",
is_valid: true,
price: { 'single': 21 }
}
}
}
}
}
}
}
}
};
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
answered Nov 21 '18 at 16:04
slothsloth
74.1k14127169
74.1k14127169
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is theday-part.
– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
add a comment |
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is theday-part.
– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
You could, but please just create an interface per model structure. One for year, one for month, etc.
– Arne
Nov 21 '18 at 16:06
I think the only part that could maybe be worth extracting its own interface is the
day-part.– sloth
Nov 21 '18 at 16:10
I think the only part that could maybe be worth extracting its own interface is the
day-part.– sloth
Nov 21 '18 at 16:10
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
Great, thanks so much! Yea the day part is a bit complex so I agree :)
– Dudis
Nov 21 '18 at 23:41
add a comment |
0
I would suggest to split the declarations into smaller parts. This will be easier when you ever need to construct the data in smaller parts, i.e. add a single day.
export interface Calendar {
years: Year;
}
export interface Year {
year: number;
months: Month;
}
export interface Month {
month: number;
days: Day;
}
export interface Day {
day: number
date: string;
is_valid: boolean;
price: {
single: number
}
}
You can then declare the object as following:
const data: Calendar = {
years: [{
year: 2018,
months: [{
month: 0,
days: [{
day: 1,
date: "2018-01-02",
is_valid: true,
price: { single: 21 }
}]
}]
}]
};
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
add a comment |
0
I would suggest to split the declarations into smaller parts. This will be easier when you ever need to construct the data in smaller parts, i.e. add a single day.
export interface Calendar {
years: Year;
}
export interface Year {
year: number;
months: Month;
}
export interface Month {
month: number;
days: Day;
}
export interface Day {
day: number
date: string;
is_valid: boolean;
price: {
single: number
}
}
You can then declare the object as following:
const data: Calendar = {
years: [{
year: 2018,
months: [{
month: 0,
days: [{
day: 1,
date: "2018-01-02",
is_valid: true,
price: { single: 21 }
}]
}]
}]
};
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
add a comment |
0
0
0
I would suggest to split the declarations into smaller parts. This will be easier when you ever need to construct the data in smaller parts, i.e. add a single day.
export interface Calendar {
years: Year;
}
export interface Year {
year: number;
months: Month;
}
export interface Month {
month: number;
days: Day;
}
export interface Day {
day: number
date: string;
is_valid: boolean;
price: {
single: number
}
}
You can then declare the object as following:
const data: Calendar = {
years: [{
year: 2018,
months: [{
month: 0,
days: [{
day: 1,
date: "2018-01-02",
is_valid: true,
price: { single: 21 }
}]
}]
}]
};
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
I would suggest to split the declarations into smaller parts. This will be easier when you ever need to construct the data in smaller parts, i.e. add a single day.
export interface Calendar {
years: Year;
}
export interface Year {
year: number;
months: Month;
}
export interface Month {
month: number;
days: Day;
}
export interface Day {
day: number
date: string;
is_valid: boolean;
price: {
single: number
}
}
You can then declare the object as following:
const data: Calendar = {
years: [{
year: 2018,
months: [{
month: 0,
days: [{
day: 1,
date: "2018-01-02",
is_valid: true,
price: { single: 21 }
}]
}]
}]
};
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
answered Nov 21 '18 at 16:11
Teun van der WijstTeun van der Wijst
570315
570315
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415863%2fangular-how-can-i-define-model-for-complex-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Yeah it is possible even more complex than that. Look into Array typescriptlang.org/docs/handbook/basic-types.html
– Jack M
Nov 21 '18 at 16:04
1
there is also a nice app app.quicktype.io or if you are using vscode a plugin marketplace.visualstudio.com/items?itemName=quicktype.quicktype that can help you out
– L.A
Nov 21 '18 at 16:13