CODEWITHSUNDEEP
angulartypescript
Devops_Dev
Devops_Dev

Reputation: 21

Read api json response in typescript

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"
                }
            ]
        }
    ]

Upvotes: 0

Views: 1173

Answers (4)

MG7
MG7

Reputation: 153

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))
}

Upvotes: 0

amir rad
amir rad

Reputation: 122

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));

Upvotes: 0

AdityaParab
AdityaParab

Reputation: 7100

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' ]

Upvotes: 1

Manish Bhatia
Manish Bhatia

Reputation: 1

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.

Upvotes: 0

Related Questions