KnockoutJS Appending To the Beginning of observableArray

Question

I have a ViewModel where I retrieve data from the server and that new data is concatenated with the data I already have. The problem is, the new data goes after the old data and I want it the other way around so the fresh data shows at the top of the view.

This is what I have:

self.serverData(self.serverData().concat(newData));

and the view is displayed as:

old data
old data
old data
new data

possible duplicate of [How can I add new array elements at the beginning of an array in JavaScript?](http://stackoverflow.com/questions/8073673/how-can-i-add-new-array-elements-at-the-beginning-of-an-array-in-javascript) — James Thorpe, Mar 20 '15 at 19:50
Treat the `observableArray` as a normal array. It has an [`unshift` method](http://knockoutjs.com/documentation/observableArrays.html#pop-push-shift-unshift-reverse-sort-splice) like a normal one, and will solve your problem. — James Thorpe, Mar 20 '15 at 19:52
@JamesThorpe not quite, since `self.serverData(self.serverData().unshift(newData));` does not work. (this is aimed at the duplicate suggestion) — user3704920, Mar 20 '15 at 19:52
@user3704920 Perhaps mention that in your question and explain why it doesn't work — James Thorpe, Mar 20 '15 at 19:53
@JamesThorpe `self.serverData(self.serverData().unshift(newData));` doesn't work, because well, it doesn't work, if I knew what was wrong with it I would fix it... — user3704920, Mar 20 '15 at 19:53
If you call it on the underlying array, knockout won't be aware of the changes — James Thorpe, Mar 20 '15 at 19:55
@JamesThorpe sorry, still doesn't work, says data inside the array is not defined, if I declare it like so: `elf.serverData(self.serverData.unshift(newData));` — user3704920, Mar 20 '15 at 19:56
That's because the return value of unshift is the modified array's length. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift — CrimsonChris, Mar 20 '15 at 19:57
@CrimsonChris very good, `self.serverData.unshift(newData)` does not work either, still says array data is not defined. — user3704920, Mar 20 '15 at 19:59

score 2 · Answer 1 · answered Mar 20 '15 at 19:57

2

Prepend observable arrays using the unshift function. It will modify the underlying array and tell the observable it was updated.

var x = ko.observableArray([1,2,3]);
x.unshift(0);
// x() returns [0,1,2,3]

answered Mar 20 '15 at 19:57

CrimsonChris

4,651
2
19
30

@chimsonchris I think the problem is that the first time around there is nothing set in the array and it is causing it to fail? – user3704920 Mar 20 '15 at 20:04
@user3704920 What do you initialise the observableArray with? – James Thorpe Mar 20 '15 at 20:06
@CrimsonChris it is empty until data comes from the server – user3704920 Mar 20 '15 at 20:07
@user3704920 empty as in `[]` or empty as in `null`? – James Thorpe Mar 20 '15 at 20:08
@CrimsonChris empty as in `self.serverData = ko.observableArray();` – user3704920 Mar 20 '15 at 20:09
@user3704920 Doesn't seem to matter actually, I just tested `ko.observableArray()`, `ko.observableArray(null)` and `ko.observableArray([])` - all of them unshifted a value in ok – James Thorpe Mar 20 '15 at 20:10
Make sure `serverData` is actually an observable array before trying to unshift. Use breakpoints. – CrimsonChris Mar 20 '15 at 22:51

score 0 · Answer 2 · answered Mar 30 '15 at 08:29

You can use unshift or splice

function viewModel() {
  var self = this;
  self.x = ko.observableArray([1, 2, 3]);
  self.x.unshift(0);
  
  self.y = ko.observableArray([1, 2, 3]);
  self.y.splice(0, 0, 0);
  
}
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: x">
  <span data-bind="text: $data">   </span>
</div>

yyyyyyy
<div data-bind="foreach: y">
  <span data-bind="text: $data">   </span>
</div>

KnockoutJS Appending To the Beginning of observableArray

2 Answers2