Using indexOf on a Realtime Collaborative List

Question

I am trying to learning the Google Drive Realtime Api and have a question about the CollaborativeList. I am new to JavaScript.

var mylist = model.createList();
mylist.push("apple");
mylist.push("orange");
mylist.push("banana");
mylist.push("grape");

var result = mylist.indexOf("grape");

and the result is 3, which makes sense. Now, if I create a list that is made up of objects:

var mylist = model.createList();

var apple = {"color": "red","time": "0"};
mylist.push(apple);

var orange = {"color": "orange","time": "1"};
mylist.push(orange);

var banana = {"color": "yellow","time": "2"};
mylist.push(banana);

var grape = {"color": "purple","time": "3"};
mylist.push(grape);

var result = mylist.indexOf(grape);

Now the result is -1. There must be something I don't understand. What am I doing wrong?

Answer 1

The Collaborative List is not idential to Array#push. It copies and wrap the object, and doesn't refer to it by its reference.

When you use the the collaborative list .indexOf() like this mylist.indexOf(grape); you are trying to find an object with the same referece of grape, since none exists, it returns -1.

Example

In the example we push an object to a collaborative list, and to a JS array. We mutate the original object, and console.log() the item from the collaborative list, and from the array. As you can see the object from the collaborative list didn't change (a copy), while the one in the array did (a reference).

window.gapi.load('drive-realtime', start);

function start() {
  var doc = gapi.drive.realtime.newInMemoryDocument();

  var model = doc.getModel();

  var mylist = model.createList();
  var myArray = [];

  var apple = {
    "color": "red",
    "time": "0"
  };

  // push to Collaborative List
  mylist.push(apple);

  // puse to array
  myArray.push(apple);

  // mutate the original apple
  apple.color = 'green';
  
  console.log('origin: ', apple);

  console.log('Collaborative List: ', mylist.get(0));

  console.log('array: ', myArray[0]);
}

<script src="https://apis.google.com/js/api.js"></script>

Answer 2

Changing a Realtime Collaborative List

Thank you for the answers. To summarize:

It appears that indexOf is not useful for finding an object in a Realtime Collaborative List of objects. I needed to change one object in the list and thought indexOf would be a quick method. So it looks like I have to convert the Collaborative list to a javascript array, go through the array to find my object, get the index, and then change the object in the Collaborative list.

window.gapi.load('drive-realtime', startdemo);

function startdemo() {
var i;
var index;
/* Create an in memory document for testing. */
var doc = gapi.drive.realtime.newInMemoryDocument();

var model = doc.getModel();
var mylist = model.createList();

mylist.clear();

var apple = {"type": "apple","identifier": "100"};
mylist.push(apple);

var orange = {"type": "orange","identifier": "101"};
mylist.push(orange);

var banana = {"type": "banana","identifier": "102"};
mylist.push(banana);

var grape = {"type": "grape","identifier": "103"};
mylist.push(grape);

/* Convert the collaborative list to a javascript array. */
var myarray = mylist.asArray();

/* Show what is in the array */
for ( i = 0; i < myarray.length; i++ )
   {
   console.log("Original List, i = " +i +", type = " +myarray[i].type +", identifier = " +myarray[i].identifier);
   }

/* Find the index for our object. */
for ( i = 0; i < myarray.length; i++ )
   {
   if ( myarray[i].identifier === "103" )
      { 
      index = i;
      i = myarray.length;
      }
   }
console.log("index = " +index);

/* We will replace grape at identifier 103 with apricot. */
var apricot = {"type": "apricot","identifier": "103"};

mylist.set(index,apricot);

/* Get a new array to show the modification. */
myarray = mylist.asArray();

/* Now show what is in the list */
for ( i = 0; i < myarray.length; i++ )
   {
   console.log("Modified List, i = " +i +", type = " +myarray[i].type +", identifier = " +myarray[i].identifier);
   }
}

<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

Changing a Google Realtime Collaborative List

Thank you for the answers. To summarize:

It appears that indexOf is not useful for finding an object in a Realtime Collaborative List of objects. I needed to change one object in the list and thought indexOf would be a quick method. So it looks like I have to convert the Collaborative list to a javascript array, go through the array to find my object, get the index, and then change the object in the Collaborative list.

window.gapi.load('drive-realtime', startdemo);

function startdemo() {
var i;
var index;

/* Create an in memory document for testing. */
var doc = gapi.drive.realtime.newInMemoryDocument();

var model = doc.getModel();
var mylist = model.createList();

mylist.clear();

var apple = {"type": "apple","identifier": "100"};
mylist.push(apple);

var orange = {"type": "orange","identifier": "101"};
mylist.push(orange);

var banana = {"type": "banana","identifier": "102"};
mylist.push(banana);

var grape = {"type": "grape","identifier": "103"};
mylist.push(grape);

/* Convert the collaborative list to a javascript array. */
var myarray = mylist.asArray();

/* Show what is in the array */
for ( i = 0; i < myarray.length; i++ )
   {
   console.log("Original List, i = " +i +", type = " +myarray[i].type +",    identifier = " +myarray[i].identifier);
   }

/* Find the index for our object. */
for ( i = 0; i < myarray.length; i++ )
   {
   if ( myarray[i].identifier === "103" )
      { 
      index = i;
      i = myarray.length;
      }
   }
console.log("index = " +index);

/* We will replace grape at identifier 103 with apricot. */
var apricot = {"type": "apricot","identifier": "103"};

mylist.set(index,apricot);

/* Get a new array to show the modification. */
myarray = mylist.asArray();

/* Now show what is in the list */
for ( i = 0; i < myarray.length; i++ )
   {
   console.log("Modified List, i = " +i +", type = " +myarray[i].type +", identifier = " +myarray[i].identifier);
   }

}

<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>