Read api json response in typescript

Question

I am trying to read the following api json response in typescript. I have tried by defining interfaces as shown below. But when reading the values of phone number using loops I am getting value as undefined.

Could some one please help me to parse the below json file in most efficient way.

    for(let i=0; i < custdetails.length; i++){
       phnnumber[i] = custdetails[i].phoneNumber;
    }

export interface Address {
    streetAddress: string;
    city: string;
}

export interface PhoneNumber {
    type: string;
    number: string;
}

export interface custdetails{
    name: string;
    age: number;
    address: Address[];
    phoneNumber: PhoneNumber[];
}

    [
      {
            "name": "Test name1",
            "age": 30,
            "address": {
                "streetAddress": "2nd test street",
                "city": "London"
            },
            "phoneNumber": [{
                    "type": "home",
                    "number": "111 111-1111"
                },
                {
                    "type": "fax",
                    "number": "222 222-2222"
                }
            ]
        },
        {
            "name": "Test name2",
            "age": 30,
            "address": {
                "streetAddress": "3rd test street",
                "city": "Sydney"
            },
            "phoneNumber": [{
                    "type": "home",
                    "number": "888 888-8888"
                },
                {
                    "type": "fax",
                    "number": "999 999-9999"
                }
            ]
        }
    ]

This is NOT a JSON file/text string; this is a JavaScript Object json.org/json-en.html and an object: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - given what you show we have to assume it has already been parsed from a JSON string that was received? — Mark Schultheiss
– Mark Schultheiss, Commented Jul 22, 2022 at 17:21
What is rootobjarray? If it's the result of parsing the JSON shown, it would be an array of custdetails. That object's phoneNumber property is an array of PhoneNumber objects (and should probably be named phoneNumber**s**. So phnnumber[i] will be an array of PhoneNumber objects. It's not clear what's undefined... — Heretic Monkey
– Heretic Monkey, Commented Jul 22, 2022 at 17:25
Hi Heretic, I have misspelled variables. basically I am looking to create an array with list of phone numbers phoneNumbers : string[] = [] console.log(phoneNumbers) should give [111 111-1111, 222 222-2222, 888 888-8888, 999 999-9999] — Devops_Dev
– Devops_Dev, Commented Jul 22, 2022 at 17:33
try changing custdetails to Custdetails.. C in interface to be capital.. I believe you mistyped it — AdityaParab
– AdityaParab, Commented Jul 22, 2022 at 17:34
@AdityaParab, yes I have misspelled variables sorry ab that basically I am looking to create an array with list of phone numbers phoneNumbers : string[] = [] console.log(phoneNumbers) should give [111 111-1111, 222 222-2222, 888 888-8888, 999 999-9999] — Devops_Dev
– Devops_Dev, Commented Jul 22, 2022 at 17:36

AdityaParab · Accepted Answer · 2022-07-22 18:55:19Z

You'd simply need to map over the object and extract necessary information. Since, your phoneNumber is an array located within an array of objects, you'd need to use .flatMap.

const customerDetails = [
  {
    name: 'Test name1',
    age: 30,
    address: {
      streetAddress: '2nd test street',
      city: 'London',
    },
    phoneNumber: [
      {
        type: 'home',
        number: '111 111-1111',
      },
      {
        type: 'fax',
        number: '222 222-2222',
      },
    ],
  },
  {
    name: 'Test name2',
    age: 30,
    address: {
      streetAddress: '3rd test street',
      city: 'Sydney',
    },
    phoneNumber: [
      {
        type: 'home',
        number: '888 888-8888',
      },
      {
        type: 'fax',
        number: '999 999-9999',
      },
    ],
  },
];

const phoneNumbers = customerDetails
  .flatMap((customer) => customer.phoneNumber.map((pn) => pn.number));

console.log(phoneNumbers); // [ '111 111-1111', '222 222-2222', '888 888-8888', '999 999-9999' ]

Manish Bhatia · Accepted Answer · 2022-07-22 17:43:50Z

0

We cannot create the object of interface. Instead of interface use class as shown below:

export class Address {
    streetAddress: string;
    city: string;
}

export class PhoneNumber {
    type: string;
    number: string;
}

export class custdetails{
    name: string;
    age: number;
    address: Address[];
    phoneNumber: PhoneNumber[];
}

And I will recommend to initialize the class property using constructor, so that you should not get undefined.

answered Jul 22, 2022 at 17:43

Manish Bhatia

1

1 Comment

Md Enzam Hossain Over a year ago

Interface is perfectly valid for this, class is not necessary and overkill.

amir raad · Accepted Answer · 2022-07-22 22:24:29Z

first define your model like this,

export class Address {
  constructor(streetAddress: string,
              city: string) {}
}

export class PhoneNumber {
  constructor(type: string,
              number: string) {}
}

export class custdetails {
  constructor(
    name: string,
    age: number,
    address: Address[],
    phoneNumber: PhoneNumber[]
  ) {}
}

second, in another class(Datasource class) define values for customer details like this,

export class Datasource {
customerDetails: custdetails =
  [
    {
          "name": "Test name1",
          "age": 30,
          "address": {
              "streetAddress": "2nd test street",
              "city": "London"
          },
          "phoneNumber": [{
                  "type": "home",
                  "number": "111 111-1111"
              },
              {
                  "type": "fax",
                  "number": "222 222-2222"
              }
          ]
      },
      {
          "name": "Test name2",
          "age": 30,
          "address": {
              "streetAddress": "3rd test street",
              "city": "Sydney"
          },
          "phoneNumber": [{
                  "type": "home",
                  "number": "888 888-8888"
              },
              {
                  "type": "fax",
                  "number": "999 999-9999"
              }
          ]
      }
  ]
}

phoneNumbers = customerDetails .flatMap((customer) => customer.phoneNumber.map((phone) => phone.number));

MG7 · Accepted Answer · 2022-07-25 08:25:06Z

0

Use map in order to extract the "number" from "phoneNumber"

var phnnumbers = []
for(let i=0; i < custdetails.length; i++){
    phnnumbers = phnnumber.concat(custdetails[i].phoneNumber.map(phone => phone.number))
}

edited Jul 25, 2022 at 8:25

answered Jul 22, 2022 at 19:38

MG7

15314 bronze badges

2 Comments

AdityaParab Over a year ago

This won't work. .concat doesn't modify original array. You'd need to do phnnumber = phnnumber.concat(....;

MG7 Over a year ago

You are right. I will correct my answer. Thank you!

Collectives™ on Stack Overflow

Read api json response in typescript

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related