Mobx: Observable array does not display correctly

javascript arrays mobx
dagatsoin picture dagatsoin · Mar 11, 2016 · Viewed 13.8k times · Source

I am trying to understand how to use observable array with Mobx.

I have a hard time to figure out why this:

let entities = observable([]);
entities[0] = "foo";
autorun(() =>{
  console.log(entities);
});

writes:

[$mobx: Object]
0: (...)
1: (...)
2: (...)
3: (...)
4: (...)
5: (...)
6: (...)
7: (...)
8: (...)
9: (...)
10: (...)
11: (...)
12: (...)
13: (...)
14: (...)
15: (...)
16: (...)
17: (...)
...
999: (...)

Instead of a classic array?

Answer

dagatsoin picture dagatsoin · Mar 11, 2016

Figure out!

As stated in the docs

Bear in mind that Array.isArray(observable([])) will yield false, so whenever you need to pass an observable array to an external library, it is a good idea to create a shallow copy before passing it to other libraries or built-in functions (which is good practice anyway) by using array.slice() or array.peek(). So Array.isArray(observable([]).slice()) will yield true.

The doc exemple show us a todos.filter() which could lead to confusion because todos looks like a real JS Array. But it is not.

So for my exemple to work I just have to console.log(entities.slice()) which will display a real JS array.

Related questions

How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More
For-each over an array in JavaScript

How can I loop through all the entries in an array using JavaScript? I thought it was something like this: forEach(instance in theArray) Where theArray is my array, but this seems to be incorrect.

Read More
Loop through an array in JavaScript

In Java you can use a for loop to traverse objects in an array as follows: String[] myStringArray = {"Hello", "World"}; for (String s : myStringArray) { // Do something } Can you do the same in JavaScript?

Read More