How to construct instance of class using json object array

Question

I'm trying construct the class's object from the array.

import searchData from '../somepath/data.json';

And the data.json file have the following data.

[
  {
    "name": "London"
  },
  {
    "name": "Paris",
  }
]

Then I'm looping it using the forEach.

searchData.forEach((obj: OneClass) => {
});

Here is the class

export class OneClass{
  readonly name: string;
}

It is not working well, I'm getting some kind of type error.

But when I just change the type of searchData to any then it works perfectly,

const searchData: any = [
    {
        'name': 'a'
    }, 
    {
        'name': 'b'
    }, 
    ];

Note: some code are missing due to privacy restriction, so just trying to understand how the construct the object of typescript class using array objects.

Edited:

The json data was importing using the following method.

import searchData from '../somepath/data.json';

@ThomasSablik the code was too complex and large, that's why I tried to make it short. You can say the searchData is importing from the json file. I have updated my question. — Muhammad Ali
– Muhammad Ali, Commented May 25, 2021 at 19:32
@Pogrindis not sure about that, not familiar with Typescript just trying to understand the code of one project. -_- I have the basic knowledge of javascript but not the advanced, that's why struggling. — Muhammad Ali
– Muhammad Ali, Commented May 25, 2021 at 19:37
Use an interface, not a class, if you don't have any methods and no prototype inheritance but only plain data. — Bergi
– Bergi, Commented May 25, 2021 at 19:37

geoM · Accepted Answer · 2021-05-25 20:10:48Z

1

You can either annotate your array explicitly ..

// tell TS that the variable holds an array of objects 
// shaped like instances of OneClass
const searchData: OneClass[] = [
  {
    name: 'a'
  }, 
  {
    name: 'b'
  }, 
];

or use a so-called const assertion.

const myConstArr = [
    {
      name: 'bar'
    } as const 
    // the `as const` tells TS that the value of `name` is not going to change 
    // (that it is a "string literal type" and not just of type `string`)
]

Have a look at the concept of Type Narrowing.

Here is a playground for you to check it out.

edited May 25, 2021 at 20:10

answered May 25, 2021 at 19:35

geoM

5175 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Sablik · Accepted Answer · 2021-05-25 19:30:32Z

0

You should type your array

const searchData: OneClass[] = [
{
    'name': 'a'
}, 
{
    'name': 'b'
}, 
];

answered May 25, 2021 at 19:30

Thomas Sablik

16.5k7 gold badges38 silver badges69 bronze badges

5 Comments

Pogrindis Over a year ago

I might be crazy, but if OneClass has name defined, you sure you need 's? - to me the {} parentheses smells like somone using any or { }..

Bergi Over a year ago

@Pogrindis Quotes or apostrophes are optional around property names, they are only required for things that are no identifiers. Has nothing to do with interface declarations.

Pogrindis Over a year ago

Nice to know. Everydays a schoolday

Muhammad Ali Over a year ago

Why I have to mention the data type OneClass? any will not be enough? Or during the forEach it shouldn't automatically be casting of {} to the object?

Thomas Sablik Over a year ago

@MuhammadAli You should never use any. The whole concept of TypeScript is to type your variables. Don't use any. You should even disallow it in your configuration.

Aaron Ross · Accepted Answer · 2021-05-25 19:34:37Z

0

If what you are doing is trying to create an instance of the class for each item in your array of objects, you need to map and call the constructor:

interface SearchDatum {
 name: string;
}

const searchData: SearchDatum[] = [
  {
    'name': 'a'
  }, 
  {
    'name': 'b'
  }, 
];

class OneClass {
  readonly name: string;

  constructor({ name }: SearchDatum) {
    this.name = name;
  }
}

const classInstances: OneClass[] = searchData.map((datum) => new OneClass(datum));

Here is a Typescript playground link

edited May 25, 2021 at 19:34

answered May 25, 2021 at 19:29

Aaron Ross

1411 silver badge5 bronze badges

3 Comments

Thomas Sablik Over a year ago

What is a JSON array?

Pogrindis Over a year ago

Also defined a Type outside the method, { name: string} encourages bad practice with TS>

Aaron Ross Over a year ago

added explicit type

Collectives™ on Stack Overflow

How to construct instance of class using json object array

3 Answers 3

Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related