How to access individual values in JSON array?

How-to Discussions
1

I’ve got a JSON style array but I’m unable to access the individual elements. Any pointers what I’m doing wrong?

This was a test below:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var people = Observable(
			{name: "Jake", surname: "Thomas"},
			{name: "Julie", surname: "Jones"},
			{name: "Jim", surname: "Smith"}
			);

		people.add({name: "Hana", surname: "Honey"});
		people.add({name: "Darren", surname: "Hopkirk"});

		console.log(people[1].surname.value);

		module.exports = {
			people: people
		}
	</JavaScript>
	<StackPanel>
		<Each Items="{people}">
			<Text Value="{name}" /><Text Value="{surname}" />
		</Each>
	</StackPanel>
</App>

The console.log statement produces an error: Cannot read property 'surname' of undefined

I’ve also tried using people.indexOf(“Smith”) to find a particular item in array, and then deal with it, but I don’t seem to be able to get a result. indexOf just returns -1. indexOf works fine if I just use a straight array like this var colors = Observable(“Red”, “Green”, “Blue”); so I’m assuming it doesn’t work with nested structure?

Thanks in advance
Mark.

2

For the console.log issue: Observable doesn’t support array-style indexing + you have a .value where it’s not applicable (because the surname property is not an observable). console.log(people.getAt(1).surname) should do what you want.

The indexOf() issue: it will return an index if the object you pass to it exists in the observable list. However, you’re instead passing it a property value from one of those objects, so it doesn’t find it.
You might instead want to check out the observable operator where (but be aware that it returns an observable). It might also be that you want to use a normal JS dictionary for key/value storage instead of Observables?