Json Returning [object object] instead of array - php

Question

I have json data being fed into a Sencha touch app. Here's the json:
http://pastie.org/2622260 - (modified for an example, of course)
When I return the "images" and console.log it, it returns the following:
images: "[object Object],[object Object],[object Object],[object Object],[object Object]"
Rather than the URLs.
My json encoder looks like this (I'm pulling the data out of a Wordpress site):
case 'posts':
foreach(get_posts('numberposts=50&category=') as $post) {
$count = 0;
$imgurl = array();
foreach( get_group('Photo', $post->ID) as $images){
$count++;
$imgurl[] = array(
'count'=>$count,
'imageurl'=>get('photo_image_file', $count, 1, false, $post->ID),
);
}
$json['posts'][] = array(
'id'=>$post->ID,
'title'=>$post->post_title,
'body'=>apply_filters('the_excerpt', $post->post_content),
'date'=>$post->post_date,
'user'=>get_userdata($post->post_author)->user_firstname,
'images'=>$imgurl
);
}
}
header('Content-type: application/json');
echo json_encode($json);
exit();
What I am looking for it to do is to return the array of image urls, rather than the [object object] that I am currently getting.
EDIT: Here is the sencha code I'm using to try to pull the imageurl out:
console.log(this.record.data);
console.log(this.record.data.images);
console.log(this.record.data.images.length);
var numberOfPages = this.record.data.images.length;
// Create pages for the carousel
var pages = [];
for (var i=0; i<numberOfPages; i++) {
pages.push(new Ext.Component({
id: 'page'+i,
cls: 'page',
tpl: '<tpl for=".">{imageurl}</tpl>',
//html:'test',
}));
}
// Create the carousel
this.carousel = new Ext.Carousel({
id: 'carousel',
title:'Gallery',
iconCls:'photos2',
defaults: {
cls: 'card'
},
items: pages,
});

Answer 1

Associative arrays in PHP encoded as JSON become objects in JavaScript when decoded. What you're seeing is correct and normal. Access them as you would any other object in JavaScript.

Answer 2

Update: Sorry, for the irrelevant example I had given
Where is your pages[i].update(this.record.data.images); ?
You can try the following -
var numberOfPages = this.record.data.length;
// Create pages for the carousel
var pages = [];
for (var i=0; i<numberOfPages; i++) {
var tmp = new Ext.Component({
id: 'page'+i,
cls: 'page',
tpl: '<tpl for=".">{imageurl}</tpl>'
});
tmp.update(this.record.data[i].images);
pages.push(tmp);
}

Answer 3

Found the answer, gave it to Rifat because his answer was the springboard.
I had the [object object]'s coming through as a literal string of characters. I wrote a quick test.php outside Sencha touch and was able to get the actual array to work. My first issue was the json itself - It needed to be validated. You guys were all correct and thank you for that clue.
Second, once I got the test.php document working, I realized it had to be within Sencha itself. The nagging feeling that the string of characters had something to do with it sat in my head. Finally, I went to my model and found how I was pulling the images:
{name: "images", type: "string"},
I saw string, and the aha moment hit! This fixed it and gave me my URL's:
{name: "images"},
Can't thank Ignacio and Rifat enough. You guys hung in there with me and got the answer to (eventually) appear. Thanks again, and hope this helps anyone else that may run into a similar issue.

Answer 4

I had a similar issue once, in the javascript backend. Here is an answer for people using JS:
Make sure to stringify your object arrays before sending them:
JSON.stringify(array[i]);
Unless ofcourse you are ONLY sending JSON, which in that case sending regular JSON should work fine :)