How to map a complex JSON value to an array of simple objects

A bit late but here's a similar answer:

.then(json => {
    const items = [];
    for (const obj of json) {
        const listItem: IListItem = {
            id: String(obj.ID),
            title: obj.Title,
            modified: obj.Modified,
            created: obj.Created,
            modifiedby: obj.Editor.Title,
            createdby: obj.Author.Title
        }
        items.push(listItem);
    }
    return this._listItems = items;
})

see this fiddle also.

As a side note you could use two interfaces, one for the JSON objects you receive from your webservice and one for the objects you use in your API. Something like this:

interface IListSubItemJSON {
    title: string;
}

interface IListItemJSON {
    Author: IListSubItem;
    Editor: IListSubItem;
    ID: number;
    Title: string;
    Modified: Date;
    Created: Date;
}

interface IListItem {
    [key: string]: any;
    id: string;
    title: string;
    modified: Date;
    created: Date;
    modifiedby: string;
    createdby: string;
}

class ListItem implements IListItem {
    id: string;
    title: string;
    modified: Date;
    created: Date;
    modifiedby: string;
    createdby: string;

    private constructor(id ? : string, title ? : string, created ? : Date, modified ? : Date, createdby ? : string, modifiedby ? : string) {
        this.id = id;
        this.plantName = plantName;
        this.version = version;
    }

    public static createFromJSON(json: IListItemJSON): ListItem {
        return new ListItem(json.plantCode, json.plantName, json.version);
    }

    public static createFromJSONArray(json: IListItemJSON[]): ListItem[] {
        const items: ListItem[] = [];
        for (const item of json) {
            const listItem: ListItem = ListItem.createFromJSON(item);
            items.push(listItem);
        }
        return items;
    }

    public toJSON(): ListItemJSON {
        ...
        return new ListItemJSON(...);
    }
    ...
}

This way you no longer have a strong dependency on the webservice data structures in the sense that if they modify you only need to adapt your mappings.

Your 'then' code simplifies to:

.then(((json: {
    value: IListItemJSON[]
}):ListItem[]) => (this._listItems = ListItem.createFromJSONArray(json.value)));

It looks like you are expecting to get JSON back in the response, (i.e. setting the Accept header to application/json), but you are actually getting back XML. I wouldn't normally expect request.json() to attempt to coerce the XML to a plain javascript object.

You will need to implement some additional logic beyond response.json() to parse your response.

EDIT:

Assuming your sever can't be configured to actually return JSON, you will likely want to pull in an XML parsing library. Keep in mind XML cannot map directly to JSON; they are fundamentally different. This means you likely have to do some additional work than just passing your document to some library function. Without a more specific question the best I can do is point you to some resources:

• https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML
• https://www.npmjs.com/package/xml-parser