json_encode is returning undefined from Javascript

Question

I have a php array that I json_encode and pass to a variable in a javascript function. Everything looks ok, and after Json encoding, the array looks like a valid Javascript array, but I keep getting undefined on output. Here's how the code looks like:

<script src="js/jquery-1.8.1.min.js"></script>
<script>
  $(function() {
    getPhotos();
  });

  function getPhotos() {
    var photosArray= <?php echo json_encode($photos_array); ?>;
    alert(photosArray.length);
}

And here is what it looks like in the browser:

function getPhotos() {
  var photosArray= {"12":"1401880321163321491.png","11":"1401880200994911748.jpg","10":"1401866598206920573.png","6":"1401863850983364637.png","7":"14018645731921210607.png","8":"14018646851258457972.png","9":"14018647281804140101.png","13":"1401880485229593545.png","15":"1401933387756388853.jpg","16":"14019688951333867090.jpg","17":"14021062501374960169.jpg","18":"14021064801222019341.jpg","19":"14021065441073158757.png","20":"14021066841708486619.png","21":"1402106744569372168.png","22":"14022970452004604041.jpg","23":"1402297585941206466.jpg"};
  alert(photosArray.length);
}

Am I doing anything wrong?

Brad · Answer 1 · 2014-06-17T02:40:30.797

1

Your array isn't getting used as an array, it's an object. Objects in JavaScript have no length property (unless of course you create one).

Whatever is creating your PHP array looks like it is using strings as indices. Make sure they are real integers instead. In PHP this is fine as PHP has the concept of an associative array. When encoded as JSON for use in JavaScript, this becomes an object literal.

To reiterate, you don't want this:

{"1":"1401880321163321491.png", // ...

You want this:

["1401880321163321491.png", // ...

That would only be possible if the array index in your PHP array were a number 1 and not a string "1". You might also be having a problem because your array is "sparse", which cannot be replicated with a normal array literal. You can't skip indices in an array literal.

edited Jun 17 '14 at 02:40

answered Jun 17 '14 at 02:35

Brad

159,648
54
349
530

those indices are actually the id's from the mysql database. – user3423909 Jun 17 '14 at 02:44
@user3423909 Well yes then you wouldn't want to use an array anyway! You absolutely must use an object in this case. Otherwise, how would you expect the keys to align? If you must count the number of key/value pairs in an object, consider using the `.size()` implementation in Underscore.js. http://underscorejs.org/#size – Brad Jun 17 '14 at 02:44
@user3423909 Now you say you need to loop through... please put these details in your question. Underscore.js also has a `.each()` method which works well. This can get quite complicated depending on the object, or it can be simple as a `for...in` loop. – Brad Jun 17 '14 at 02:46

score 0 · Accepted Answer · answered Jun 17 '14 at 02:35

0

That is a Javascript object, not an array, and as such it doesn't have a length property. It is also unordered.

Try alert(photosArray['11']) to see a result.

answered Jun 17 '14 at 02:35

Paul

139,544
27
275
264

those numbers are actually the id's for the photos in the mysql database. You showed me a way to get the value. Is there a way to cycle through the array and get the key? – user3423909 Jun 17 '14 at 02:41
@user3423909: [How do I enumerate the properties of a javascript object?](http://stackoverflow.com/q/85992/218196) – Felix Kling Jun 17 '14 at 02:45

json_encode is returning undefined from Javascript

2 Answers2