2

De la base de datos recibo estos valores en AJAX en formato JSON, que van a ir cambiando según reciba los datos.

Adjunto un pequeño ejemplo para saber cómo puedo recorrerlo para poder imprimirlo en una tabla por medio de Codeigniter

Esto es lo que recibo de la base de datos por AJAX

{
    "respuesta": "success",
    "post": [
        {
            "ID_OTPloteo": "61",
            "ID_Cliente": "3",
            "ID_Documento": "2",
            "Subtotal_OTPloteo": "23.75",
            "Impuesto_OTPloteo": "2.85",
            "Total_OTPloteo": "26.60",
            "NumeroDocumento_OTPloteo": "000140",
            "Serie_OTPloteo": "001",
            "Fecha_OTPloteo": "2020-08-19 21:45:12",
            "Nombre_Cliente": "David Alejandro",
            "Apellido_Cliente": "Paucar Briones",
            "Telefono_Cliente": "0992896820",
            "Nombre_Documento": "Factura",
            "Impuesto_Documento": "12",
            "Cantidad_Documento": "141",
            "Serie_Documento": "001",
            "ID_DetalleOTPloteo": "30",
            "Precio_OTPloteo": "3.00",
            "Importe_OTPloteo": "3.75"
        },
        [
            {
                "ID_DetalleOTPloteo": "30",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "3.00",
                "Importe_OTPloteo": "3.75"
            },
            {
                "ID_DetalleOTPloteo": "31",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "7.00",
                "Importe_OTPloteo": "8.75"
            },
            {
                "ID_DetalleOTPloteo": "32",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "9.00",
                "Importe_OTPloteo": "11.25"
            }
        ]
    ]
}

Esta es la tabla donde necesito imprimir el precio y el importe

<table class="table table-bordered tablaEditarAgregarPloteo">
                                <thead>
                                    <tr>
                                        <th>Metros</th>
                                        <th>Precio Final</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                
                                </tbody>
                            </table>

Esto es lo que he intentado hacer para agregar las filas a la tabla

html = `<tr>`;
                html += `<td><input type="text" name="metrosTotalPloteo[]" class="metrosTotalPloteo form-control" value="${data.post[1][i].Precio_OTPloteo}"></td>`;
                html += `<td><input type="text" class="form-control importeMetrosPloteo" name="importeMetrosPloteo[]" value="${(data.post[1][i].Importe_OTPloteo)}" readonly></td>`;
                html += `<td><a href="#" id="eliminarMetros" value="" class="btn btn-danger btn-icon" type="button"><i class="icon-trash"></i></a></td>`;
                html += `</tr>`;
                
                $('.tablaEditarAgregarPloteo').append(html);
                $(document).on('click', '#eliminarMetros', function () {
                    $(this).closest('tr').remove()
                    calculosMetrosPloteo()
                })
8
  • data[0].ID_OTPloteo Intenta de esa forma
    – Javier fr
    el 20 ago. 2020 a las 15:28
  • Eso si me funciona pero ese array logre ya usarlo para imprimir los datos en los inputs pero el segundo array donde se encuentra el ID_DetalleOtPloteo necesito imprimir los 3 en una tabla pero no se como puedo lograr recorrerlos para poder imprimirlos el 20 ago. 2020 a las 15:32
  • Puedes acceder al arreglo de detalles con data.post[1] y recorrerla para hacer lo que necesites.
    – Triby
    el 20 ago. 2020 a las 15:38
  • @Triby logre hacerlo asi para acceder al ID data.post[1][i].ID_DetalleOTPloteo pero ahora como puedo imprimirlo en una tabla agregando un tr y un td por cada ID en este cado tengo 3 ID's diferentes el 20 ago. 2020 a las 15:44
  • Edita la pregunta para agregar el HTML de la tabla, lo que has intentado y cómo debería quedar.
    – Triby
    el 20 ago. 2020 a las 15:47

2 respuestas 2

2

Tu array es dinámico por que no sabes que vienen en el string json por ese motivo la manera de recorrerlo es un tanto peculiar debes emplear recursividad y mapeo del array

ya anteriormente he dejado esta respuesta para PHP:

Explicación:

Esta linea: echo $key . " => " . $value . "<br>";

Seria correcta en un array de una sola dimensión.
Error se debe a que en algún momento le estas haciendo echo a $value y es una variable de tipo array.
Te recomiendo que uses recursividad; recientemente actualice esta respuesta en otro post que te debe ayudar: Link

el String:


<?php
// el string json que diste de ejemplo:
$json = '{
    "respuesta": "success",
    "post": [
        {
            "ID_OTPloteo": "61",
            "ID_Cliente": "3",
            "ID_Documento": "2",
            "Subtotal_OTPloteo": "23.75",
            "Impuesto_OTPloteo": "2.85",
            "Total_OTPloteo": "26.60",
            "NumeroDocumento_OTPloteo": "000140",
            "Serie_OTPloteo": "001",
            "Fecha_OTPloteo": "2020-08-19 21:45:12",
            "Nombre_Cliente": "David Alejandro",
            "Apellido_Cliente": "Paucar Briones",
            "Telefono_Cliente": "0992896820",
            "Nombre_Documento": "Factura",
            "Impuesto_Documento": "12",
            "Cantidad_Documento": "141",
            "Serie_Documento": "001",
            "ID_DetalleOTPloteo": "30",
            "Precio_OTPloteo": "3.00",
            "Importe_OTPloteo": "3.75"
        },
        [
            {
                "ID_DetalleOTPloteo": "30",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "3.00",
                "Importe_OTPloteo": "3.75"
            },
            {
                "ID_DetalleOTPloteo": "31",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "7.00",
                "Importe_OTPloteo": "8.75"
            },
            {
                "ID_DetalleOTPloteo": "32",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "9.00",
                "Importe_OTPloteo": "11.25"
            }
        ]
    ]
}';

la funcion que hace la magia:

// convertimos el string json en un array o objeto iterable

$obj = json_decode($json);

// la funcion que hace la magia:

function Array_Walk_Re($data)
{
    array_walk($data, function (&$value, $key) {
        echo (is_object($value) || is_array($value) ? Array_Walk_Re($value) : $key.'=>'.$value.'<br>');
    });
}

Array_Walk_Re($obj);

Ouput:

respuesta=>success
ID_OTPloteo=>61
ID_Cliente=>3
ID_Documento=>2
Subtotal_OTPloteo=>23.75
Impuesto_OTPloteo=>2.85
Total_OTPloteo=>26.60
NumeroDocumento_OTPloteo=>000140
Serie_OTPloteo=>001
Fecha_OTPloteo=>2020-08-19 21:45:12
Nombre_Cliente=>David Alejandro
Apellido_Cliente=>Paucar Briones
Telefono_Cliente=>0992896820
Nombre_Documento=>Factura
Impuesto_Documento=>12
Cantidad_Documento=>141
Serie_Documento=>001
ID_DetalleOTPloteo=>30
Precio_OTPloteo=>3.00
Importe_OTPloteo=>3.75
ID_DetalleOTPloteo=>30
ID_OTPloteo=>61
Precio_OTPloteo=>3.00
Importe_OTPloteo=>3.75
ID_DetalleOTPloteo=>31
ID_OTPloteo=>61
Precio_OTPloteo=>7.00
Importe_OTPloteo=>8.75
ID_DetalleOTPloteo=>32
ID_OTPloteo=>61
Precio_OTPloteo=>9.00
Importe_OTPloteo=>11.25

Para Javascript:

var jsonString = '{"respuesta":"success","post":[{"ID_OTPloteo":"61","ID_Cliente":"3","ID_Documento":"2","Subtotal_OTPloteo":"23.75","Impuesto_OTPloteo":"2.85","Total_OTPloteo":"26.60","NumeroDocumento_OTPloteo":"000140","Serie_OTPloteo":"001","Fecha_OTPloteo":"2020-08-1921:45:12","Nombre_Cliente":"DavidAlejandro","Apellido_Cliente":"PaucarBriones","Telefono_Cliente":"0992896820","Nombre_Documento":"Factura","Impuesto_Documento":"12","Cantidad_Documento":"141","Serie_Documento":"001","ID_DetalleOTPloteo":"30","Precio_OTPloteo":"3.00","Importe_OTPloteo":"3.75"},[{"ID_DetalleOTPloteo":"30","ID_OTPloteo":"61","Precio_OTPloteo":"3.00","Importe_OTPloteo":"3.75"},{"ID_DetalleOTPloteo":"31","ID_OTPloteo":"61","Precio_OTPloteo":"7.00","Importe_OTPloteo":"8.75"},{"ID_DetalleOTPloteo":"32","ID_OTPloteo":"61","Precio_OTPloteo":"9.00","Importe_OTPloteo":"11.25"}]]}'


var JSONObject = JSON.parse(jsonString);
console.log(JSONObject);      // Dump all data of the Object in the console 
 function Array_Walk_Re(JSONObject){
  for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {
        if(Array.isArray(JSONObject[key]) || Object.prototype.toString.call( JSONObject[key] ) === '[object Array]'){
          Array_Walk_Re(JSONObject[key]);
        }else{
            console.log(JSONObject[key]);
        }
      
    }
  } 
 }
 
 
 Array_Walk_Re(JSONObject);

No puedo agregar como imprimir en tu tabla los datos, ya que no dejaste esa parte del código, que no te funciona o te da error; pero esta es la manera mas fácil y conveniente de iterar un string JSON dinámico

Si necesitas otro lenguajes puedes utilizar como referencia este link:

Documentación

3
  • 1
    Gracias compa, acabe de compartir el codigo de mi tabla, tambien ahorita estoy trabajando en ajax por lo que al usar javascript el codigo que compartiste no lo logro comprender muy bien para hacer lo mismo que compartiste en php hacerlo en el ajax con javascript, uso codeigniter el 20 ago. 2020 a las 16:04
  • @DavidPaucar bueno te adjunte un link con documentación incluye lo mismo pero para javascirpt.. puedes verificarlo es la misma lógica solo cambia el lenguaje
    – user46896
    el 20 ago. 2020 a las 16:06
  • 1
    Excelente explicación de cómo recorrer objetos JSON en PHP y Javascript
    – Triby
    el 20 ago. 2020 a las 16:30
0

Prácticamente lo tenías listo, no sé exactamente qué era lo que te estaba fallando, solo hice algunos ajustes:

  • Generar todo el HTML en una sola instrucción, en vez de concatenar; esa es una de las ventajas de usar plantillas de texto
  • Agregué un campo oculto para incluir ID, de forma que sepas lo que se está modificando
  • La función para eliminar debe quedar fuera del ciclo

let data = {
    "respuesta": "success",
    "post": [
        {
            "ID_OTPloteo": "61",
            "ID_Cliente": "3",
            "ID_Documento": "2",
            "Subtotal_OTPloteo": "23.75",
            "Impuesto_OTPloteo": "2.85",
            "Total_OTPloteo": "26.60",
            "NumeroDocumento_OTPloteo": "000140",
            "Serie_OTPloteo": "001",
            "Fecha_OTPloteo": "2020-08-19 21:45:12",
            "Nombre_Cliente": "David Alejandro",
            "Apellido_Cliente": "Paucar Briones",
            "Telefono_Cliente": "0992896820",
            "Nombre_Documento": "Factura",
            "Impuesto_Documento": "12",
            "Cantidad_Documento": "141",
            "Serie_Documento": "001",
            "ID_DetalleOTPloteo": "30",
            "Precio_OTPloteo": "3.00",
            "Importe_OTPloteo": "3.75"
        },
        [
            {
                "ID_DetalleOTPloteo": "30",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "3.00",
                "Importe_OTPloteo": "3.75"
            },
            {
                "ID_DetalleOTPloteo": "31",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "7.00",
                "Importe_OTPloteo": "8.75"
            },
            {
                "ID_DetalleOTPloteo": "32",
                "ID_OTPloteo": "61",
                "Precio_OTPloteo": "9.00",
                "Importe_OTPloteo": "11.25"
            }
        ]
    ]
}

// Recorre los datos
data.post[1].forEach(item => {
    // Crea contenido HTML de la fila
    // Agrega un campo oculto para saber qué es lo que se está modificando
    let html = `<tr>
        <td>
            <input type="hidden" name="idPloteo[]" value="${item.ID_DetalleOTPloteo}">
            <input type="text" name="metrosTotalPloteo[]" class="metrosTotalPloteo form-control" value="${item.Precio_OTPloteo}">
        </td>
        <td><input type="text" class="form-control importeMetrosPloteo" name="importeMetrosPloteo[]" value="${(item.Importe_OTPloteo)}" readonly></td>
        <td><a href="#" id="eliminarMetros" value="" class="btn btn-danger btn-icon" type="button"><i class="icon-trash"></i></a></td>
    </tr>`;
    // Agrega fila a la tabla
    $('.tablaEditarAgregarPloteo').append(html);
});

// Esta función debe estar fuera del ciclo
$(document).on('click', '#eliminarMetros', function () {
    $(this).closest('tr').remove()
    calculosMetrosPloteo()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered tablaEditarAgregarPloteo">
                                <thead>
                                    <tr>
                                        <th>Metros</th>
                                        <th>Precio Final</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                
                                </tbody>
                            </table>

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.