CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
sosoup
sosoup

Reputation: 11

Put every element from an array in a paragraph

I have a json with some elements and on branch I have an array named cars

    for(var i=0;i<itemsArray;i++)
    {    
       $('.red').append('<p class="col-xs-2 no-padding text-format">' + item[i].cars + '</p>');
    }

How the array looks: 

  "cars": ["dawdawd","wadwad","wadwad","wad"];

What I need is to put every element from this array on a paragraph like i'm using with append;

For example:

<p class="col-xs-2 no-padding text-format">dawdawd</p>
<p class="col-xs-2 no-padding text-format">wadwad</p>

EDIT:

Complete array:

 "description": "asdasd",
 "name": "geaaar",
 "shop": "http://google.com",
 "date": "2016-12-31T00:00:00.000Z",
 "cars": [
          "dawdawd",
          "wadwad",
          "wadwad",
          "wad"
        ],




  var itemsArray = data.data.my_Array.length; //length of the array

Upvotes: 1

Views: 663

Answers (4)

gforce301
gforce301

Reputation: 2984

Use join on the array.

var obj = {
  "description": "asdasd",
  "name": "geaaar",
  "shop": "http://google.com",
  "date": "2016-12-31T00:00:00.000Z",
  "cars": [
    "dawdawd",
    "wadwad",
    "wadwad",
    "wad"
  ]
};

$('.red').append(obj.cars.length ? '<p>' + obj.cars.join('</p><p>') + '</p>' : '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>

Upvotes: 0

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

var obj = {
  "description": "asdasd",
  "name": "geaaar",
  "shop": "http://google.com",
  "date": "2016-12-31T00:00:00.000Z",
  "cars": [
    "dawdawd",
    "wadwad",
    "wadwad",
    "wad"
  ]
};

var $container = $(".red");
obj.cars.forEach(function(car) {   // for each car in obj.cars array
  $container.append("<p>" + car + "</p>"); // add the car as a paragraph inside the div .red
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>

Upvotes: 0

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

You should use length property in order to iterate array items.

for(var i=0;i<itemsArray.length;i++)
                       ^^^^^^^^
{    
   $('.red').append('<p class="col-xs-2 no-padding text-format">' + itemsArray[i].cars + '</p>');
}

Also, you can use forEach method which accepts as paramaeter a callback function.

itemsArray.forEach(function(item){
    $('.red').append('<p class="col-xs-2 no-padding text-format">' + item.cars + '</p>');
});

Upvotes: 2

RemyaJ
RemyaJ

Reputation: 5526

Try 

var paras ='';
for(var i=0;i<itemsArray.length;i++) {
     paras += '<p>'+itemsArray[i]+'</p>';
}

After loop,

$('.red').html(paras);

Upvotes: 0

Related Questions