Pesquisa de site

spring - Typescript não pode ler um map<string,string> a partir de dados JSON


Estou usando Angular5 em uma aplicação Spring Boot. Estou tentando retornar um Map em JSON.

Primavera :

//some method
return ResponseEntity.ok((new Gson()).toJson(/*My map object*/));

Angular5 :

sql_list = new Map<string,string>();
this.myService.getQueries().subscribe(
    data => {
        console.log("Received data: ");
        console.log(data);
        this.sql_list = data;
        console.log(this.sql_list.get("query1"));
    } 
);

No cliente, posso ver que os dados são bem recebidos usando console.log :

Received data:
{
  "query1" : "select * from test",
  "query2" : "select * from test2",
  "query3" : "select * from test3"
}

Mas o objeto sql_list me dá esse erro ao tentar usar o método map.get(string key) :

ERRO TypeError: _this.sql_list.get não é uma função

Qual erro eu cometi ali?

EDITAR: seguindo a resposta do Florian, isso está funcionando:

this.sql_list = new Map<string, string>(Object.entries(data));

Resposta #1

Como Florian explicou, você está atribuindo um objeto JSON simples a algo que deveria ser Map. Uma coisa que você pode fazer se realmente quiser que seja Map é fazer

for (const key in data) {
    this.sql_list.set(key, data[key]);
}

Isso vai percorrer todas as chaves que você tem ('query1', 'query2', 'query3') e então vai definir o valor dessa chave no seu mapa

Só estou curioso por que você está usando Map, porque se você já sabe como seu objeto vai ser e quais campos ele terá, por que você não cria uma classe e o tipa como essa classe?

Apenas uma sugestão. Também é mais fácil quando você escreve código no VS Code, por exemplo, você terá auto-completar

Resposta #2

Na sua primeira linha, você cria um Mapa:

sql_list = new Map<string,string>();

Mas mais tarde, no manipulador de dados, você apenas sobrescreve esse objeto com os dados recebidos:

this.sql_list = data;

Como data é algo retornado pelo manipulador HTTP, muito provavelmente não atenderá à interface Map e não oferecerá funções como get. Em vez disso, será um objeto JavaScript simples que você poderá ler como console.log(sql_list['query1']).

Você poderia usar alguma combinação inteligente de Object.keys() e set() (do seu objeto Map vazio armazenado em sql_list) para "converter" o objeto JavaScript retornado data em um objeto Map completo.