Correct render of js object with nodejs express - javascript

I have some structure that I want to render to my JADE page, so I decided to make JSON-like object to render some kind of data (variables, text, js objects), this JSON object looks like :
var dataSet1 = {
meta: {
"name": "Some text",
"minimum": mini_2,
"maximum": maxi_2,
"currentValue": last_data_2
},
data: {
"values": dataTwo,
"corridor": {
"x1": xc,
"x2": yc2,
"yw": yw2
}
}
};
My render line:
res.render('index', {
data_to_draw: JSON.stringify(dataSet1)
});
Then I`m using this rendered data on my JADE:
displayGraphExampleOne("#graph",
!{data_to_draw.data.values},
!{data_to_draw.meta.currentValue},
!{data_to_draw.meta.minimum},
!{data_to_draw.meta.maximum},
!{data_to_draw.meta.name},
!{data_to_draw.data.corridor.x1},
!{data_to_draw.data.corridor.x2},
!{data_to_draw.data.corridor.yw2});
Cannot read property 'values' of undefined
Im getting such type of error.
Im new with JS , so Im trying to decide what i`m doing wrong. If I will pass data not in js object - it works well, but i need such type of passing data.
thanx

Don't JSON.stringify the object, instead pass the object itself, otherwise you are trying to access the properties of a string, which obviously don't exist.

Just need to format code like this:
var dataSet1= [
{
"meta": {
"name": "Veocity variance",
"minimum": mini_1,
"maximum": maxi_1,
"currentValue": last_data_1
},
"data": {
"values": dataOne,
"corridor": {
"x1": xc,
"x2": yc1,
"yw": yw1
}
}
}
];
And use such call:
displayGraphExampleOne("#graph",
!{first_set}[0][0].data.values,
!{first_set}[0][0].meta.currentValue,
!{first_set}[0][0].meta.minimum,
!{first_set}[0][0].meta.maximum,
!{first_set}[0][0].meta.name,
!{first_set}[0][0].data.corridor.x1,
!{first_set}[0][0].data.corridor.x2,
!{first_set}[0][0].data.corridor.yw);
But not forget to render:
res.render('index', {
first_set: JSON.stringify([dataSet1, dataSet2, dataSet3]),
second_set: JSON.stringify([dataSet1, dataSet2, dataSet3]),
third_set: JSON.stringify([dataSet1, dataSet2, dataSet3])
});

Related

How to retrieve data from json file

I am having trouble with accessing my json file from my javascript file. I would like to change the object to a different text in my json file once a submit button is clicked on the webpage. I am aware that I would use ajax to achieve this goal, but I do not know how to access the json file.
This is the db.json file
{
{
"assets": [
{
"id": "0946",
"manufacturer": "SONY",
},
{
"id": "0949",
"manufacturer": "AUDIOTECNIA"
}
],
"transfers": [
{
"id": 1,
"status": "in-progress"
}
]
}
This is my Javascript file
$('form').on('submit', function(e){
e.preventDefault();
parsedData = JSON.parse(db.json);
console.log(parsedData[0].id)
//Changing Status
$.ajax({
type: "PATCH",
url: `http://localhost:3000/transfers/`
});
I've tried using parseData because I read that is how to retrieve the object, from the json file, but I do not believe I am writing it correctly. What documentation or steps would one recommend for solving this issue?
You have an extra comma after "in-progress",
const parsedData = JSON.parse(`{
"transfers": [ {
"id": 1,
"status": "in-progress"
}]
}`)
Then, to access id in parsedData:
console.log(parsedData.transfers[0].id)
You did not initialize the variable parsedData.
var parsedData = JSON.parse(db.json);

Datatable search in nested table

I'm using metronic v5.0.7.1 i have a datatable which is contains nested array so i just want to search in this array.
I'm able to bind my case status like that;
{
field: 'case.case_status',
title: "Status",
}
there is my search field;
var query = datatable.getDataSourceQuery();
$('#m_form_durum').on('change', function () {
datatable.search($(this).val(), 'case.case_status');
}).val(typeof query.case.case_status !== 'undefined' ? query.case.case_status : '');
After that im getting this error "Cannot read property 'case_status' of undefined". How can I specify the nested field in this case?
By the way if I replace my field to 'count' which is in my array instead of 'case.case_status' its work very well. Just nested fields give this error.
Also this is my sample data:
[
{
"id": 93,
"case": {
"id": 99,
"case_status": 1,
},
"user": "1",
"count": "2",
"created_at": "2018-02-08T09:00:00.884590+03:00",
"modified_at": "2018-02-08T09:00:00.884612+03:00",
"is_deleted": false,
}
]

d3pie error: no data supplied on d3pie.js

I am using rails, and gathering some data to make pie charts. I am just using ruby objects (so no JSON), and using d3pie. First, I make a helper function. Then I make a javascript function using that helper, and pass it in the dom. Here's my code;
helper.rb
def options_data_to_d3(options_data)
d3_data = []
options_data.each do |key, value|
d3_data.push( { label: key.option.as_json, value: value.as_json } )
end
return JSON.pretty_generate(d3_data)
end
this takes the ruby hash, and makes it into json
js function
function dataPieChart(id, data) {
var config = {
"header": {
"title": {
"text": "Quiz Questions",
"fontSize": 18,
"font": "verdana"
},
"size": {
"canvasHeight": 400,
"canvasWidth": 500
},
"data": {
"content": data
},
"labels": {
"outer": {
"pieDistance": 32
}
}
}
}
var pie = new d3pie(id, config);
}
passing into the view
<div id="quizQuestionOptionPie<%= question.id %>"></div>
<script type="text/javascript">dataPieChart("quizQuestionOptionPie<%= question.id %>", <%= raw options_data_to_d3(data[:options]) %>);
</script>
when I call a console log in the javascript function to see what data is, I get the correct output that both d3pie and d3 are looking for, yet I am still getting the error
d3pie error: no data supplied.
does anyone see something wrong with my code, or something I am missing? any help is appreciated.
You config option is bracketed incorrectly (everything is a child of "header"). You really meant:
var config = {
"header": {
"title": {
"text": "Quiz Questions",
"fontSize": 18,
"font": "verdana"
},
},
"size": {
"canvasHeight": 400,
"canvasWidth": 500
},
"data": {
"content": data
},
"labels": {
"outer": {
"pieDistance": 32
}
}
};

How to represent a tree of models with Ember Data?

I am looking for a way to generate a D3.js data structure from an Ember model, to convert my existing app to Ember. The goal is to display a tree of tasks, each task having 0 or more subtasks.
Here is the result I want to feed to D3.js :
[
{
"parent": 429,
"name": "Parent task 1",
"id": 428
"children": [
{
"parent": 428,
"name": "Sub task 1",
"id": 425
},
{
"parent": 428,
"name": "Sub task 2",
"id": 426
}
]
},
...
]
I tried to define my model like this :
Minp.Task = DS.Model.extend({
name: DS.attr(),
subtasks: DS.hasMany('task'),
data: Ember.computed(function () {
return {
id: this.get('id'),
name: this.get('name'),
type: 'task',
children: this.get('subtasks').map(function (task) {
return task.get('data');
})
};
}).property()
});
But I am getting a "Maximum call stack size exceeded" error. It seems that calling this from the data attributes causes it to be called again, in an infinite loop.
If i return an empty array for children, all works fine.
Do you have any idea why I am getting this ? Is it another way to do it ?
I think you're better off using associations, aren't you? Try using a self-referring data structure.
Minp.Task = DS.Model.extend({
parent: DS.belongsTo('task', inverse: 'children');
children: DS.hasMany('task', async: true, inverse: 'parent');
});
Hopefully that helps. Kind of depends what you want to do with these things, but that's what I generally use when I'm building tree-based data structures.
data is already a property on a DS.Model, and presumably it's getting invoked via the gets... which are now going into your redefinition of data, and causing your loop.

AngularJS - parsing JSON feed with namespace

New to angular, and it is awesome.
One thing I am having a brain fart on is parsing a JSON feed that contains namespaces:
Example from JSON feed:
"title": {
"label": "Fuse"
},
"im:name": {
"label": "John Doe"
},
"im:image": [ {
"label": "70x70",
"attributes": {
"height": "55"
}
}, {
"label": "80x80",
"attributes": {
"height": "60",
"im:link": "www.google.com"
}
}, {
"label": "90x90",
"attributes": {
"height": "170"m
"im:link": "www.yahoo.com"
}
}],
I can successfully parse items without namespaces fine like so:
<p ng-repeat="item in results.feed['entry']">
title: {{item.title['label']}}
</p>
But cannot get the items with namespaces to display using:
name: {{item.['im:name']['label']}}
OR
name: {{item.['im-name']['label']}}
OR
name: {{item.['im->name']['label']}}
Since being a newbie, I thought something like this would work:
<div xmlns:im="http://www.aol.com" id="im-app" im-app="im">
<p ng-repeat="item in results.feed['entry']">
…namespace code in here…
</p>
</div>
But that did not help.
Extra bonus question: What if a namespace contains attributes, that also contain namespaces?
Any help would greatly be appreciated.
Thanks!
Roc.
Although Craig answered the question,
This is also for reference for others:
If you want to target a specific key inside of an object set:
"im:image":[
{
"label":google",
"attributes":{
"height":"55"
}
},
{
"label":"yahoo",
"attributes":{
"height":"60"
}
},
{
"label":"aol",
"attributes":{
"height":"170"
}
}
{{item['im:image'][2]['label']}}
Will get the 3rd key in that set.
Thanks.
Get rid of the dot after item
Working example: http://jsfiddle.net/bonza_labs/Kc2uk/
You access the properties exactly the same way as straight javascript (because angular is basically eval()-ing the expression as javascript**). item.['foo'] is not valid javascript. You are correct in using square-bracket notation as my:name is not valid for dot-notation.
valid:
item.foo
item['foo']
with non-standard property names:
item['foo:bar']
item['foo-bar']
and in your case:
{{item['im:name']['label']}}
** or close enough for understanding this solution

Categories