La tarea es llenar la tabla con datos de los arreglos id, nombre y precio. ¿Qué estoy haciendo mal?
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var i = 0; var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>'; $.each(data, function(index, value){ table += ('<tr>'); table += ('<td>' + value.id + '</td>'); table += ('<td><img src="' + value.name + '"></td>'); table += ('<td>' + value.price + '</td>'); table += ('</tr>'); }); table += '</table>'; $('#tableContainer').html(table); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tableContainer"> </div>No funciona, porque sus datos de entrada no están organizados como una matriz de objetos, sino como un objeto de matrices (que es menos OOP).
Como prefiero la matriz de objetos como estructura de datos, sugeriría convertir (temporalmente) a esa estructura, y luego su ciclo funcionará como se esperaba:
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] })); var i = 0; var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>'; $.each(array, function(index, value){ table += ('<tr>'); table += ('<td>' + value.id + '</td>'); table += ('<td><img src="' + value.name + '"></td>'); table += ('<td>' + value.price + '</td>'); table += ('</tr>'); }); table += '</table>'; $('#tableContainer').html(table); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tableContainer"> </div> Como comentario no relacionado, sugeriría usar jQuery más en el proceso de construcción de la tabla. Esto también evitará problemas que podría tener cuando sus datos tienen < o & caracteres seguidos inmediatamente de letras, ya que eso se interpretaría como HTML:
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var array = data.id.map((id, i) => ({ id, name: data.name[i], price: data.price[i] })); var i = 0; $('#tableContainer').empty().append($("<table>").addClass("mainTable").append( $("<tr>").append( $("<th>").text("id"), $("<th>").text("name"), $("<th>").text("price") ), ...array.map(value => $("<tr>").append( $("<td>").text(value.id), $("<td>").append($("<img>", { src: value.name })), $("<td>").text(value.price) ) ) )); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tableContainer"> </div>Su estructura de datos no es iterable. Por lo tanto, debe cambiar su estructura de datos para que sea una lista [{id: '1111', name: 'name1', price: 1111}] , o debe suponer que todas las listas (id, nombre, precio) son el misma longitud, y use esa longitud para la iteración.
Como otras respuestas detallan cómo usar una estructura de datos iterables, manejaré el otro método, donde sus datos ya están en este formato y no cambiarán.
Para este método, encuentra la longitud de una propiedad (id, nombre o precio) y recorre todas ellas utilizando el índice. Aquí hay un ejemplo.
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var i = 0; var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>'; data.id.forEach((value, index) => { table += ('<tr>'); table += ('<td>' + data.id[index] + '</td>'); table += ('<td><img src="' + data.name[index] + '"></td>'); table += ('<td>' + data.price[index] + '</td>'); table += ('</tr>'); }); table += '</table>'; $('#tableContainer').html(table); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tableContainer"> </div>Está procesando los datos como si estuvieran estructurados como una sola matriz, así:
data = [ { id: 1986, name: "name1", price: 1148 } ]Sin embargo, sus datos contienen tres matrices, no una:
data = { id: [...], name: [...], price: [...], }Si los datos estuvieran estructurados como en el primer ejemplo, el valor contendría un objeto para cada elemento de la matriz, con las propiedades id, nombre y precio disponibles.
Una opción es convertir la primera estructura de datos a la segunda:
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var mappedData = data.id.map((id, index) => ({ id: id, name: data.name[index], price: data.price[index] }))Luego, use mappedData y acceda a las propiedades como ya lo está haciendo, de la siguiente manera:
var data = {"id":["1986","1990","1989","1985","1988","1987"],"name":["name1","name2 ","name3 ","name4","латунь матовая ","name5"],"price":[1148,1396,2775,1270,1396,1270]}; var mappedData = data.id.map((id, index) => ({ id: id, name: data.name[index], price: data.price[index] })) var i = 0; var table = '<table class="mainTable"><tr><th>id</th><th>name</th><th>price</th></tr>'; $.each(dataMapped, function(index, value){ table += ('<tr>'); table += ('<td>' + value.id + '</td>'); table += ('<td><img src="' + value.name + '"></td>'); table += ('<td>' + value.price + '</td>'); table += ('</tr>'); }); table += '</table>'; $('#tableContainer').html(table);