Develop Reference

For each object Javascript

hope all is fine for you
I'm a beginner in javascript and i'm trying to integrate a video customer review API on my website.
The integration is working on all my pages but on one product page i'd like to init the sdk for each videos id returned by the object to display all the video reviews of this product.
The sdk returned an object as below : enter image description here
And i have to display the sdk like that :
SDK.init(
{
type: "player",
args: {
key: playerKey,
id: videoId, // Id returned by the object on the screenshot
width: '100%',
height: "inherit",
},
},
videoPlayer //=> my div element
)
i tried the for each method, objects as below but nothing work for me, each time only 1 player is displaying.
Object.keys(videos).forEach(id => {
console.log(videos);
SDK.init(
{
type: "player",
args: {
key: playerKey,
id: videoId,
width: '100%',
height: "inherit",
},
},
videoPlayer
)
});
I have no archive what i tried before this but i'm a little bit lost
Have a nice day and thank you

The documentation indicates that one HTML element should be dedicated to one player. So you cannot put several players in one element.
You could create child elements inside your container element.
Assuming that videos is an array, like depicted in the screenshot:
videos = [
{ id: '....' },
{ id: '....' }
]
then do this:
for (let {id} of videos) {
console.log("video ID", id);
const wrapper = document.createElement("div");
videoPlayer.appendChild(wrapper);
SDK.init(
{
type: "player",
args: {
key: playerKey,
id,
/* any other properties you want to add here */
},
},
wrapper
);
}

I didn't try the SDK, but as #T.J. Crowder mentioned in the comment you probably need to create new <div> for every init call, something like this:
Object.keys(videos).forEach(id => {
console.log(videos);
const node = document.createElement("div");
node.style.width = '500px';
node.style.height = '500px';
videoPlayer.appendChild(node)
SDK.init({
type: "player",
args: {
key: playerKey,
id: videoId,
width: '100%',
height: "inherit",
},
}, node)
});

Access external js files on vue instance

I am developing a simple app, where i set a list of consts that i want to use in my development. so i created a file like this:
consts.js
export default {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
and i want to access the consts in a separate file on the vue instance:
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: 100
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
...
for example inside methods, how can i do it?
I already tried to import the file at the top before and after onload, but i always get this error: unexpected identifier, any way to solve this?
I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
Thank you

I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.
If that's the case, don't use import/export. Just:
consts.js:
const constants = {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10
}
Other file, provided you imported <script src="consts.js"></script> before, simply do:
// somewhere before: <script src="consts.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#appMonster',
data: {
startClicked: false,
monsterLife: {
width: '100%',
life: constants.MAX_HEALTH // <==== use constants.PROPNAME
},
youLife: {
width: '100%',
life: 100
}
},
methods: {
See plunker demo here.

Alasql is undefined

I can't seem to get the Alasql to become defined, i have installed it via node and I'm fairly certain that it is installed proplery however whenever i load my front end. i'm not 100% sure where it's going wrong, any help would be greatly appreciated!
require is not defined at Scope.$scope.exportData
$scope.exportData = function () {
var mystyle = {
sheetid: 'Account sheet',
headers: true,
caption: {
title:'My Big Table',
},
style:'background:#00FF00',
column: {
style:'font-size:30px'
},
columns: [
{columnid:'Date'},
{columnid:'Description'},
{columnid:'Due'},
{columnid:'Charged £'},
{columnid:'Received £'},
{columnid:'Balanced £'},
{
columnid:'name',
title: 'Number of letters in name',
width: '300px',
cell: {
value: function(value){return value.length}
}
},
],
row: {
style: function(sheet,row,rowidx){
return 'background:'+(rowidx%2?'red':'yellow');
}
},
rows: {
},
cells: {
2:{
2:{
}
}
}
};
$scope.exportData = function () {
var alasql = require('alasql');
alasql('SELECT * INTO XLS("report.xls",?) FROM ?',[mystyle,records]);
};

1 - From their own angularjs readme:
Please include the file normally and not via requireJS. Please include alasql before requireJS to avoid issue of "Mismatched anonymous define() module". This issue is with requireJS.
2 - I had "alasql is undefined" when using grunt to build my project. So I had to include alasql in my jshint file under "globals" section:
{
.
.
.
"globals": {
"angular": false,
"confirm": false,
"console": false,
"alert": false,
"alasql": false
}
}
PS: I recommend you exporting to ".xlsx" instead of ".xls". Microsoft is now refusing to open those files.

Passing API Key via Confluence HTML for Standard Reports

I have been able to get the Java API code to work for Iteration TreeGrid and Iteration Burndown / Release Burnup charts. We have been trying to get this to work on Confluence and there are issues trying to pass just iframes and IT has issues with some of the bypass options. We have been able to get some semblance of this to work via the script below. In fact the Iteration TreeGrid works successfully everytime but most times the Standard Reports just present the Rally login screen. This is not consistent and sometimes this works for me in Chrome, but not in Firefox/IE etc. We have attache the API to the path of the confluence page if entered via link as well as what's in the script. Is there another method for key to passed for Standard Report to be able to generate?
Thanks!
Mark
enter code here {html}
<script type="text/javascript">
var field = 'apiKey';
var url = window.location.href;
if(
(url.indexOf('?' + field + '=') != -1) ||
(url.indexOf('&' + field + '=') != -1)
){
//alert("**** 001");
} else {
var myURL = document.location;
if(window.location.href.indexOf('?') > 0){
document.location = myURL + "&apiKey=_1OS4fhAQBi101VTZ4PytkQXb9jYEt0qYx79WXJacc";
} else {
document.location = myURL + "?apiKey=_1OS4fhAQBi101VTZ4PytkQXb9jYEt0qYx79WXJacc";
}
}
</script>
<div id="div-iterationburndown"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "IterationBurndown",
iteration: "April",
subchart: "hide",
title: "Iteration Burndown"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186094804",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.get("div-iterationburndown")
});
Rally.launchApp('CustomApp', {
name: "iterationburndown",
parentRepos: ""
});
});
</script>
<div id="div-releaseburnup"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "ReleaseBurnup",
subchart: "hide",
title: "Release Burnup"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186094804",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.get("div-releaseburnup")
});
Rally.launchApp('CustomApp', {
name: "releaseburnup",
parentRepos: ""
});
});
</script>
<div id="div-RallyGrid" style="border-width:5px 5px 5px 5px;width:300px;height:150px;"></div>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Rally.data.wsapi.TreeStoreBuilder").build({
models: ["userstory"],
autoLoad: !0,
context: {
workspace: "https://rally1.rallydev.com/slm/webservice/v2.0/workspace/50876644101",
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/50891172431"
},
enableHierarchy: !0,
filters: [{
property: "Iteration.Name",
operator: "=",
value: "April"
}, {
property: "Project.Name",
operator: "=",
value: "Harrier"
}]
}).then({
success: function(store) {
Ext.create("Ext.Container", {
width: 1e3,
height: 1e3,
border: 5,
items: [{
xtype: "rallytreegrid",
columnCfgs: ["DisplayColor", "Name", "ScheduleState", "Blocked", "TaskEstimateTotal", "TaskRemainingTotal", "Owner", "Notes"],
store: store
}],
renderTo: Ext.get("div-RallyGrid")
})
}
});
Rally.launchApp('CustomApp', {
name: "RallyGrid",
parentRepos: ""
});
});
</script>
{html}

StandardReport component in AppSDK2 is a wrapper over the first generation analytics service that predates ApiKey. This is the same analytics service that brings you reports on Reports>Reports page. Those reports were also available via StandardReport component in AppSDK1.
ApiKey is not supported in the first generation charts.
AppSDK2 supports ApiKey as described in Embedding Apps guide. AppSDK2 apps can be authenticated with ApiKey. But if an AppSDK2 app is using a StandardReport component, the analytics service behind the report will prompt you to login - it does not work with ApiKey. In your scenario it unfortunately defeats the purpose of embedding the report within other web content to be viewed by stakeholders who may not necessarily have Rally credentials.
I suspect that if it seems that it works occasionally, it is probably because you are already logged in to Rally in another tab of the same browser window. If you open a new window in the incognito mode you will be prompted to login.

Good news! The StandardReport component in AppSDK 2.1 and the backing A1 Analytics service now fully support Api Keys so you should be able to do this fairly easily.
Some useful links:
StandardReport component: https://help.rallydev.com/apps/2.1/doc/#!/api/Rally.ui.report.StandardReport
Embedding Apps externally:
https://help.rallydev.com/apps/2.1/doc/#!/guide/embedding_apps

Trouble implementing NavigationView - Sc.View is not observable

When I try to push a view on the view stack of my NavigationView using
MyApp.getPath('mainPage.mainPane.content.nav').push(MyApp.MyView);
It gives me this:
Uncaught TypeError: Object function (props) {
this.__sc_super__ = ret.prototype;
return this._object_init(props);
} has no method 'get'
Obviously, SC.View is not KVO compliant. Then is it a bug in the SproutCore framework? Because they do this in the SC.NavigationView source:
view.get("topToolbar"); // with `view` being the view I passed in as shown above
MyApp.MyView looks like this:
MyApp.MyView = SC.View.extend({
childViews: 'search results'.w(),
search: SC.TextFieldView.design({
layout: { centerX: 0, top: 40, width: 400, height: 30 },
hint: "Search"
}),
results: SC.TemplateView.design({
templateName: 'results'
}),
topToolbar: SC.NavigationBarView.design({
childViews: ['title'],
layout: { height: 44 },
title: SC.LabelView.design({
controlSize: SC.LARGE_CONTROL_SIZE,
layout: { width: 100, height: 24, centerX: 0, centerY: 0 },
value: 'Title'
})
})
});
But I think the SproutCore developers are way smarter and more experienced than I am, so it's probably something I did.
Why doesn't my SC.View subclass have a get() method?

It looks like your view hasn't been created yet, so it's still a class rather than an instance. Classes don't have .get, only instances. If you're getting fancy (definitely encouraged :) ) with passing views around, rather than simply letting the childView hierarchy handle them, you have to create them as well. Try passing in MyApp.MyView.create() instead.