Creating a json array and json items with jquery?

Question

I made a simple javascript class like this:

function Horse() {
    this.color = 'brown';
    this.speed = 'somewhat slow';
}

I attached a few instances to some elements, like this:

$("#horse1").data('d', new Horse());
$("#horse2").data('d', new Horse());
$("#horse3").data('d', new Horse());

now I want to create a JSON array with a JSON representation of each horse object. So I'm doing this:

// How do I create an empty JSON array here?:
var myJsonArray = ?;

var children = $("#horses").children();
for (var i = 0, m = children.size(); i < m; i++) {
    var panel = children[i];
    var horse = $(panel).data('h');

    // And how do I create a JSON rep of my horse here?
    var myJsonHorse = new JsonHorse(?);

    // Finally, how do I add it to the json array?
    myJsonArray.push(myJsonHorse);
}

yeah my end goal is to have a single json array of all the horses after iterating over all the children - not sure if this should be done in plain javascript or in jquery?

Thanks

---------------- Edit -------------------

Sorry, my end goal is to then convert the array to a string, so I have one large json array converted to a string that I can submit to an ajax call that will get processed by my server.

What are you doing with the object afterwards? A normal array seems to be appropriate here, so I'm not sure what you're after/what the end-game is. — Nick Craver
– Nick Craver, Commented Jun 16, 2010 at 0:19
Oh yeah I want to make it one long json string so I can use it in an ajax call, thanks. — user246114
– user246114, Commented Jun 16, 2010 at 3:44

Christian C. Salvadó · Accepted Answer · 2010-06-16 00:21:06Z

5

To declare an array you just need the Array Literal notation:

var myArray = [];

The push method will work without problems.

Another possibility is to use the $.map method:

var myArray = $("#horses").children().map(function (index, el) {
  return $(el).data('d');
}).get();
//  Will return an array containing:
//  [{"color":"brown","speed":"somewhat slow"},
//   {"color":"brown","speed":"somewhat slow"},
//   {"color":"brown","speed":"somewhat slow"}]

Check an example here.

Then to convert that array to a JSON string, you can use the JSON.stringify method (available natively on almost all browsers, for IE < 8 you can use json2.js).

answered Jun 16, 2010 at 0:21

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nick Craver Over a year ago

+1 - Not that it makes a huge difference, but $.data(el, 'd') would be a lot more efficient in this case, no need to create the jQuery wrappers unless you need to.

user246114 Over a year ago

That pretty much looks like what I need, but how do I make that array a string? I want to send it to a server-side script, and I hope to deserialize it server-side to operate on the individual horse objects there, thanks.

Christian C. Salvadó Over a year ago

@user246114: You need to use the JSON.stringify method to convert that array and the object elements it has to JSON, that method is natively available on all browsers except IE <= 7, you can add the json2.js library to your page to make it work on IE <= 7.

Collectives™ on Stack Overflow

Creating a json array and json items with jquery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related