2

Estoy consumiendo un servicio rest y la respuesta que me da viene en Unicode y necesito mostrar countrY_LONG en formato legible guardando todo el objeto.

La respuesta la estoy guardando en un localStorage en Angular.

Estoy buscando pero no encuentro mucho. Si alguien tuviera alguna idea. Gracias.

JSON:

{
  "estado": "0",
  "mensaje": "Ok",
  "detalle": {
    "Detalle": [
      {
        "countrY_LONG": "Afghanist\\u00E1n",
        "isO_COUNTRY_NUM_CD": "004",
        "isO_COUNTRY_CD": "AF",
        "currencY_CD": "AFN",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "971",
        "currencY_NAME": "Afghanistan Afghani"
      },
      {
        "countrY_LONG": "Afghanist\\u00E1n",
        "isO_COUNTRY_NUM_CD": "004",
        "isO_COUNTRY_CD": "AF",
        "currencY_CD": "USD",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "840",
        "currencY_NAME": "D\\u00F3lar estadounidense"
      },
      {
        "countrY_LONG": "Afghanist\\u00E1n US Military Base",
        "isO_COUNTRY_NUM_CD": "840",
        "isO_COUNTRY_CD": "XP",
        "currencY_CD": "USD",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "840",
        "currencY_NAME": "D\\u00F3lar estadounidense"
      },
      {
        "countrY_LONG": "Per\\u00FA",
        "isO_COUNTRY_NUM_CD": "840",
        "isO_COUNTRY_CD": "XP",
        "currencY_CD": "USD",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "840",
        "currencY_NAME": "Sol"
      }
    ]
  }
}

El llamado lo hago de la siguiente forma en service

 getPaisesWU(): Observable<DetallePaisesWU>{
    return this.http.get<DetallePaisesWU>(this.apiRest+"/Remesa/externo/WUListarPaises");
  }

en mi modulo realizo lo siguiente

  this.api.getPaisesWU().subscribe((response) =>{    
      this.lstCambioMoneda=response.detalle.Detalle;    
    });

en mi html

<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-right ">
                      <label class="label text-right required" style="padding-top: 16px;">Pais de pago</label>                   
                  </div>
                  <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 input">
                      <mat-form-field appearance="outline" style="width: 100%;">
                          <mat-select  ngDefaultControl [(ngModel)]="paisesWU.countrY_LONG">
                              <mat-option (click)="onMonedaPais()" *ngFor="let item of lstCambioMoneda"  [value]="item.currencY_CD+'/'+item.isO_COUNTRY_CD">
                                  {{item.countrY_LONG}}
                              </mat-option>
                          </mat-select>
                        </mat-form-field>
                  </div>

pero cuando lo llamo de igual manera me trae los paises en la lista -Afghanist\u00E1n -Per\u00FA

relize el cambio directamente provando que funcione pero no.

en mi LocalStorage me muesta de la siguiente manera con doble \

[,…]
[0 … 99]
0: {countrY_LONG: "Afganist\u00E1n", isO_COUNTRY_NUM_CD: "004", isO_COUNTRY_CD: "AF", currencY_CD: "AFN",…}
countrY_LONG: "Afganist\\u00E1n"
currencY_CD: "AFN"
currencY_NAME: "Afgani afgano"
disP_CURRENCY_CD: null
isO_COUNTRY_CD: "AF"
isO_COUNTRY_NUM_CD: "004"
isO_CURRENCY_NUM_CD: "971"
1: {countrY_LONG: "Afganist\u00E1n", isO_COUNTRY_NUM_CD: "004", isO_COUNTRY_CD: "AF", currencY_CD: "USD",…}
countrY_LONG: "Afganist\\u00E1n"
currencY_CD: "USD"
currencY_NAME: "D\\u00F3lar estadounidense"
disP_CURRENCY_CD: null
isO_COUNTRY_CD: "AF"
isO_COUNTRY_NUM_CD: "004"
isO_CURRENCY_NUM_CD: "840"
2: {countrY_LONG: "Afganist\u00E1n Base Militar US", isO_COUNTRY_NUM_CD: "840", isO_COUNTRY_CD: "XP",…}

y me esta mostrando esos valores en mi lista.

0: {countrY_LONG: "Afganist\u00E1n", isO_COUNTRY_NUM_CD: "004", isO_COUNTRY_CD: "AF", currencY_CD: "AFN",…}

el llamado del api y guardar en el LocalStorage.

 this.api.getPaisesWU().subscribe((response) =>{      
      localStorage.setItem("PaisesWU", JSON.stringify(response.detalle.Detalle));
    });

y desde el componente.ts para utlizarlo en el html

 this.lstCambioMoneda =  JSON.parse(<string>localStorage.getItem("PaisesWU"))

utilando funcion innerText

this.lstCambioMoneda.forEach(e => { 
  const input = event!.target as HTMLElement;
  input.innerText=e.countrY_LONG;
  console.log("Prueba de Pais nombre>>"+JSON.stringify(input.innerText)+":"+input.innerText)  
  return;  
  });

me devulve estos resultados en consola.

Prueba de Pais nombre>>"Afganist\\u00E1n": Afganist\u00E1n

Visualizacion del api en swagger son como 298 objetos que trae voy a poner los 2 primeros

{
  "estado": "0",
  "mensaje": "Ok",
  "detalle": {
    "Detalle": [
      {
        "countrY_LONG": "Afganist\\u00E1n",
        "isO_COUNTRY_NUM_CD": "004",
        "isO_COUNTRY_CD": "AF",
        "currencY_CD": "AFN",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "971",
        "currencY_NAME": "Afgani afgano"
      },
      {
        "countrY_LONG": "Afganist\\u00E1n",
        "isO_COUNTRY_NUM_CD": "004",
        "isO_COUNTRY_CD": "AF",
        "currencY_CD": "USD",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "840",
        "currencY_NAME": "D\\u00F3lar estadounidense"
      },
      {
        "countrY_LONG": "Afganist\\u00E1n Base Militar US",
        "isO_COUNTRY_NUM_CD": "840",
        "isO_COUNTRY_CD": "XP",
        "currencY_CD": "USD",
        "disP_CURRENCY_CD": null,
        "isO_CURRENCY_NUM_CD": "840",
        "currencY_NAME": "D\\u00F3lar estadounidense"
      }..
    ]

codigo del consumo de servicio SoapUi

  public async Task<ResponseHeader> ListarPaisWU()
        {
            ResponseHeader respuesta = new ResponseHeader();
            DasServiceReference.h2hdasrequest h2Hdas = new DasServiceReference.h2hdasrequest();
            DasServiceReference.DAS_Service_Input dasin = new DasServiceReference.DAS_Service_Input();
            try
            {
                DasServiceReference.DASInquiryPortTypeClient dsDasSe = new DasServiceReference.
                    DASInquiryPortTypeClient(WUServicesConfig.GetBasicHttpsBinding(), WUServicesConfig.GetEndPoint());

                dsDasSe.ClientCredentials.ClientCertificate.SetCertificate(
                StoreLocation.LocalMachine,
                StoreName.My,
                X509FindType.FindBySubjectName,
                "WUPartnerIntegration");

                //DasServiceReference.h2hdasrequest h2Hdas = new DasServiceReference.h2hdasrequest();
                //DasServiceReference.DAS_Service_Input dasin = new DasServiceReference.DAS_Service_Input();
                DasServiceReference.channel cha = new DasServiceReference.channel();
                cha.version = "9500";
                cha.name = "ESP";
                cha.type = DasServiceReference.channel_type.H2H;
                h2Hdas.channel = cha;

                DasServiceReference.foreign_remote_system fosy = new DasServiceReference.foreign_remote_system();
                fosy.identifier = "WGHHPE0490T";
                fosy.reference_no = "123456665432";
                fosy.counter_id = "PE049PPA3DN";
                h2Hdas.foreign_remote_system = fosy;

                DasServiceReference.filters_type fity = new DasServiceReference.filters_type();
                fity.queryfilter1 = "es";
                fity.queryfilter2 = "PE USD";
                //  fity.queryfilter3 = "";
                h2Hdas.filters = fity;

                h2Hdas.name = "GetCountriesCurrencies";
                // DasServiceReference.h2hdasreply h2 = new DasServiceReference.h2hdasreply();           
                DasServiceReference.MTMLType ma = new DasServiceReference.MTMLType();
                DasServiceReference.REPLYType re = new DasServiceReference.REPLYType();
                dasin.h2hdasrequest = h2Hdas;
                DasServiceReference.DAS_Service_Output h2 = new DasServiceReference.DAS_Service_Output();
                List<COUNTRY_CURRENCY_Type> las = new List<COUNTRY_CURRENCY_Type>();
                DasServiceReference.REPLYType asa = new DasServiceReference.REPLYType();
        
                for (int i = 0; i < 3; i++)
                {
                    switch (i)
                    {
                        case 0:
                            h2 = dsDasSe.DAS_ServiceAsync(dasin).Result;
                            ma = h2.h2hdasreply.MTML;
                            re = (DasServiceReference.REPLYType)ma.Item;
                            var li = re.DATA_CONTEXT.RECORDSET.Items;
                            // re.DATA_CONTEXT.RECORDSET.Items;          
                            foreach (COUNTRY_CURRENCY_Type item in li)
                            {
                                las.Add(item);
                            }
                            break;
                        case 1:
/*si el ultimo pais es "Hong Kong" se sige buscando*/
                            fity.queryfilter3 = "Hong Kong"; 
                            h2 = dsDasSe.DAS_ServiceAsync(dasin).Result;

                            ma = h2.h2hdasreply.MTML;
                            re = (DasServiceReference.REPLYType)ma.Item;
                            var li2 = re.DATA_CONTEXT.RECORDSET.Items;
                            // re.DATA_CONTEXT.RECORDSET.Items;          
                            foreach (COUNTRY_CURRENCY_Type item in li2)
                            {

                                las.Add(item);
                            }
                            break;
                        case 2:
                      /* si el ultimo pais es  @"Rep\u00FAblica del Norte de Chipre" se sigue buscando */
                            fity.queryfilter3 = @"Rep\u00FAblica del Norte de Chipre" ;
                            h2 = dsDasSe.DAS_ServiceAsync(dasin).Result;
                            ma = h2.h2hdasreply.MTML;
                            re = (DasServiceReference.REPLYType)ma.Item;
                            var li3 = re.DATA_CONTEXT.RECORDSET.Items;
                            // re.DATA_CONTEXT.RECORDSET.Items;          
                            foreach (COUNTRY_CURRENCY_Type item in li3)
                            {
                                item.COUNTRY_LONG = @item.COUNTRY_LONG;
                                las.Add(item);
                            }
                            break;
                    }
                }

respuesta del servicio soapUi igual manera se colocara las 2 primera respuestas

 <RECORDSET>
                     <GETCOUNTRIESCURRENCIES>
                        <COUNTRY_LONG>Afganist\u00E1n</COUNTRY_LONG>
                        <ISO_COUNTRY_NUM_CD>004</ISO_COUNTRY_NUM_CD>
                        <ISO_COUNTRY_CD>AF</ISO_COUNTRY_CD>
                        <CURRENCY_CD>AFN</CURRENCY_CD>
                        <ISO_CURRENCY_NUM_CD>971</ISO_CURRENCY_NUM_CD>
                        <CURRENCY_NAME>Afgani afgano</CURRENCY_NAME>
                     </GETCOUNTRIESCURRENCIES>
                     <GETCOUNTRIESCURRENCIES>
                        <COUNTRY_LONG>Afganist\u00E1n</COUNTRY_LONG>
                        <ISO_COUNTRY_NUM_CD>004</ISO_COUNTRY_NUM_CD>
                        <ISO_COUNTRY_CD>AF</ISO_COUNTRY_CD>
                        <CURRENCY_CD>USD</CURRENCY_CD>
                        <ISO_CURRENCY_NUM_CD>840</ISO_CURRENCY_NUM_CD>
                        <CURRENCY_NAME>D\u00F3lar estadounidense</CURRENCY_NAME>
                     </GETCOUNTRIESCURRENCIES>

Respuesta del Red/Network response

{"estado":"0","mensaje":"Ok","detalle":{"Detalle":[{"countrY_LONG":"Afganist\\u00E1n","isO_COUNTRY_NUM_CD":"004","isO_COUNTRY_CD":"AF","currencY_CD":"AFN","disP_CURRENCY_CD":null,"isO_CURRENCY_NUM_CD":"971","currencY_NAME":"Afgani afgano"},{"countrY_LONG":"Afganist\\u00E1n","isO_COUNTRY_NUM_CD":"004","isO_COUNTRY_CD":"AF","currencY_CD":"USD","disP_CURRENCY_CD":null,"isO_CURRENCY_NUM_CD":"840","currencY_NAME":"D\\u00F3lar estadounidense"},{"countrY_LONG":"Afganist\\u00E1n Base Militar US","isO_COUNTRY_NUM_CD":"840","isO_COUNTRY_CD":"XP","currencY_CD":"USD","disP_CURRENCY_CD":null,"isO_CURRENCY_NUM_CD":"840","currencY_NAME":"D\\u00F3lar estadounidense"}...
4
  • 1
    De manera nativa javascript entenderá esos datos. ¿Podrías ser más concreto en el problema que tienes o compartir algo de código para hacernos una idea? Sobre todo necesitamos saber cómo llamas al servicio rest. el 9 sep. 2021 a las 19:57
  • Llegados a este punto ya hemos determinado el origen del problema, los datos llegan mal formados mediante doble escapado. Borraré el resto de comentarios para limpiar tu pregunta. He editado mi respuesta con información sobre cómo arreglar tu problema. el 10 sep. 2021 a las 21:55
  • Muchas gracias yo estaba utilizando el replace de la siguiente forma response.detalle.Detalle.replace('"\\", "\"); Pero busque en la documentacion que una barra \ lo interpreta como 2 y que 2 \\ como 4 \\\\ pero tu le agregaste .replace(/\\\\/g, "\\"); si me pudieras explicar la rzon de las / y del /g seria de mucha utilidad y gracias nuevamente.
    – Joze Evan
    el 11 sep. 2021 a las 0:45
  • 1
    Se trata de una expresión regular y las encontrarás prácticamente en todos los lenguajes de programación modernos. El modificador g significa que encuentre todas las coincidencias de la expresión, las dos contrabarras, en vez de solo la primera. También podría haber usado String.replaceAll() con "\\\\" como aguja. el 11 sep. 2021 a las 8:33

1 respuesta 1

0

El problema que estás sufriendo es que el API no está devolviendo el JSON correctamente codificado, si no que en su lugar está escapando doblemente su contenido.

Para recuperar el contenido correcto deberás eliminar el doble escapado una vez convertido en cadena de caracteres JSON antes de guardarlo en localStore():

this.api.getPaisesWU().subscribe((response) => {
  /* Corregimos el doble escapado */
  const cadena_corregida = JSON.stringify(
    response.detalle.Detalle
  ).replace(/\\\\/g, "\\");
  /* Ahora puedes guardar felizmente los datos */
  localStorage.setItem(
    "PaisesWU",
    cadena_corregida
  });
});

Al haber guardado la cadena de caracteres en localStorage() con las dobles contrabarras eliminadas, cuando recuperes los datos estarán correctamente codificados.

Aquí tienes el código funcionando antes y después de corregirlo:

const response = {"estado": "0",
  "mensaje": "Ok",
  "detalle": {
    "Detalle": [
      {
        "countrY_LONG": "Afghanist\\u00E1n",
        "currencY_NAME": "Afghanistan Afghani"
      },
      {
        "countrY_LONG": "Afghanist\\u00E1n",
        "currencY_NAME": "D\u00F3lar estadounidense"
      },
      {
        "countrY_LONG": "Afghanist\\u00E1n US Military Base",
        "currencY_NAME": "D\\u00F3lar estadounidense"
      },
      {
        "countrY_LONG": "Per\\u00FA",
        "currencY_NAME": "Sol"
      }
    ]
  }
};

/* Generamos la salida en HTML previa */
response.detalle.Detalle.forEach(elemento => {
  resultado.innerText += elemento.countrY_LONG + ", "
    + elemento.currencY_NAME + "\n";
});

/* Corregimos el doble escapado */
const cadena_corregida = JSON.stringify(
  response.detalle.Detalle
).replace(/\\\\/g, "\\");

/* En stackoverflow no se puede usar "localStorage", por lo que
  tenemos que capturar el error que saldrá al no poder usarlo */
const lstCambioMoneda = JSON.parse((function() {
  try {
    /* Guardamos los datos en localStorage */
    localStorage.setItem("PaisesWU", cadena_corregida);
    /* Los restauramos y usamos para mostrar los datos */
    resultado.innerText += "Usando datos de localStorage\n\n";
    return String(localStorage.getItem("PaisesWU"));
  } catch {
    resultado.innerText += "Estamos en stackoverflow, usamos los datos directamente\n\n";
    return cadena_corregida;
  }
})());

/* Generamos la salida en HTML */
lstCambioMoneda.forEach(elemento => {
  resultado.innerText += elemento.countrY_LONG + ", "
    + elemento.currencY_NAME + "\n";
});
<pre id="resultado"></pre>

Como en los fragmentos de código de stackoverflow no se puede hacer uso de localStorage, capturamos el error y mostramos un mensaje para indicar qué método se ha usado para mostrar los datos en pantalla.

Para reproducir el código sin estas restricciones he creado un repositorios en github en el que puedes probar en línea el comportamiento en una ventana sin limitaciones:

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.