Problems with printing select with each


I am currently consuming a API , everything is fine but when I want to show the values in a select I do not print anything.

La Api returns the following:

  "producto": {
    "id": 1,
    "codigo": "PRO-0001",
    "nombre": "Disco Duro"
 "precios": [
      "precio_a": 200,
      "precio_b": 300,
      "precio_c": 500

I have a "Add Products" button and what it does is add more products to the list by making a request:

function agregarLista(id){
        type: 'GET',
        url : 'http://localhost/proyecto/api/agregar-producto/${id}',
       var row = '<tr class="item"  data-id="${ id }">';
           row = row + '<td>${ data.producto.codigo }</td>';
           row = row + '<td>${ data.producto.nombre }</td>';
           row = row + '</td></tr>';


Everything is going well, but the problem is that in the same row created dynamically I want to add a price selection, I tried done in many ways and one of them is the following code:

row = row + '<td>
        <select class="form-control">
              $.each(data.precios, function(index) { 
                  '<option value="1">Hola mundo</option>'

As you can see, there are no options created.

I made requests ajax with selects static% ie create them in my HTML and put them % id and point the values of the options there, but in this case the select is created dynamically.

This is an example when you create a select and send the options to the respective id .

<select id="select"></select>

$.each(data,function(key, registro) {

But unfortunately now it is not the case.

asked by Carlos Mendez 03.08.2018 в 02:58

1 answer


First of all I have to say that the JSON that samples would not validate, because it has repeatedly repeated the precio_a key in the price array, which is not allowed in JSON.

In the following code I show a way to solve the problem. It consists of the following:

  • Create a variable theRow to which to concatenate all JSON data in a row.
  • When reading the JSON, it will be asked for the key producto , removing from it the cells id,codigo,nombre
  • You will also be asked for the key precios , taking out of it the three prices by means of a new reading in a loop of the price array. The select is created in a separate variable and then added to theRow as one more cell.
  • Finally we add theRow as an element of the table.

var json =
	"producto": {
		"id": 1,
		"codigo": "PRO-0001",
		"nombre": "Disco Duro"
	"precios": [{
		"precio_a": 200,
		"precio_b": 300,
		"precio_c": 500
json = JSON.parse(json);
var theRow = "<tr>";
var theSelect = "<select>";
var thePrices = "";

$.each(json, function(k, item) {
  if (k == "producto") {
    theRow += '<td>${}</td>';
    theRow += '<td>${item.codigo}</td>';
    theRow += '<td>${item.nombre}</td>';

  if (k == "precios") {
    thePrices = item[0];
    $.each(thePrices, function(k, v) {
      theSelect += '<option value="${v}">${v}</option>';
theSelect += '</select>';
theRow += '<td>${theSelect}</td>';
theRow += '</tr>';

<link href="" rel="stylesheet" />
<script src=""></script>
<table id="addList" class="table">
answered by 03.08.2018 в 05:23