I’m creating a Node-Webkit application using Ember. It’s a fairly simple app so I’m not using Ember data, but instead just retrieving the data from the file system via Node, parsing it, then returning it to the page. The JSON is valid, Ember displays the correct object in console when I {{log person}} but the values aren’t there. I’ve tried changing key names just in case, but that didn’t work. Can anyone tell me what might be going wrong? Here’s the relevant snippets of code:
JSON
[
{
"first_name ": "Adam",
"last_name ": "Wilczek",
"department ": "Product"
},
{
"first_name ": "AJ",
"last_name ": "Nance",
"department ": "Sales"
},
{
"first_name ": "Alex",
"last_name ": "Ezell",
"department ": "Product"
},
{
"first_name ": "Andy",
"last_name ": "Matthews",
"department ": "Product"
},
{
"first_name ": "Anna",
"last_name ": "Talley",
"department ": "Services "
}
]
People Controller
App.PeopleController = Ember.ArrayController.extend({
content: [],
loadData: function(){
var controller = this;
utils.loadJSON(
function(data){
controller.set('content', data);
},
function(data) {
// TODO: handle error
}
);
}
});
loadJSON
publicMethods.loadJSON = function(success, failure) {
var fileToLoad = dataPath + '/people.json';
fs.readFile(fileToLoad, function(error, data){
if (error) {
failure(error);
} else {
var peeps = data.toString();
success(JSON.parse(peeps));
}
});
};
template
<script type="text/x-handlebars" data-template-name="people">
<h2>People route</h2>
<p>This is where we show the list of people</p>
{{#each person in controller}}
<p>
{{log person}}
first_name: {{person.first_name}}<br />
last_name: {{person.last_name}}<br />
department: {{person.department}}<br />
</p>
{{/each}}
</script>
Here’s a screenshot of the console with Ember versions and the output from the {{log person}} statement:
I’m at a loss for words. Can anyone offer input please?