Нужна помощь в преобразовании строки json в объект

Question

У меня есть следующий объект JSON, возвращенный службой, и мне нужно преобразовать его в класс Directory. Как мне это сделать, поскольку класс Directory имеет свойство «расширено», которого нет в объекте JSON. Пожалуйста. помощь, которую я пробовал в последние дни.

Спасибо заранее.

    export class Directory {
       type: string;
       name: string;
       expanded: false;
       directories: Directory[];
       files: File[];
    }
    export class File {
       type: string;
       name: string;
       fileExtension: string;
       size: string;
       lastModified: string;
       downloadUrl: string;
    }

[
    {
        "type": "directory",
        "name": "DIR A",
        "directories": [],
        "files": [
            {
                "type": "file",
                "name": "FILEN.pdf",
                "fileExtension": ".pdf",
                "size": 1000,
                "lastModified": "2020-06-17",
                "downloadUrl": "http://example.com/filename.pdf"
            },
            {
                "type": "file",
                "name": "FILEN-1.pdf",
                "fileExtension": ".pdf",
                "size": 1000,
                "lastModified": "2020-06-15",
                "downloadUrl": "http://example.com/filename-1.pdf"
            }
        ]
    },
    {
        "type": "directory",
        "name": "DIR B",
        "directories": [],
        "files": [
            {
                "type": "file",
                "name": "FILEN-2.pdf",
                "fileExtension": ".pdf",
                "size": 1000,
                "lastModified": "2020-06-12",
                "downloadUrl": "http://example.com/filename-2.pdf"
            }
        ]
    }   
]

Я пробовал следующее:

  this.api.getFileUrl().subscribe((response:any) => {
    let directory: Directory = JSON.parse(JSON.stringify(response));
  });

и объект каталога делает при отладке у меня не было свойства «расширено». Кстати, я новичок в Typescript и Angular.

Answer 1

Вы должны понимать, что тип из TypeScript ничего не делает во время выполнения.

Похоже, что класс Directory имеет единственное значение для expanded -> false, поэтому мы можем присвоить это значение объект ответа.

Итак, вы можете сделать следующее:

// means all values except expanded
type IGetFileUrlResponse = Omit<Directory, 'expanded'>; 

this.api.getFileUrl().subscribe((response: IGetFileUrlResponse) => {
    // here we add expanded prop for valid Directory type
    let directory: Directory = {
       ...response,
       expanded: false,
    };
 });

Answer 2

Я вижу это в вашей попытке решения ...

this.api.getFileUrl().subscribe((response:any) => {
    //..
}

Для того, чтобы это было правильно и полностью работало, это означает, что вы должны установить getFileURL() таким образом ...

this.api.getFileUrl() = from(fetch('SomeJsonPageOfYours.json')).pipe(
    switchMap(response => response.json())
)

Если вы не получаете ожидаемую структуру данных, я бы посмотрел, с чем вы subscribing() this.api.getFileUrl(). Вы уверены, что у вас есть вызовы .json() для объекта response? Я бы посмотрел в этом направлении (кода для этого не видел).

Answer 3

Объявить интерфейс и реализовать его:

 export interface IDirectory {
       type: string;
       name: string;
       directories: Directory[];
       files: File[];
    }
     export class Directory implements IDirectory {
       type: string;
       name: string;
       expanded: false;
       directories: Directory[];
       files: File[];
    }

Теперь используйте тип интерфейса:

this.api.getFileUrl().subscribe((response:any) => {
    let directory: IDirectory = response;
  });

Answer 4

Допустим, у вас есть json в свойстве с именем data, просто выполните: -

public directory: Omit<Directory, 'expanded'> = JSON.parse(data);