2

Estoy trabajando con laravel 5.6 y poseo una base de datos, donde una de sus columnas posee formato json, y se aprecia de esta manera:

introducir la descripción de la imagen aquí

Desde el Backend, mi ruta es:

Route::get('/perfil/ventas/obtener-opcionmetadata', 'SalesController@getOptionMetadata')->name('obtener.opcionmetadata');

En mi Controlador, poseo el método getOptionMetadata, del cual está así:

public function getOptionMetadata(Request $request)
    {       
        $SubCategoriaId = $request->input('SubCategoriaId');
        $opcMetadatas = DB::table('opcion_metadata')
                ->join('metadata', 'metadata.id', '=', 'opcion_metadata.idMetadata')
                ->join('subcategorias','subcategorias.id','=','metadata.idSubCategoria')
                ->select('metadata.tipoMetadata','opcion_metadata.id','opcion_metadata.idMetadata','opcion_metadata.opcion','opcion_metadata.modalidad')->where('idSubCategoria',$SubCategoriaId)->get(); 

//SE REALIZA UN JOIN PARA SOLICITAR A VARIAS TABLAS, ES IRRELEVANTE.

        $response = ['data' => $opcMetadatas];  
        return response()->json($response);
       
    }

Y en el Frontend, estoy trabajando con una plantilla blade y con Ajax, donde al cambiar un "select", me debería traer la consulta mediante ajax.

Mi Ajax lo tengo de esta manera:

idSubCategoria.change(function(){   //NOMBRE DEL BOTÓN SELECT

            var SubCategoriaId = $(this).val();
            seleccionarMetadata.empty();
            idContent.hide();
            
            if (SubCategoriaId) {
                $.ajax({
                    url: "{{ route('obtener.opcionmetadata')}}",
                    type: 'GET',
                    data: { SubCategoriaId: SubCategoriaId },
                    dataType: 'json',
                    success: function (response) {                     
                     idContent.show(400);
                     $.each(response.data, function (key,value) {
                      $("#Metadatas").append("    <div>"+value.tipoMetadata+"</div><div>"+value.opcion+"</div>")

                        }); 
                    }
                });

Como pueden notar, al traer la respuesta mediante Ajax, se genera un $.each, para traer cada valor. De esta manera funciona bien, ya que obtengo los valores que estoy solicitando, el problema que estoy teniendo, es que poseo una columna con formato json, entonces me trae todo de esta manera:

Lo que se ve en la imagen es el resultado de esto:

$.each(response.data, function (key,value) {
      **$("#Metadatas").append("<div>"+value.tipoMetadata+"</div><div>"+value.opcion+"</div>")**
});

introducir la descripción de la imagen aquí

Y lo que busco, es que se pueda ver así:

introducir la descripción de la imagen aquí

Es decir, que dentro del $.each, exista otro $.each para +value.opcion+ (Eso lo que creo que debo hacer) para que me pueda quitar esos valores sin las comillas, sin los corchetes y sin las comas.

La verdad llevo días estancado con esto, espero su ayuda. Gracias!

3
  • Prueba parsearlo a un objeto javascript, o a un array en este caso. Con jquery var arr = $.parseJSON( value.opcion ); o javascript var arr = JSON.parse( value.opcion );, luego podrá hacer el $.each sobre arr. Commented el 3 ago. 2020 a las 0:21
  • @porloscerrosΨ No me funciona, sólo trae [object Object], [object Object] ..
    – h6gignacio
    Commented el 3 ago. 2020 a las 0:45
  • @porloscerrosΨ , de esta manera $.each(JSON.parse( value.opcion ), function(key,element) { '<p>'+element+'</p>'; })+""); funciona, pero me lo siguue trayendo con comas, existe la forma de poder separarlos o no se puede?
    – h6gignacio
    Commented el 3 ago. 2020 a las 1:14

1 respuesta 1

0

Puedes parsearlo a un objeto javascript, o a un array en este caso. Con jquery var $.parseJSON( value.opcion ); o javascript var JSON.parse( value.opcion );, luego podrá hacer el $.each sobre el resultado. Para que se entienda: De la base de datos recuperas un string, que con $.parseJSON o JSON.parse lo conviertes a un array javascript. Como es un array, tendrás que iterar para imprimir cada elemento, por ejemplo con JSON.parse:

let response = {};
response.data = [
  {
    tipoMetadata: 'algun tipo',
    opcion: "[\"JPG\", \"PNG\"]",
  },
  {
    tipoMetadata: 'otro tipo',
    opcion: "[\"GIF\", \"MP4\"]",
  },
];

$.each(response.data, function (key,value) {
    let html = '';
    html += "<div>"+value.tipoMetadata+"</div>";
    html += "<div>";
    $.each(JSON.parse( value.opcion ), (key,element) => { 
      html += '<p>'+element+'</p>'; 
    });
    html += "</div>";
    $("#Metadatas").append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Metadatas"></div>

O con $.parseJSON es lo mismo:

    let response = {};
    response.data = [
      {
        tipoMetadata: 'algun tipo',
        opcion: "[\"JPG\", \"PNG\"]",
      },
      {
        tipoMetadata: 'otro tipo',
        opcion: "[\"GIF\", \"MP4\"]",
      },
    ];

    $.each(response.data, function (key,value) {
        let html = '';
        html += "<div>"+value.tipoMetadata+"</div>";
        html += "<div>";
        $.each($.parseJSON( value.opcion ), (key,element) => { 
          html += '<p>'+element+'</p>'; 
        });
        html += "</div>";
        $("#Metadatas").append(html);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Metadatas"></div>

2
  • Gracias por darte el tiempo, la verdad me ayudo mucho tu código, realmente era lo que buscaba.. muchas gracias!
    – h6gignacio
    Commented el 3 ago. 2020 a las 1:51
  • Vale, me alegra que te sirviera. Commented el 3 ago. 2020 a las 1:58

Tu Respuesta

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

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