Problems with printing select with each

Question

Problems with printing select with each

Navigation

#1 by (1 votes)

2

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){
 $.ajax({
        type: 'GET',
        url : 'http://localhost/proyecto/api/agregar-producto/${id}',
    }).done(function(data){
       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>';

      $("#addList").append(row);
    });
}

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>'
              })
            }
         </select>
</td>';

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) {
    $("#select").append('<option 
    value='+registro.id+'>'+registro.nombre+'</option>');
});

But unfortunately now it is not the case.

javascript jquery

asked by Carlos Mendez 03.08.2018 в 02:58

source

1 answer

Detect the moment entered in an Entry I can not center horizontally a div child of a container div with flexbox

score 1 · Answer 1

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);
//console.log(json);
var theRow = "<tr>";
var theSelect = "<select>";
var thePrices = "";

$.each(json, function(k, item) {
  if (k == "producto") {
    theRow += '<td>${item.id}</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>';

$("#addList").append(theRow);

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="addList" class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Código</th>
      <th>Nombre</th>
      <th>Precio</th>
    </tr>
  </thead>
</table>