steve Kim steve Kim - 5 months ago 8
jQuery Question

JS object and array selection and manipulation

When I get ajax data, it is an array:

[
{"ID" :"1",
"Last":"SMITH",
},
{"ID" :"2",
"Last":"DOE",
},
]


I am trying to save it into another array variable so that more ajax data can be added for future usage:

var arr = [];
arr.push(ajax_data);


However, the ajax array is added into another array:

[
[
{"ID" :"1",
"Last":"SMITH",
},
{"ID" :"2",
"Last":"DOE",
},
]
]


So here are my questions:


  1. What do you guys suggest so that there is only one array with multiple ajax array addition? In other words, how I remove the extra
    []
    syntax?

  2. Each object will have multiple keys. I want to use "
    ID
    " as the primary key to find which object to work with. How do I search and select the correct object?



FOR INDEXING:

Below is a general array structure that I will be having which has
ID
and
post_id
as two keys, but can have other keys (values are copied and pasted for this demonstration). The number of objects can be up to 100.

This is ajax data and will be
concat
into an array.

enter image description here

As @jfriend00 pointed out, indexing it by ID can be inefficient. What would be a good way of indexing a large array by ID?

Answer

What do you guys suggest so that there is only one array with multiple ajax array addition? In other words, how I remove the extra [] syntax?

You need to use one of the methods that adds multiple elements to the array rather than adds the array itself (see options below).

To add onto an existing array, you can use .push() or .splice(). You can also use .concat(), but it returns a new array which you would have to assign back to the prior variable:

var arr = [];

var newData = [
  {"ID"  :"1",
   "Last":"SMITH",
  },
  {"ID"  :"2",
   "Last":"DOE",
  },
];

// add newData onto arr using .push()
arr.push.apply(arr, newData);

// add newData onto arr using .concat()
// remember that .concat() returns a new array
arr = arr.concat(newData);

Using .splice() is a bit more involved and you would probably only do this if you were trying to replace elements.

  // put first two `.splice()` arguments onto front of the array
  newData.unshift(arr.length, 0);
  arr.splice.apply(arr, newData);

Each object will have multiple keys. I want to use "ID" as the primary key to find which object to work with. How do I search and select the correct object?

If you want to be able to index by ID, then an array is not a very efficient structure. You would have to search every object in the array to find those with a matching ID. You could either create a separate index by ID or change the way you store your data. How exactly to change how you store your data depends upon how you need to access it, whether there are multiple objects with the same keys, whether objects have more than one key, etc... You'd have to specify a lot more detail on your needs for us to make a good recommendation.

For just 100 entries, you can easily do a brute force search:

function findById(array, id) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].ID === id) {
            return array[i];
        }
    }
    return null;
}

If you want to index them and all IDs are unique and order is not relevant, then instead of an array, just store in an object:

 var data = {};

 // add new data to our storage
 newData.forEach(function(item) {
     data[item.ID] = item;
 });

Then, to access by ID:

 var item = data[id];

In ES6 (or via transpiling or with a polyfill), you can also use a Map object.

 var data = new Map();

 // add new data to our storage
 newData.forEach(function(item) {
     data.set(item.ID, item);
 });

Then, to access by ID:

 var item = data.get(id);

An advantage of a Map object over using a regular JS object is that your id can be any data type (including another object). When using a plain JS object, it has to be coerced to a unique string.

Comments