JSON returned from PHP is interpreted as Array instead of Object by Javascript

Question

PHP:

echo json_encode(array("apple", "banana"), JSON_FORCE_OBJECT);

AJAX (client side javascript with jQuery):

$.ajax({
  ...
  ...
  success: function (data) {
    console.log(data);       
    data1 = JSON.parse(data);
    console.log(data1["0"]);
  },
});

CONSOLE:

{"0":"apple", "1":"banana"}
apple

My Question:

If I replace console.log(data1["0"]) with console.log(data1.0) it doesn't pick up apple and I get an error missing ) after argument list. Why does only the array notation work, why doesn't the object notation work as well?

(I suspect it has something to do with the "pure array" -- i.e. not "associative array" -- nature of the original array that was encoded to JSON inside PHP. Is there a name for this kind of object literal that Javascript interprets as a pure array instead of an object?)

Lawrence Cherone · Accepted Answer · 2018-01-04T01:26:30.313

JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation.

The following explanation is directly taken from: https://developer.mozilla.org/en/US/docs/Web/JavaScript/Reference/Global_Objects/Array

Accessing array elements

JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1. Using an invalid index number returns undefined.

var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
console.log(arr[0]);              // logs 'this is the first element'
console.log(arr[1]);              // logs 'this is the second element'
console.log(arr[arr.length - 1]); // logs 'this is the last element'

Array elements are object properties in the same way that toString is a property, but trying to access an element of an array as follows throws a syntax error because the property name is not valid:

console.log(arr.0); // a syntax error

There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named '3d', it can only be referenced using bracket notation. E.g.:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // a syntax error
console.log(years[0]);  // works properly
renderer.3d.setTexture(model, 'character.png');     // a syntax error
renderer['3d'].setTexture(model, 'character.png');  // works properly

Note that in the 3d example, '3d' had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., years['2'] instead of years[2]), although it's not necessary. The 2 in years[2] is coerced into a string by the JavaScript engine through an implicit toString conversion. It is, for this reason, that '2' and '02' would refer to two different slots on the years object and the following example could be true:

console.log(years['2'] != years['02']);

Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['var']);

JSON returned from PHP is interpreted as Array instead of Object by Javascript

1 Answers1