遍历jQuery数组/将值输出到div

Question

I have a button that dynamically creates 2 inputs per click

Data of Input 1: string Data of Input 2: number (float) (0-100)

I am creating an array of each like this.

var recipe_flavour_name = $("input[name='flav-name']").map(function()  {return $(this).val();}).get();
var recipe_flavour_percent = $("input[name='flav-percent']").map(function(){return $(this).val();}).get();

As far as I can tell, the arrays are comma separated values.

Let's for simplicity's sake say:

recipe_flavour_name = a,b,c
recipe_flavour_percent = 5,6,7

I then want to take the number value to use in a function and then loop through all the values and use jQuery's .html() to add the values to a div .

I have tried this: flavPercent1 is just recipe_flavour_percent

var arrayLength = flavPercent1.Length;

for (var i = 0; i < arrayLength; i++) {
    var flavML = (flavPercent1[0] / 100 * 100 * 1000) / 1000;
    var flavGrams = (flavML * .98 * 100) / 100;
    var flavPercent = (flavML / 100 * 1E4) / 100;
    $('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');
};

But I only get flavGrams and flavPercent returned, dynamically adding more data to the array does nothing.

What do I want to achieve?

• Grab the values of specified inputs in an array.
• Pass them to a function.
• Loop through the values and output them in HTML using jQuery.

I hope that makes sense and thanks in advance.

Answer 1

Ok, so assuming that you don't have a problem getting the arrays you need, the problem lies within your for loop.

YOUR CODE:

for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');};

1. You put everything in the for loop, yet make no reference to the index. I'm assuming everywhere you put [0] you actually want [i]. This means that every time the index increases, you are getting the next array element.

   2. You should use .append instead of .html. .html means that the current html will be replaced by what you are adding.

   3. Finally, although making it dynamic is possible, I'm not sure that JQuery is the best libary to use in this case. I'd suggest taking a look at libraries such as Vue or MoonJs (both are very light and very simple libraries) etc... to find a much easier, and frankly better way to do this. They allow for dynamic rendering, and what you are trying to do becomes insanely simplified.

Hope this helps.

(hopefully) WORKING CODE:

 for (var i = 0; i < arrayLength; i++) {
    var flavML = (flavPercent1[i] / 100 * AMOUNT * 1000) / 1000;
    var flavGrams = (flavML * .98 * 100) / 100;
    var flavPercent = (flavML / AMOUNT * 1E4) / 100;
    $('.live-flavours').append('<tr>'+flavName[i]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[i]).toFixed(2)+'</td></tr>');};