JavaScript Append New Array at The Beginning HTML list

Question

I have an object like below:

var data = [
  {item_name: 'Book', stock: 15},
  {item_name: 'Pencil', stock: 15},
  {item_name: 'Paper', stock: 3}
];

And then i generate a list with HTML from the object:

console.log(data);
var html = '';
for (var i = 0; i < data.length; i++) {
    html += '<li class="list-group-item" id="listGroup">'+data[i].item_name+'<span class="badge">'+data[i].stock+'</span></li>';
}
$('#listItem').html(html);

If i add new object, how do i put the new object at the beginning of the list ?

You are looking for `data.unshift({item_name: 'Foo', stock: 1337})` — fafl, Jan 23 '17 at 13:49
`data.unshift(newData)` and using jQuery `$('#listItem').prepend('

Hikmat Sijapati · Answer 1 · 2017-01-23T13:58:00.020

1

try like this.The unshift() method adds new items to the beginning of an array.use forEach() for looping with array.

var data = [
  {item_name: 'Book', stock: 15},
  {item_name: 'Pencil', stock: 15},
  {item_name: 'Paper', stock: 3}
];
data.unshift( {item_name: 'new', stock: 10});
//console.log(data);
var html='';
data.forEach(function(element,index,array){
    html += '<li class="list-group-item" id="listGroup">'+data[index].item_name+'<span class="badge">'+data[index].stock+'</span></li>';
$('#listItem').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listItem">

</div>

JS FIDDLE https://jsfiddle.net/b1sf7a1d/

edited Jan 23 '17 at 13:58

answered Jan 23 '17 at 13:51

Hikmat Sijapati

6,869
1
9
19

You might forgot one of the requirements of the question _If i add new object, how do i put the new object at the beginning of the list ?_ – Dipiks Jan 23 '17 at 13:52
1

@GilleQ. That's what unshift does. – tymeJV Jan 23 '17 at 13:52
Maybe I have misunderstood, but I thought he wanted to append the newElement to his html list too – Dipiks Jan 23 '17 at 13:53
@@GilleQ. The unshift() method adds new items to the beginning of an array. – Hikmat Sijapati Jan 23 '17 at 13:54
Thanks for your response, but i want to append the new Element automatically if new array is inserted, and not add it directly – metaphor Jan 23 '17 at 13:59
@metaphor see answer ..this is what you want. – Hikmat Sijapati Jan 23 '17 at 13:59
@ tymeJV see answer.The unshift() method adds new items to the beginning of an array. – Hikmat Sijapati Jan 23 '17 at 14:00
@HikmatSijapati is it possible to `unshift` the array by updating `data`, without using `data.unshift( {item_name: 'new', stock: 10});`. So the `unshift()` method is called inside loop and unshift the new data in list. – metaphor Jan 23 '17 at 14:13

JavaScript Append New Array at The Beginning HTML list

1 Answers1