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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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

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

CodePudding user response：

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