Outputting JSON data into props pulled from FireBase database - javascript

I am attempting to output a set of a data from a real-time database into html elements, I have no issues in taking the data from the server and using setState to save the data. I have a custom HTML object from a functional Component that will output props, but I am unable to map the object and the inner objects.
Here is the code responsible for pulling the data from the database:
componentDidMount() {
axios.get('./tasks.json')
.then(response => {
const fetchedTasks = [];
for (let key in response.data) {
fetchedTasks.push({
...response.data[key],
key: key
});
}
this.setState((prevState, props) => {
return {
taskList: fetchedTasks
}
} )
})
.catch(error => console.log(error));
}
And this is the data I am pulling from the database. I want to be able to display each item per it's name, id etc.
This is an export of the JSON data from the server, this is the copied into the state of my class component via the axios.get call 'Past.js'
{
"tasks" : {
"09182018" : {
"-LMgzJGM78f0BHbPf8cc" : {
"hours" : 0,
"id" : "2018-09-18T14:02:25.022Z",
"minutes" : 0,
"name" : "sadflkjdsalkf",
"seconds" : 2,
"start" : "2018-09-18T14:02:22.508Z"
},
"-LMgzaEYe0tcCjpxOuPU" : {
"hours" : 0,
"id" : "2018-09-18T14:03:38.635Z",
"minutes" : 0,
"name" : "safd",
"seconds" : 2,
"start" : "2018-09-18T14:03:36.353Z"
}
},
"09192018" : {
"-LMm7EoPnNdQLrZ5Rg62" : {
"hours" : 0,
"id" : "2018-09-19T13:59:31.361Z",
"minutes" : 0,
"name" : "sadf",
"seconds" : 2,
"start" : "2018-09-19T13:59:29.281Z",
"user" : "placeholder"
}
},
"09212018" : {
"-LMve6ihcRX_uZfvBcaC" : {
"hours" : 0,
"id" : "2018-09-21T10:24:06.504Z",
"minutes" : 0,
"name" : "sadfsd",
"seconds" : 2,
"start" : "2018-09-21T10:24:03.841Z",
"user" : "placeholder"
},
"-LMvnBBAWaHaBiGW5VMK" : {
"hours" : 0,
"id" : "2018-09-21T11:03:44.420Z",
"minutes" : 0,
"name" : "hello",
"seconds" : 14,
"start" : "2018-09-21T11:03:29.802Z",
"user" : "placeholder"
}
}
}
}
I have attempted to run .map() calls on the state with no luck, mapping the nested item throws 'array.map is not a function'. This is the code I have so far:
render() {
let outPutItems = [];
if (this.state.loading === false) {
outPutItems = this.state.taskList.map(array => array.map(item => {
<CompleteTask
id={item.id}
taskName={item.name}/>
})
)}
return (
<div className="Past">
<h1>Past Tasks</h1>
{outPutItems}
<button onClick={this.collectTasks}>Log the TaskList!</button>
</div>
);
}
-UPDATE
The top three are what I am able to use in react and the bottom is using dummy data and is my desired output from the JSON data above which has been applied to the state from the firebase server.
top output with map method, bottom using placeholder data from state
I am able to output the top three shown with this code, all other code above is the same:
{this.state.taskList.map((outer, index) => (
<CompleteTask
taskName={outer.key}
/>
) )
}


This should work for you. Taken from here. In addition, theres no need to check if loading == false before rendering a list. If there is nothing in the list to be rendered, nothing will render. Also, as soon as the list is populated it will reflect in the view.
return (
<div className="Past">
<h1>Past Tasks</h1>
{this.state.taskList.map((item, index) => (
<CompleteTask id={item.id} taskName={item.name}/>
)}
<button onClick={this.collectTasks}>Log the TaskList!</button>
</div>
);

Related

Little trouble customizing and saving Diagram Builder in AlloyUI 3.03

Can u help me customizing node and relative css of AllouUI DiagramBuilder ?
After a few attempts and thanks above all to the help of the previous posts on the same tool
AlloyUI (diagram-builder) extends
Add custom node to Alloyui DiagramBuilder in JAVA
How to add custom nodes and properties to AlloyUI diagram builder
I managed to create new custom nodes but CSS doesn't work as I expect:
If I modify the NAME attribute of the node, obtaining the application of the style defined by the CSS sheet (only the color at the moment) but I lose
enabling the Settings tab.
If I extend the css class diagram-node (.diagramnode;) with the desired background, the change is ignored.
JS:
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) {
//definizione del nuovo DropDown
Y.CustomDropDownCellEditor = Y.Component
.create({
NAME : 'CustomDropDownCellEditor',
EXTENDS : Y.DropDownCellEditor
});
//definizione del nuovo nodo
Y.DiagramNodeCustomWithDropDown = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customTaskWithDropDown'
},
currency : {
validator : Y.Lang.isValue
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
initializer : function() {
this.SERIALIZABLE_ATTRS
.push('choseOne');
},
//configura ed inserisce la dropDown
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this, arguments);
var values = new Y.CustomDropDownCellEditor(
{
options : {
dollar : 'Dollar',
euro : 'Euro',
yen : 'Yen',
gold : 'Gold'
}
});
model
.push({
name : 'Currency',
attributeName : 'currency',
editor : values
});
return model;
}
}
});
//definiziane del secondo nodo custom
Y.DiagramNodeCustomWithTwoMoreField = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customWithTwoMoreField'
},
price : {
validator : Y.Lang.isString,
value : 'A Custom default'
},
cost : {
validator : Y.Lang.isString,
value : 'A Custom default'
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this,
arguments);
model
.push({
attributeName : 'price',
name : 'Price'
});
model.push({
attributeName : 'cost',
name : 'Cost'
});
return model;
}
}
});
Y.DiagramBuilder.types['customTaskWithDropDown'] = Y.DiagramNodeCustomWithDropDown;
Y.DiagramBuilder.types['customWithTwoMoreField'] = Y.DiagramNodeCustomWithTwoMoreField;
//ORIGINALE
var availableFields = [
....., {
iconClass : 'diagram-node-task-icon',
label : 'Limited Chose',
type : 'customTaskWithDropDown'
}, {
iconClass : 'diagram-node-state-icon',
label : 'Description State',
type : 'customWithTwoMoreField'
} .....
];
new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'HellGate',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
}).render();
});
CSS:
.customdropdowncelleditor-hidden {
display: none;
}
.diagramnodecustomwithdropdown {
background-color: #00FFFF ;
}
.diagramnodecustomwithtwomorefield {
background-color: #FF0090 ;
}
How can I define two different styles for the DiagramNodeCustomWithDropDown and DiagramNodeCustomWithTwoMoreField nodes? I need to define background and border, nothing more for now.

To proceed further I am now trying to save the diagram on my database in json format (logically passing through a form and a servlet)
the obstacle in front of me is:
how do I save the result of the JS function on an hidden input:
Y.DiagramBuilder().toJSON() ??
perhaps it is useful to know that I am working in Liferay 7.1 ...
Here is my JSP page:
<div id="DiagramBuilderContainer">
<div id="DiagramBuilderBuilder"></div>
<div>
<portlet:actionURL var="editDiagramCampaign" name="editDiagramCampaign" >
<portlet:param name="mvcPath" value="/campaign-aui-diagramBuilder.jsp" />
<portlet:param name="redirect" value="<%=currentURL%>" />
<portlet:param name="campaignId" value="<%=String.valueOf(campaignId)%>" />
</portlet:actionURL>
<aui:form action="<%=editDiagramCampaign%>" method="post" name="saveDiagramForm">
<aui:model-context bean="<%=campaign%>" model="<%= Campaign.class %>" />
<aui:button-row>
<aui:input type="hidden" id="diagramBuilderHiddenJSON" name="diagramBuilderHiddenJSON" value="" />
<aui:button type="submit" id="saveDiagram" name="saveDiagram" value="Salva Diagramma"
onClick="updateDiagramBuilderHiddenJSON();" primary="true" />
</aui:button-row>
</aui:form>
</div>
</div>
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) { ( *read above if u need it*) });
</script>
UPDATE:
Here the solution:
var availableFields = [ {...}, {...}, {...}, {...}, {...} ];
/** RETRIVE SAVED JSON DIAGRAM OR CREATE NEW ONE **/
var diagramBuilderObj = null;
var _campaignDiagramJSON = JSON.parse( '<%=campaignDiagramJSON%>' ) ;
if ( _campaignDiagramJSON && _campaignDiagramJSON != "" ) {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : _campaignDiagramJSON.nodes,
srcNode : '#DiagramBuilderBuilder'
}) ;
diagramBuilderObj.render();
} else {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'Start Here',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
});
diagramBuilderObj.render();
}
/** SAVE MODIFIED JSON DIAGRAM TROUGH FORM **/
Y.one('#<portlet:namespace/>'+'saveDiagramButton').on('click', function() {
Y.one('#<portlet:namespace/>'+'diagramBuilderHiddenJSON').set('value', JSON.stringify( diagramBuilderObj.toJSON() ) );
});
NEW UPDATE:
Damn, it's not over yet...
and here I really ran out of ideas and can't find support elsewhere:
the conversion to json and the saving on db works but the recovery from json fails with the following error
TypeError: n.get(...) is undefined[Ulteriori informazioni] combo:15:2351
prepareTransition http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
forEach self-hosted:262
forEach jQuery
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
jQuery 7
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
each jQuery
forEach self-hosted:262
jQuery 2
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
syncUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
renderer http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11923
_defRenderFn http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11897
jQuery 3
render http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11881
<anonima> http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_redirect=http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=%2Fview_campaign_crud_mngToolbar.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_cur=1&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_delta=10&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_orderByCol=modifiedDate&p_p_auth=O2ifcGJf&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=/campaign-aui-diagramBuilder.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_campaignId=109&p_p_auth=O2ifcGJf line 355 > scriptElement:143
jQuery 34
The script of the diagram Builder is above, and then i leave a json for a nonsense diagram used for the test.
JSON:
{"nodes":[{"transitions":[{"source":"Tutto Comincia Qui","target":"fork1259","uid":"yui_patched_v3_18_1_2_1554213706673_1417","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1433","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[657.7999877929688,255.10000610351562],"p2":[988,344]}}],"description":"","name":"Tutto Comincia Qui","required":false,"type":"start","width":40,"height":40,"zIndex":100,"xy":[10,10]},{"transitions":[{"source":"fork1259","target":"condition1779","uid":"yui_patched_v3_18_1_2_1554213706673_1937","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1953","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1013,369],"p2":[898,482]}},{"source":"fork1259","target":"condition2254","uid":"yui_patched_v3_18_1_2_1554213706673_2412","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2428","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1038,344],"p2":[1220,377]}}],"description":"","name":"fork1259","required":false,"type":"fork","width":60,"height":60,"zIndex":100,"xy":[370.20001220703125,91.89999389648438]},{"transitions":[{"source":"condition1779","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_3313","sourceXY":[60,30],"targetXY":[27.199951171875,4.9000091552734375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3329","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[908,492],"p2":[1069.800048828125,621.0999755859375]}},{"source":"condition1779","target":"state3603","uid":"yui_patched_v3_18_1_2_1554213706673_3761","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3777","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[883,517],"p2":[874.7999877929688,679.0999755859375]}}],"description":"","name":"condition1779","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[240.20001220703125,239.89999389648438]},{"transitions":[{"source":"condition2254","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_2948","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2964","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1129.800048828125,621.0999755859375]}},{"source":"condition2254","target":"state4334","uid":"yui_patched_v3_18_1_2_1554213706673_4492","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector4508","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1302.800048828125,667.0999755859375]}}],"description":"","name":"condition2254","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[602.2000122070312,124.90000915527344]},{"transitions":[{"source":"customTaskWithDropDown2790","target":"customStateWithTwoMoreField7588","uid":"yui_patched_v3_18_1_2_1554213706673_7746","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7762","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1129.800048828125,681.0999755859375],"p2":[1130,788]}}],"description":"","name":"customTaskWithDropDown2790","required":false,"type":"customTaskWithDropDown","width":70,"height":70,"zIndex":100,"xy":[452.20001220703125,394.90000915527344]},{"transitions":[{"source":"state3603","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_7246","sourceXY":[37.20001220703125,20.899993896484375],"targetXY":[7.199951171875,45.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7262","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[887.7999877929688,692.0999755859375],"p2":[1069.800048828125,681.0999755859375]}}],"description":"","name":"state3603","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[240,452]},{"transitions":[{"source":"state4334","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_6965","sourceXY":[1.199951171875,18.899993896484375],"targetXY":[65.199951171875,34.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector6981","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1289.800048828125,682.0999755859375],"p2":[1129.800048828125,681.0999755859375]}}],"description":"","name":"state4334","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[672.2000122070312,440.90000915527344]},{"transitions":[{"source":"customStateWithTwoMoreField7588","target":"end8225","uid":"yui_patched_v3_18_1_2_1554213706673_8383","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector8399","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1113,801],"p2":[942,789]}}],"description":"","name":"customStateWithTwoMoreField7588","required":false,"type":"customStateWithTwoMoreField","width":40,"height":40,"zIndex":100,"xy":[495.20001220703125,560.8999938964844]},{"transitions":[],"description":"","name":"end8225","required":false,"type":"end","width":40,"height":40,"zIndex":100,"xy":[294.20001220703125,543.9000091552734]}]}
Is there anyone who can help me?
LAST UPDATE (SOLUTION):
I have published the solution in my comment HERE
Have a nice day!

Update collection using email inplace of _Id as the unique Id

I have 2 collection tables that only share emails as the unique ids of these 2 tables. The first one is Meteor.users() and SchoolStudents. I want to update the SchoolStudents collection based on the user's email. Though I have successfully updated using _id but the update isn't working using email as the Id. What's the better approach?
In this, it returned a success feedback but no update is made to the record. Bert.alert('Record updated successfully', 'success', 'growl-top-right');
Client code:
let user = Meteor.user();
let studentemail = user && user.emails && user.emails[0].address;
if (studentemail) {
console.log(studentemail);
Meteor.call('UpdateUser', studentemail, function (error, response) {
if (error) {
Bert.alert(error.reason, 'danger', 'growl-top-right');
return false;
} else {
Bert.alert('Record updated successfully', 'success', 'growl-top-right');
}
})
}
Server method
SchoolStudents.update({useremail: studentemail}, {$set: {'status.active': true, 'status.activedate': new Date()}});
This is a sample document from the SchoolStudents collection:
{
"_id" : "xgxZJFRkXGhHmHupY",
"firstname" : "Kehinde",
"lastname" : "Adeoya",
"middlename" : "Adekusibe",
"username" : "ken10ward",
"password" : "PvyLwY9d",
"useremail" : "kadeoya#appzonegroup.com",
"studentclass" : "ss8",
"dateofbirth" : "9-Mar-00",
"gender" : "f",
"ethinicity" : "black",
"mobile" : "8023472442",
"address" : "7 Abrahamoivc",
"city" : "bolson",
"lg" : "loveland",
"state" : "ekiti",
"country" : "Ukraine",
"registra" : "kadeoya",
"status" : {
"active" : false,
"activedate" : null
},
"userId" : "n5rqFSHbhm7zqADyB",
"createdAt" : ISODate("2017-09-05T18:45:14.877Z"),
"friendlySlugs" : {
"slug" : {
"base" : "kehinde-adeoya",
"index" : 5
}
},
"slug" : "kehinde-adeoya-5"
}
This is the server update code:
UpdateUser: function (studentemail) {
check(studentemail, String);
if (!Meteor.userId()) {
Meteor.Error('Not authorized');
return false;
} else {
SchoolStudents.update({useremail: studentemail}, {status: {active: true, activedate: new Date()}}, { upsert: true });
}
}

As it has been pointed to you, you're using user && user.emails && user.emails[0].address construct wrong way.
I suggest you to use this template to do things like that:
let studentemail;
try {
studentemail = user.emails[0].address.valueOf();
} catch (e) {
studentemail = null;
}
if (studentemail != null) {
...
}
This way you can omit numerous checks, like user != null and user.emails != null and user.emails.length > 0 etc and it will be guaranteed that in your studentemail variable you will get either null or user email address.
Added: User email address could be undefined, that's why you need != null check (non-strict). It will be false if variable is undefined or null.

Firebase update node instead of adding new one

This is currently how my firebase database looks.
I am trying to perform an update where when I click the like button, the user will appear in liked attribute (the second one above). currently it is just hardcoded but the code is not doing quite what i want it to do.
function liked(name, useruid, user_liked){
var postData = {
name: name,
useruid: useruid,
user_liked: user_liked
};
var newPostKey = firebase.database().ref().child('users').push().key;
var updates = {};
updates['/users/' + name + '/' + '/liked/' + user_liked] = postData;
return firebase.database().ref().update(updates);
}
I call this function with liked(current_user_name, user_array[i].useruid, 'Hannah')
I would like then the liked: "liked attribute to read liked: "liked", "Hannah"
However instead it does the following below:
It has added in information I do not want and instead of adding to the array it has transformed it. it must be a tiny change but i cant quite see it
exported json before update:
{
"users" : {
"rich" : {
"gender" : "male",
"liked" : "liked",
"name" : "rich",
"not_liked" : "liked",
"username" : "rich#rich.com",
"useruid" : "5xO85K2EBOS6Itj7lKoGafm19i02"
}
}
}
exported json after update:
{
"users" : {
"rich" : {
"gender" : "male",
"liked" : {
"Hannah" : {
"name" : "rich",
"user_liked" : "Hannah",
"useruid" : "5xO85K2EBOS6Itj7lKoGafm19i02"
}
},
"name" : "rich",
"not_liked" : "liked",
"username" : "rich#rich.com",
"useruid" : "5xO85K2EBOS6Itj7lKoGafm19i02"
}
}
}

How to get push id uniquely

I'm building a forum, and I'm in the step of views. I have this (simplified) code:
//Setting Views
//Adding Them..
$scope.views = $firebaseObject(refService.ref().child("Topics"))
refService.ref().child("Topics").once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
if(childData.DateCreated == $stateParams.DATE && childData.Email == $stateParams.EMAIL){
refService.ref().child("Topics").child(childData.pushKey).child("Views").child(currentAuth.uid).set({
Views : true
})
}
})
})
//Viewing them
$scope.viewableView = $firebaseObject(refService.ref().child("Topics"))
As you can see adding the views was pretty easy job. And I did it correctly. The problem is with displaying the number of views, and I have to do it using AngularFire's $firebaseObject, or $firebaseArray... Here is the structure in database:
{
"Topics" : {
"-KG9rDNLZksJDiLfAXwH" : {
"Avatar" : "http://cs624223.vk.me/v624223037/2b1bb/GRTKddkmXiw.jpg",
"DateCreated" : 1461544873669,
"Email" : "abogale2#gmail.com",
"Title" : "Check",
"UID" : "3caf2136-7a2d-4ae4-a4a9-119f2b08133c",
"Username" : "BruhBrhu",
"Value" : "Check",
"Views" : {
"3caf2136-7a2d-4ae4-a4a9-119f2b08133c" : {
"Views" : true
}
},
"pushKey" : "-KG9rDNLZksJDiLfAXwH"
}
},
"UserAuthInfo" : {
"3caf2136-7a2d-4ae4-a4a9-119f2b08133c" : {
"BronzeBadge" : 0,
"Description" : "Just a wierd 15 year old coder...",
"Email" : "abogale2#gmail.com",
"GoldBadge" : 0,
"Image" : "http://cs624223.vk.me/v624223037/2b1bb/GRTKddkmXiw.jpg",
"Moderator" : false,
"Password" : "KfUcQ1yedOi1gEnGP6i1KQ==",
"PlatinumBadge" : 0,
"SilverBadge" : 0,
"UID" : "3caf2136-7a2d-4ae4-a4a9-119f2b08133c",
"Username" : "BruhBrhu"
}
}
}
As you can see I used push(), to get the topic.. My Concern now is how to view the topics! Please Help! I can't think of a "algorithm" to do it!
Mind you, all of the topics have unique ID's. I have to get the specific ID The user is in.

This worked for me:
refService.ref().child("Topics").once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
if(childData.DateCreated == $stateParams.DATE && childData.Email == $stateParams.EMAIL){
refService.ref().child("Topics").child(childData.pushKey).child("Views").on("value", function(snapshot){
console.log(snapshot.numChildren())
$scope.countViews = snapshot.numChildren();
})
}
})
})
I dont know how but somehow $scope.countViews, became three way binded to my HTML, so it actually shows!

You're nesting keys inside an object, which the Firebase documentation explicitly recommends against.
But it can work once you realize that you can also add methods to the scope:
var app = angular.module('app', ['firebase']);
app.constant('FB_URL', 'https://yours.firebaseio.com/');
app.controller('MainCtrl', function(FB_URL, $scope, $firebaseArray, $firebaseObject) {
var ref = new Firebase(FB_URL);
$scope.topics = $firebaseArray(ref.child('Topics'));
$scope.getCount = function(obj) {
return Object.keys(obj).length;
};
});
And the view:
<body ng-controller='MainCtrl'>
<ol><li ng-repeat='topic in topics'>{{topic.Title}} - {{topic.Username}} - {{getCount(topic.Views)}}</li></ol>
</body>
Working jsbin: http://jsbin.com/dapoga/edit?html,js,output

Match ID with Array number and assign key knockout js

So I have an array called domains which returns a variation of data, among which is a category spanding from 0-12.
It looks something like:
domains: {
0 {
available : true
category : 0
}
1 {
available : true
category : 1
}
2 {
available : true
category : 2
}
3 {
available : true
category : 3
}
4 {
available : true
category : 4
}
}
Then I have the following keys:
categoryLabels {
0 : Professional
1 : Government
2 : Finance
3 : Business
4 : Colors
}
Now what I would like to do is to display the matchin category with the matching categoryLabel
I have tried this but it doesnt seem to work:
for (key in this.categoryLabels) {
var item = {
name: key, // Push the key on the array
value: this.categoryLabels[key] // Push the key's value on the array
};
return this.categoryName;
console.log(this.categoryName.value);
}
Does anyone have a solution ?

I tweaked your sample data assuming you are having a valid Data .
view:
<div data-bind="foreach:dom.domains">
<p> available</p> : <b data-bind="text:available"></b>
<p> category </p> : <b data-bind="text:ctgry.categoryLabels[category]">
</div>
code:
var dom = {
'domains': [{
'available': true,'category': 0}, {'available': true, 'category': 1 },{'available': true,'category': 2 },{ 'available': true,'category': 3},{'available': true, 'category': 4
}]
};
var ctgry = {
'categoryLabels': { 0: 'Professional',1: 'Government', 2: 'Finance',3: 'Business',4: 'Colors',
}
}
ko.applyBindings({ //pass your json data here
dom,
ctgry
});
sample fiddle up for grabs
PS: Instead of passing json data directly to ko,however you can have your viewModel created and store it in observable & bind to view.

Categories

Resources