Loop through jQuery arrays / Output values to a 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.

this questions will be easy to answer if there is a demo of the problem — brk
– brk, Commented May 24, 2018 at 15:22
I understand that but I have no demo, I can see what needs to be done, I just cannot for the life of me work out how to do it. — CodeX
– CodeX, Commented May 24, 2018 at 15:24

Yodamaul · Accepted Answer · 2018-05-24 15:42:48Z

2

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

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.
1. You should use .append instead of .html. .html means that the current html will be replaced by what you are adding.
2. 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>');};

edited May 24, 2018 at 15:42

answered May 24, 2018 at 15:33

Yodamaul

842 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeX Over a year ago

Incredible... I have spent too long in front of the screen again, coders blindness... Thanks so much for this, it was a simple fix that I overlooked, excellent work :)

CodeX Over a year ago

BTW the HTML is wrong too! Wow.. <tr>'+flavName doesnt have a closing </tr> or even a <td>..

CodeX Over a year ago

Using $('.live-flavours').closest( "tr" ).after( worked a treat here also

Collectives™ on Stack Overflow

Loop through jQuery arrays / Output values to a div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related