Convert Array-String to Object with Javascript or jQuery

Question

I'm listing every DOM element's id on the page with:

 var listy = $("*[id]").map(function(){
    return this.id;
 }).get().join(',');

So, example output of listy would be:

"home,links,stuff,things"

Now I want to convert the listy Array to an Object, like:

function toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i)
        if (arr[i] !== undefined) rv[i] = arr[i];
    return rv;
}

But that wil put everything it in an Object like:

0: "h", 1: "o", 2: "m", etc...

What I obviously want is:

0: "home", 1: "links, 2: "stuff", etc..

Where am I going wrong, I got the toObject() from: Convert Array to Object

Which brings me to a similar, but different question:

Indexing page elements to JSON object? Or jQuery selector it every time?

Answer 1

Your listy is a string, not an array. Change your first block of code to this:

 listy = $("*[id]").map(function(){
    return this.id;
 }).get();

http://jsfiddle.net/P7YvU/

As for creating an object indexing the entire document: for what purpose? There is little advantage to doing this yourself when you can just parse the DOM directly -- especially since jQuery makes it so easy. Instead of calling DOMJSONTHING.body.div.h1 to get the value "home", you can already call $('document > body > div > h1').attr('id') and get the same result.

Answer 2

This is likely the shortest code you can write to get your object:

// your existing code (a tiny bit changed)
var idArray = $("*[id]").map(function() {
    return this.id;
}).get();

// this one liner does the trick
var obj = $.extend({}, idArray);

A better approach for your problem - associative array

But as I've read in your comments in other answers this object structure may not be best in your case. What you want is to check whether a particular ID already exists. This object

{
    0: "ID1",
    1: "otherID",
    ...
}

won't help too much. A better object would be your associative array object:

{
    ID1: true,
    otherID: true,
    ...
}

because that would make it simple to determine particular ID by simply checking using this condition in if statement:

if (existingIDs[searchedID]) ...

All IDs that don't exist would fail this condition and all that do exist will return true. But to convert your array of IDs to this object you should use this code:

// your existing code (a tiny bit changed)
var idArray = $("*[id]").map(function() {
    return this.id;
}).get();

// convert to associative "array"
var existingIDs = {};
$.each(idArray, function() { existingIDs[this] = true; });

or given the needed results you can optimise this a bit more:

var existingIDs = {};
$("*[id]").each(function() { existingIDs[this.id] = true; });

This will speed up your existing ID searching to the max. Checking ID uniqueness likely doesn't need hierarchical object structure as long as you can get the info about ID existence in O(1). Upper associative array object will give you this super fast possibility. And when you create a new object with a new ID, you can easily add it to existing associative array object by simply doing this:

existingIDs[newID] = true;

And that's it. The new ID will get cached along with others in the same associative array object.

Caution: I can see your code has implied global (listy variable). Beware and avoid if possible.

Performance testing

As @Blazemonger suggests this doesn't hold water I'd say that this claim may be true. It all boils down to:

• the number of elements with IDs you have
• number of searches you'd like to do

If the first one is normally low as in regular HTML pages where CSS classes are more frequently used than IDs and if the second one is large enough then this performance test proves that associative array can be a fair bit faster than using jQuery alone. HTML Used in this test is a copy of Stackoverflow's list of questions on the mobile site (so I had less work eliminating scripts from the source). I deliberately took an example of a real world site content than prepared test case which can be deliberately manufactured to favour one or the other solution.

If you're searching on a much smaller scale, than I using straight forwards jQuery would be faster because it doesn't require start-up associative array preparation and gets off searching right away.