Convertir JSON a array de objetos

Question

El JSON devuelto por el Observable es tan simple como:

{
  "01": "Teléfono",
  "02": "Móvil",
  "03": "Email"
}

Se requiere esta salida...

[
  { "key": "01", "value": "Teléfono" },
  { "key": "02", "value": "Móvil" },
  { "key": "03", "value": "Email" },
]

Definiendo el flujo con el método GET utilizando el módulo httpClientModule e instanciando lo necesario en el service queda algo como:

interface MockModel {
  key: string;
  number: string;
}

/* **/

private mockExampleService(url: string): Observable<MockModel[]> {
  return this.http.get<MockModel[]>(url);
}

public getMockObj(): Observable<MockModel[]> {
  const url = `assets/mock/example.json`;
  return this.mockExampleService(url).pipe(
    map((json) => {
      const convertData = JSON.stringify(json);
      const arrayObjs = [];
      arrayObjs.push(
        JSON.parse(
          convertData,
          (key: string, value: string): MetadataModel[] => {
            return [{ key, value }];
          },
        ),
      );
      return arrayObjs;
    }),
  );
}

El array formado sería erróneo, ya que se ve

Sé que es un asunto del operador rXjs, pero no logré encontrar la solución. Gracias por la ayuda.

Answer 1

Puedes convertirlo así:

      .pipe(
        map(json => {
          // arreglo para guardar los objetos transformados
          let mocks: MockModel[] = [];
          // iterar las keys del objeto
          Object.keys(json).forEach(k => {
            // insertar el nuevo objeto
            mocks.push({
              key: k,
              number: json[k]
            });
          });

          return mocks;
        })
      )
      .subscribe(res => console.log(res));

Demo en vivo