setting data property of a jquery ajax method to contain a javascript object with an array property

Question

I'm having trouble setting the data property of a jquery ajax method to contain a javascript object that has a property called EngineSpecs.

I came up with something like this to test, but it's not working:

var myObject = new Object();
myObject.EngineSpecs = {};


var data = {
       myObject.EngineSpecs : [{
            EngineID: 100010017,
            Displacement: 7.2,
            Gas: false
            }, {
            EngineID: 300200223,
            Displacement:  3.2,
            Gas: true
       }]
};

$.ajax({
        url: someurl,
        dataType: "json",
        data: myObject

I keep getting an error like:

Message":"An error has occurred.","ExceptionMessage":"Cannot deserialize the current JSON object

Any help would be greatly appreciated!

Answer 1

You are attempting to use myObject.EngineSpecs as an object property name, which isn't allowed (because of the . in the middle). Do this instead:

var data = {
       myObject: {
            EngineSpecs : [{
              EngineID: 100010017,
              Displacement: 7.2,
              Gas: false
            }, {
              EngineID: 300200223,
              Displacement:  3.2,
              Gas: true
            }]
       }
};

or possibly what you really wanted was:

  var myObject = {
        EngineSpecs : [{
          EngineID: 100010017,
          Displacement: 7.2,
          Gas: false
        }, {
          EngineID: 300200223,
          Displacement:  3.2,
          Gas: true
        }]
   };

Answer 2

There are several problems with your code which seem to stem from lack of understanding of js objects and object properties. Understanding these will save you hours of headache later on.

First thing (a minor one) I would like to point out is mixing of your object declarations.

var myObject = new Object();
// is the equivalent of:
var myObject = {};

Similar with arrays:

var myArray = new Array();
//is the equivalent of:
var myArray = [];

It doesn't matter which pattern you choose to go with (js community prefers [] and {}), but be sure you are consistent with your approach.

Second, think about objects as associative arrays, ie list of key -> value pairs. These keys are referred to as object properties. So all objects should follow the following pattern:

// Note: each object property declaration is comma separated.
var myObject = {
  propertyString: 'this is a string',
  propertyAnotherString: 'this is another string',
  propertyMixedArray: ['item 1', 'item 2', 1, 2, {}],
  // Note above, we have different data types in the array:
  // two strings, two ints and one empty object.
  // This is completely legal in javascript.
  propertyObject: { someProperty: 'and so on...' }
};

// Adding additional properties is OK too.
// Note: this time we use '=' instead of ':' to assign value
myObject.additionalProperty = 'Additional property';

// prints 'this is a string'
console.log(myObject.propertyString);

// also prints 'this is a string'
// I'm treating object as an associative array or hashtable
console.log(myObject['propertyString']);

// also prints 'this is a string'
// we can use variables as well to dynamically access keys.
var keyFromVariable = 'propertyString';
console.log(myObject[keyFromVariable]);

// Couple of other examples.
console.log(myObject.propertyMixedArray[1]); // prints 'item 2'
console.log(myObject.propertyObject.someProperty); // prints 'and so on...'
console.log(myObject.additionalProperty); // prints 'Additional property'

This might be overwhelming initially, but you get used to it over time. It's important however to keep the ideas above in the back of your mind at all times while writing javascript code. Now that we know a little more about objects, we can rewrite your code in a following way:

var myObject = {
  EngineSpecs: [{
      EngineID: 100010017,
      Displacement: 7.2,
      Gas: false
      }, {
      EngineID: 300200223,
      Displacement:  3.2,
      Gas: true
  }]
};

$.ajax({
  url: 'http://www.someurlhere.com/api.json',
  dataType: "json",
  data: myObject
});

I hope this helps.