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:
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>")**
});
Y lo que busco, es que se pueda ver así:
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!
var arr = $.parseJSON( value.opcion );
o javascriptvar arr = JSON.parse( value.opcion );
, luego podrá hacer el$.each
sobrearr
.$.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?