1

Al cargar la pagina lleno un array con un $.each y uno de los valores es un id de un parámetro y necesito sacar en base a ese id la descripción para mostrar en una tabla, tengo la función que me devuelve la descripción pero no lo puedo cargar a una variable para que se guarde en el array, como hago para recuperar el valor result para cada elemento?. Gracias

$.each(jsonTransfers, function (index, value) {
  var description = "";
  WorkFlow.Utils.GetTextParameterSelected(188, value.currencyType).then(function (result) {
   description = result;
  });
 ListTransfer.push({CurrencyDescription: description});
}
2
  • Intenta mover el push dentro del then
    – alanfcm
    el 14 ago. 2018 a las 19:23
  • No funciona pero en realidad necesito mostrar de 3 variables la descripción solo puse en el ejemplo de una
    – daniela
    el 14 ago. 2018 a las 19:52

2 respuestas 2

2

Voy a hacer un mock de tu método WorkFlow.Utils.GetTextParameterSelected(id, currency) básicamente devolviendo una promesa que se resuelve después de 1 segundo con el id, la descripción y la moneda:

var descripciones = [
  'hola',
  'soy',
  'la descripción'
];

function getDescripcion(id, currency) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve({
        id: id,
        descripcion: descripciones[id],
        moneda: currency
      });
    }, 1000);
  });
}

En tu bucle $.each vas insertando promesas a un array llamado, muy imaginativamente promesas. Terminado el bucle, llamas a

Promise.all(promesas).then((values) => {
   console.log(values);
});

Para obtener la colección de valores obtenidos una vez que se han resuelto todas las promesas. El orden en que aparecen es el mismo en que se insertaron, sin importar en que orden se resolvieron.

var descripciones = [
  'hola',
  'soy',
  'la descripción'
];

var jsonTransfers = [{
    currencyType: 'USD'
  },
  {
    currencyType: 'EUR'
  },
  {
    currencyType: 'CLP'
  }
];

function getDescripcion(id, currency) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve({
        id: id,
        descripcion: descripciones[id],
        moneda: currency
      });
    }, 1000);
  });
}

var promesas = [];
$.each(jsonTransfers, function(index, value) {
  promesas.push(getDescripcion(index, value.currencyType));
});

Promise.all(promesas).then((respuestas) => {
  console.log(respuestas);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

Jugando un poco con la respuesta de amenadiel le agrego un callback a cada promesa para no tener que esperar a que devuelva todos los items.

var descripciones = [
  'hola',
  'soy',
  'la descripción',
  'o alguna',
  'otra palabra',
  'cuanto mas items',
  'mejor se aprecia',
  'la naturaleza',
  'asíncrona del ajax'
];

var jsonTransfers = [{
    currencyType: 'USD'
  },
  {
    currencyType: 'EUR'
  },
  {
    currencyType: 'CLP'
  },
  {
    currencyType: 'GBP'
  },
  {
    currencyType: 'JPY'
  },
  {
    currencyType: 'AUD'
  },
  {
    currencyType: 'CAD'
  },
  {
    currencyType: 'SGD'
  },
  {
    currencyType: 'CNY'
  }
];

// timeout random por usar el wifi del hotel
function getDescripcion(id, currency) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve({
        id: id,
        descripcion: descripciones[id],
        moneda: currency
      });
    }, (Math.random() * 4 + 2) * 1000);
  });
}

// Relleno la tabla
var table = document.getElementById('transfers');
var tableBody = document.createElement('tbody');

jsonTransfers.forEach(function(itemData, index) {
  var row = document.createElement('tr');
  row.id = "item" + index;
  var cellType = document.createElement('td');
  cellType.className = "ctype";
  cellType.appendChild(document.createTextNode(itemData.currencyType));
  row.appendChild(cellType);

  var cellDesc = document.createElement('td');
  cellDesc.className = "cdesc";
  cellDesc.appendChild(document.createTextNode('?'));
  row.appendChild(cellDesc);

  tableBody.appendChild(row);
});

table.appendChild(tableBody);

// esto es masomenos un callback
var setDescription = function(itemData) {
  var cellDesc = document.getElementById('item' + itemData.id).cells[1];
  cellDesc.style.background = '';
  cellDesc.innerHTML = itemData.descripcion;
}

// para que el log no tape las cosas
var consolog = function(...cosas) {
  var logs = document.getElementById('logs');
  cosas.forEach((t) => {
    logs.innerHTML += t + " ";
  });
  logs.innerHTML += "\n";
  logs.scrollTop = logs.scrollHeight;

};

var promesas = [];
$("#dale").on("click", () => {

  // inhabilitamos el boton de pedir
  document.getElementById("dale").disabled = true;
  // limpiamos las descripciones
  consolog("-- borrar descripciones");
  jsonTransfers.forEach(function(itemData, index) {
    var cellDesc = document.getElementById('item' + index).cells[1];
    cellDesc.style.background = 'PapayaWhip';
    cellDesc.innerHTML = '--wait...';
  });

  var start = Date.now();
  consolog("0000", "-- pedir descripciones");
  $.each(jsonTransfers, function(index, value) {
    // cada promesa resuelve llamando al callback
    promesas.push(
      getDescripcion(index, value.currencyType).then((x) => {
        setDescription(x);
        consolog((Date.now() - start), JSON.stringify(x));
      })
    );
  });
  // cuando todas resuelven
  Promise.all(promesas).then(() => {
    // habilitamos el boton de pedir
    document.getElementById("dale").disabled = false;
    consolog(Date.now() - start, 'all done');
  });
});
td,
th {
  vertical-align: top;
  padding: 2px 5px 0 0;
}

.cdesc {
  min-width: 120px;
}

#logs {
  height: 240px;
  overflow-y: scroll;
  min-width: 50vw;
  background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <table id="transfers">
          <thead>
            <tr>
              <th>Currency</th>
              <th>Description</th>
            </tr>
          </thead>
        </table>
      </td>
      <td><button id="dale">Traer Descriptions</button>
        <PRE id="logs"></PRE>
      </td>
    </tr>
  </tbody>
</table>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.