Separating a json that is in an Observables array, into separate entries in an array.

General
1

So, in my app I’m trying to show a users list of vehicles. I know how to show just the lists using in UX code, but in order for that to work, vehicles has to be an array so that it will display it’s entries. However, when I am taking a piece of my json and saving it into that observable, it is saving the entire json as an entry, instead of each key in that json as separate entries like I want.

Here is where I initially create said vehicle list after clicking on the user in the previous page.

var user = this.Parameter;
var vehicles = user.map(function(x) { return x.vehicles; });

and then I try to send it to the next page when I click on my vehicle list button here

function goToVehicles() {
	Backend.vehicles = vehicles;
	router.push("userVehicleList");
}

on the next page, in the exports i just have it as vehicles: Backend.vehicles.

The problem is that it wont display because in that observable it saves as this

[Viewport]: {"_origin":-17,"_subscribers":[{"version":2,"active":true}],"_isProxy":true,"_values":[{"\"1e6b6e7b-fbc2-4af1-9076-fc6d4298231c\"":{"comments":"","fuelType":"","id":"\"1e6b6e7b-fbc2-4af1-9076-fc6d4298231c\"","vmake":"Chevy","vmodel":"Suburban","vyear":"1989"},"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"":{"comments":"Red","fuelType":"Unl","id":"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"","vmake":"GM","vmodel":"5","vyear":"2014"},"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"":{"comments":":)","fuelType":"Woo","id":"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"","vmake":"Dodge","vmodel":"Durango","vyear":"2016"},"\"a13ce5c2-5015-4580-916d-b1736da62342\"":{"comments":"Soon to be Strong","fuelType":"Tannen","id":"\"a13ce5c2-5015-4580-916d-b1736da62342\"","vmake":"I","vmodel":"Love","vyear":"2010"},"\"c58ae8a3-7d6b-412f-bd2f-fe28ed9d08e9\"":{"comments":"","fuelType":"","id":"\"c58ae8a3-7d6b-412f-bd2f-fe28ed9d08e9\"","vmake":"Subaru","vmodel":"GM","vyear":"2010"}}],"_subscriptionWatchers":[{"watcherId":10}],"_beganSubscriptions":true}

note that it saved that chunk of json that has the list of vehicles as just one entry in the Observable Array, rather than each vehicle being separate entries. How do I separate them out? Does my question make sense?

2

It would be much easier to help if you supplied a complete, minimal reproduction that we could copy-paste and run.

Please take a look at inner() and toArray(), I suspect one of those will help.

3

I cant think of how either of those would work. You can download my project from github, it doesnt require sign in or anything this time and should do the api call correctly for ya. When you click on a user, then click on vehicle list, thats where Im hitting my problem.

4

That branch holds no code, perhaps you’ve forgotten to push your commits?

5

My apologies, its been updated

6

The root cause of the problem is that the data.vehicles you get from backend is not an array, but an Object.

First, solve that (minus means remove line, plus means add line):

in /Pages/Welcome.js
function getUsers() {
-            this.vehicles = data.vehicles;
+            this.vehicles = [];
+            var self = this;
+            if (data.vehicles !== undefined) {
+                var vkeys = Object.keys(data.vehicles);
+                vkeys.forEach(function(x) {
+                    self.vehicles.push(data.vehicles[x]);
+                });
+            }

And then, amend the userinfo page to respect the change. Note that .map() returns an Observable, so your local “vehicles” “list” still needs to be referred to by .value:

in /Pages/UserInfo.js
function goToVehicles() {
-	Backend.vehicles = vehicles;
+	Backend.vehicles.replaceAll(vehicles.value);

That solves the particular issue.

I would still suggest making a proper model and only pass around user id between pages, and have such methods on the model like getUserVehicles(id) etc.