Angular ngx-chart: объект не повторяется

Question

У меня проблема с картами Anguler ngx. Я пытаюсь построить данные и все еще получаю ошибку:
ERROR TypeError: data is not iterable.

Если я использую эти данные, определенные в файле ts, график отображается правильно.

public data = [
  {
    "name": "Požadovaný prùtok vzduchu",
    "series": [
      {
        "value": "  923",
        "name": "0"
      },
      {
        "value": "  923",
        "name": "0"
      },
      {
        "value": "  924",
        "name": "1"
      },
      {
        "value": "  916",
        "name": "5"
      },
      {
        "value": "  916",
        "name": "8"
      }
    ]
  }
];

Но мне нужно вывести данные из запроса https. Мой код:

this.loadedFile.getContent(email,this.nazev).subscribe(res => { 
        console.log(this.data);
        this.data = res.data;
  });

getContent(folder:any, filename:any) {
    return this.httpClient.post<any>(apiUrl + 'loginApi/contentApi/file.php', {folder,filename});  
    }

Результат res.data должен быть JSON с правильным форматом.

"data": {
        "name": "Požadovaný prùtok vzduchu",
        "series": [
            {
                "value": "  923",
                "name": "0"
            },
            {
                "value": "  923",
                "name": "0"
            },
etc...

Это мой код, и я не могу отобразить данные из запроса, из-за повторяемой ошибки. Я пытался преобразовать его в строку и обратно в формат JSON, использовать в качестве строки, создать массив, и ничего не получалось.

Спасибо! :)

Answer 1

Используйте JSON.stringify() и replace() для замены { на [{ и } на }] и JSON .parse () для повторного создания объекта.

let data = {
  "name": "Požadovaný prùtok vzduchu",
  "series": [{  "value": "  923",  "name": "0"},{  "value": "  923",  "name": "0"},{  "value": "  924",  "name": "1"},{  "value": "  916",  "name": "5"},{  "value": "  916",  "name": "8"}
  ]
};
console.log(JSON.parse(JSON.stringify(data).replace(/^\{(.*)\}$/,"[ { $1 }]")));

.as-console-wrapper { max-height: 100% !important; top: 0; }