Array becomes Object in Vue

LRMiloef · Feb 2nd 2018

Hey,

i have a question about a behavior that i don't understand.

In my ModelTrait i have an method defined that delivers products grouped by product category. i did it like that:

Code

public static function getEnabledProductsByCategory()
{
/** @var Product $products */
$products = self::query()->where('status = ?', [ Product::STATUS_ENABLED])->related('productCategory')->get();
$result = null;
foreach ($products as $product) {
$result[$product->productCategory->id] = get_object_vars($product->productCategory);
$result[$product->productCategory->id]['products'][] = $product;
}
return $result;
}
}

Display More

The type of the returning variable is an array.

In the Controller that renders my page i called it like this:

Code

public function placeBookingAction()
{
$productsByCategory = Product::getEnabledProductsByCategory();
/... other stuff (not necessary for this example)
return [
'$view' => [
'title' => "Sample",
'name' => 'lrmedien/extbooking:views/frontend/booking.php'
],
'$data' => compact('productsByCategory', .... (other stuff) )
];
}

Display More

When i take a look at the vue dev tools, productsByCategory is an Object now. I really don't know why. Where is the trick to works with the original array?

I hope somebody can help me...

SPQRInc · Feb 2nd 2018

Hm. I'm not a vue-expert. But just to test things: What happens if you do this in your controller:

Code

public function placeBookingAction()
{
$productsByCategory = ['foo' => 'bar', 'hello' => 'world'];
/... other stuff (not necessary for this example)
return [
'$view' => [
'title' => "Sample",
'name' => 'lrmedien/extbooking:views/frontend/booking.php'
],
'$data' => compact('productsByCategory', .... (other stuff) )
];
}

Display More

LRMiloef · Feb 3rd 2018

Then i'll also get an object.

SPQRInc · Feb 3rd 2018

Just to be sure that the dev tools are working correct: What happens if you add this to your view:

{{productByCategory|json}}

LRMiloef · Feb 3rd 2018

Then i also will see an object.

SPQRInc · Feb 5th 2018

Hmm.. That's strange. I will have a look at it later, because I can not explain that without having tested it. If you var_dump the php-variable you are getting an array, right?

zombielab · Feb 5th 2018

Just use the following in your method.

Code

public static function getEnabledProductsByCategory() {
// your code
return array_values($result);
}

In your case you must reset the keys before, or else you'll get an object instead of an array when the json encoding happens.

LRMiloef · Feb 6th 2018

Thank's for your help, that worked for me

Array becomes Object in Vue

Share

Tags