How to model static JSON data with typescript class or Interface in ionic

Ionic Framework ionic-v3
1

Screenshot_2017-12-10-12-35-46

How do I model this data with typescript classes or Interface.

I already fetched and received my JSON data with a service, but a friend told me I have to model this data… I’m completely clueless… someone please come to my rescue. Thanks ahead

2

You dont need to but it may save you runtime issues

And the code u show cant be Json. Put it in a json validator website and debug it first

Eg: q2 is wrongly structured

1 Like
3

This was an initial test JSON, As u said I guess I probably have to change structure of my JSON to be very flat for easy modeling. By making it just one layer deep and putting questions in arrays.

As for the JSON, apart for missing commas, strokes and so on. JSON is valid.

The structure is mainly the issue… Do u please have a suggestion as to this… Thanks a million. One more thing can I use plain classes in ionic project, not prividers?

4

Depends a bit on what you want to achieve and yes a good model is helping for the future

in this case I presume you are making a survey or the likes and then it is good to put all the questions in an array so you can easy iterate over it


[

{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},

{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},
{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},
{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},
{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
},
{
   question: "my question",
   options: ['opt1', 'opt2'],
   answer : null,
   explanation:null,
   imageURL: "assets/img/img1.png"
}

]

And possibly use typescript interface to type it

interface QuestionAnswer {

question: string,
options: Array<string>,
answer:string,
etc..

}

Then your list of stuff becomes an Array<QuestionAnswer>

Etc

Making a page that allows the user to answer questions becomes a breeze…

Ok? So now off you go and code and get your hands dirty!

1 Like
5

Thanks. You are the best…

Restructuring right away…
The mentor I never had :slightly_smiling_face:

1 Like
6

Might be easier to build your data structure so it’s as human readable as possible, and look into flattening and unflattening libraries, like this one.

1 Like
7

What more can I ask for, I appreciate the info…

1 Like