0

I have an AJAX script that receives a string from a mySQL query returned by PHP. This string is then parsed and put into an array in Jquery and the results are printed to the screen using .html()

The length of this array varies from 0 items to many, how would I count the items in the array then loop through and print them to the screen.

Here is my UPDATED code per the advice below, though I am still not sure if the for loop goes inside the .html() function or outside?

UPDATED CODE TO INCLUDE .each()

UPDATE 2: Replace (this) in the .html() function with the element I want the text written in and it is working partially, issue is now it is only printing the last item in the array?

UPDATE 3: Seems you can only have a single .html() function run, for instance if I add another .html() statement under the one that is returning the last item in my array it will only now echo on the screen the test value.

$("#n_detail").html(partsArray[index]+"<br />").addClass('jText').fadeTo(900,1);
$("#n_detail").html("Test").addClass('jText').fadeTo(900,1);    

It will only print "Test", not the last item in the array like it was previously?

<script type="text/javascript">
       $(document).ready(function() {
        $("#primary").change(function()
            {                                
             $.post("lib/ajax_load_job_detail.php",{ _primaryid_n:$(this).val() } ,function(data)
            {
            var string = data;
            var partsArray = string.split('|');
               $("#n_detail").fadeTo(200,0.1,function() //start fading the messagebox
               {
                 $.each(partsArray, function(index) {
                        $("#n_detail").html(partsArray[index]+"<br />").addClass('jText').fadeTo(900,1);
                    });     
                });
              });
            });
           });

Sample value of array partsArray[0]12/12/2005, partsArray[1]This is a sample note from December, etc...

4 Answers 4

2
partsArray.length

will give you the items in the array. You can loop either with

for(var i=0;i<partsArray.length;i++){

or using the jquery addon

$.forEach
1
  • It still wont return the values of the array to the screen, I think I setup the function correctly though I am not sure if I put the for loop inside or outside the .html function? Here is my code: var string = data; var partsArray = string.split('|'); $("#n_detail").fadeTo(200,0.1,function() { for(var i=0;i<partsArray.length;i++){ $(this).html(partsArray[i]+"br />").addClass('jText').fadeTo(900,1); } ........ Feb 7, 2012 at 16:13
1

If you are iterating through an array then you could use the jQuery function each().

Here's a link to the docs: http://api.jquery.com/jQuery.each/

Here's a sample from the docs using your array:

$.each(partsArray, function(index, value) { 
  alert(index + ': ' + value); 
});

EDIT - based on a comment the OP added to another answer, here's a better example using the OPs code:

$.each(partsArray, function(index, value) { 
  value.addClass('jText').fadeTo(900,1);
});

EDIT 2 - you need the part of the code that is per element of the arry inside the loop and based on your edits I think it should look like this:

$.each(partsArray, function(index) {
    $(this).append(partsArray[index]+"br />").addClass('jText').fadeTo(900,1);
}

Cheers,

James

4
  • thanks for the replies this has been helpful. Do I need the .html() function anywhere? I inserted your code in place of my code ` $(this).html(partsArray[]).addClass('jText').fadeTo(900,1);` Feb 7, 2012 at 16:39
  • Thanks just saw it, that is pretty much what I came up with after reading a little bit about .each. I've inserted your code and it makes perfect sense logically but when I run it, it will not write any info to the screen from the array. There are no errors from what I can see in Firebug. I will post my updated code above in the main post for you to see along with a sample value of the array. Feb 7, 2012 at 17:53
  • 1
    I think the solution is to change .html to .append - this might start to look funny when you first do it put you should get enough of an idea to complete your code. Here's a link to append in the jquery docs: api.jquery.com/append. I've updated my last edit code for you. JL Feb 7, 2012 at 18:28
  • James, Thanks again that did it! Took a little bit to figure out the DOM was just writing over what had been written there by the last array element... Thanks again for your time. Cheers! Feb 7, 2012 at 18:41
1

Here is a typical loop structure:

var partsArray = string.split('|');
for(var x=0;x<partsArray.length;x++) {
    //...your code ...
    //x is the index., so partsArray[x] is the current element
}
0

Use for ... in, it's significantly faster than jQuery's $.each method, and isn't much different - it provides you with the index of the item in i, rather than the value.

for (var i in partsArray)
{
    // You can access values via...
    console.log( partsArray[i] );

    // Alternatively, this will make it an exact clone of $.each
    var value = partsArray[i];
    console.log( value );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.