[javascript] Can't access object property, even though it shows up in a console log

I struggled with this issue today, and thought I'll leave a reply with my solution.

I was fetching a data object via ajax, something like this: {"constants": {"value1":"x","value2":"y"},"i18n" {"data1":"x", "data2":"y"}}

Let's say this object is in a variable called data. Whenever I referenced data.i18n I got undefined.

  1. console.log(data) showed the object as expected
  2. console.log(Object.keys(data)) said ["constants","i18n"] as expected
  3. Renaming i18n to inter didn't change anything
  4. I even tried to switch the data to make "i18n" the first object
  5. Moved code around to make absolutely sure the object was completely set and there was no problem with the ajax promise.

Nothing helped... Then on the server side I wrote the data to the php log, and it revealed this:

{"constants": {"value1":"x","value2":"y"},"\u045618n" {"data1":"x", "data2":"y"}}

The "i" in the index key was actually a u0456 (cyrillic i). This was not visible in my php editor or the browser console log. Only the php log revealed this... That was a tricky one...