wtmcm
wtmcm

Reputation: 415

Print array list values with loop to div dynamically

I have an array called desc that contains some text for each of it's values and change's length and values depending on what the user clicks on.

array:

desc[0] =  "manhole cover on foothpath on barrog gaa grounds kilbarrack road loose."
desc[1] =  "Footpath at driveway to 17 Maywood Lawn in bad state of disrepair."

I would like to display these array values in a div called #container. At the moment it just prints the last value of the array in #container rather that printing each of the the values in the list.

JavaScript:

 function incidentList(){
            for(var i=0; i<desc.length; ++i){
             $("#container").text(desc[i]);
        }
      }

Html:

<div id="container" style="width: 50%; height:97%; float:right;"></div> 

How should I go about printing the full list with each array value underneath the last using a loop?

Upvotes: 6

Views: 24416

Answers (6)

kayen
kayen

Reputation: 4868

Or simply:

$('#container').text(desc.join('\r\n'));

Upvotes: 1

AlvaroAV
AlvaroAV

Reputation: 10553

function incidentList(){
  var full_list = ""
  for(var i=0; i<desc.length; ++i){
      full_list = full_list + desc[i] + '<br>'
  }
  $("#container").text(full_list);     
}

Upvotes: 7

Anto Subash
Anto Subash

Reputation: 3215

try this

function incidentList(){
            for(var i=0; i<desc.length; ++i){
             $("#container").append(desc[i]);
        }
      }

the method .text() will replace the content of the div but .append() will append so you will have all the data displayed.

Upvotes: 0

Bobby5193
Bobby5193

Reputation: 1625

 function incidentList(){
        for(var i=0; i<desc.length; ++i){
         $("#container").append(desc[i] +"<br/>");
    }
  }

this should work

Upvotes: 0

Daniel Billingham
Daniel Billingham

Reputation: 1411

You need to use the jQuery .append method rather than .text

Upvotes: 0

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

function incidentList(){
   for(var i=0; i<desc.length; ++i){
       $("#container").text( $("#container").text() + desc[i] + '<br/>');
   }
}

Upvotes: 0

Related Questions