Develop Reference

How to use a variable with string targeting an object inside an object and add new object?

How to use the variable presentationtitle as key in my else condition within the object given its a string?
I tried if (typeof data.presentations.'(presentationtitle)'
let presentationtitle = 'Test presentation 123'
let variable = {
presentations: {
[presentationtitle] : {
duration: '00:00:00',
}
},
};
chrome.storage.sync.get('presentations', function(data) {
if (typeof data.presentations === 'undefined') {
// if not set then set it
let extensionsettings = {
presentations: {
[presentationtitle] : {
}
},
general: {
setting1: true,
setting2: false
},
};
chrome.storage.sync.set(extensionsettings, () => {
});
}
else {
chrome.storage.sync.get('presentations', function(data) {
if (typeof data.presentations.'(presentationtitle)' === 'undefined') {
// if not set then set it
let presentationtitlesave = {
presentations: {
[presentationtitle] : {
duration: '00:00:00',
}
},
};
chrome.storage.sync.set(presentationtitlesave, () => {
});
}
});
}
Basically I first save an object for extensionsettings (for first time use of the extension opening the popup) and thereafter I want to add presentationtitles into it if they are not present yet (which I extract them from DOM HTML).

WebComponents - Attribute Changed

From the link qr-code.js I have the code below.
Then I don't understand, on the highlighted line (60), what means the suffix: "Changed"?
attributeChangedCallback: {
value: function (attrName, oldVal, newVal) {
var fn = this[attrName+'Changed'];
if (fn && typeof fn === 'function') {
fn.call(this, oldVal, newVal);
}
this.generate();
}
Also I don't understand the usage of:
this[attrName+'Changed']
Could you explain me this?, I don't find any clear explanation about this on Google. Thanks.
Below is the full code:
'use strict';
(function(definition) {
if (typeof define === 'function' && define.amd) {
define(['QRCode'], definition);
} else if (typeof module === 'object' && module.exports) {
var QRCode = require('qrjs');
module.exports = definition(QRCode);
} else {
definition(window.QRCode);
}
})(function(QRCode) {
//
// Prototype
//
var proto = Object.create(HTMLElement.prototype, {
//
// Attributes
//
attrs: {
value: {
data: null,
format: 'png',
modulesize: 5,
margin: 4
}
},
defineAttributes: {
value: function () {
var attrs = Object.keys(this.attrs),
attr;
for (var i=0; i<attrs.length; i++) {
attr = attrs[i];
(function (attr) {
Object.defineProperty(this, attr, {
get: function () {
var value = this.getAttribute(attr);
return value === null ? this.attrs[attr] : value;
},
set: function (value) {
this.setAttribute(attr, value);
}
});
}.bind(this))(attr);
}
}
},
//
// LifeCycle Callbacks
//
createdCallback: {
value: function () {
this.createShadowRoot();
this.defineAttributes();
this.generate();
}
},
attributeChangedCallback: {
value: function (attrName, oldVal, newVal) {
var fn = this[attrName+'Changed'];
if (fn && typeof fn === 'function') {
fn.call(this, oldVal, newVal);
}
this.generate();
}
},
//
// Methods
//
getOptions: {
value: function () {
var modulesize = this.modulesize,
margin = this.margin;
return {
modulesize: modulesize !== null ? parseInt(modulesize) : modulesize,
margin: margin !== null ? parseInt(margin) : margin
};
}
},
generate: {
value: function () {
if (this.data !== null) {
if (this.format === 'png') {
this.generatePNG();
}
else if (this.format === 'html') {
this.generateHTML();
}
else if (this.format === 'svg') {
this.generateSVG();
}
else {
this.shadowRoot.innerHTML = '<div>qr-code: '+ this.format +' not supported!</div>'
}
}
else {
this.shadowRoot.innerHTML = '<div>qr-code: no data!</div>'
}
}
},
generatePNG: {
value: function () {
try {
var img = document.createElement('img');
img.src = QRCode.generatePNG(this.data, this.getOptions());
this.clear();
this.shadowRoot.appendChild(img);
}
catch (e) {
this.shadowRoot.innerHTML = '<div>qr-code: no canvas support!</div>'
}
}
},
generateHTML: {
value: function () {
var div = QRCode.generateHTML(this.data, this.getOptions());
this.clear();
this.shadowRoot.appendChild(div);
}
},
generateSVG: {
value: function () {
var div = QRCode.generateSVG(this.data, this.getOptions());
this.clear();
this.shadowRoot.appendChild(div);
}
},
clear: {
value: function () {
while (this.shadowRoot.lastChild) {
this.shadowRoot.removeChild(this.shadowRoot.lastChild);
}
}
}
});
//
// Register
//
document.registerElement('qr-code', {
prototype: proto
});
});

As #Jhecht suggested, it's a combination of the name of a attribute and the suffix "Changed" in order to create generic method names.
For example if the <qr-code> element has an attribute "foo" that is added, updated or removed, then the callback will define the fn variable to this["fooChanged"], which is equivalent to this.fooChanged.
If this method exists, it will be invoked by fn.call().
However I see nowhere in the code you posted such method signature attached to the custom element prototype, so it's useless code until further notice.

Set empty object while setting property on nested object and return the empty object

I have json object which i need to set/override some properties.
This part is done (i too the solution from this answer)
My problem now is handle the case the path to change is not given (or empty.)In this case it shoudl just return an empty Obj which i could then handle and return an error message.
var obj = { "users": {
"profile": {
"name": "markus",
"age": 28
}
}
}
var changes = [
{
path: ['users', 'profile', 'name'],
changes: "Nino"
},
{
path: [],
changes: "fail"
}
];
// Func to set new values
function set(jsonObj, path, value, updatedJson) {
if(path.length === 0 || value.length === 0) {
updatedJson = {};
return updatedJson;
}
if(path.length === 1){
updatedJson[path] = value;
} else {
for(var i = 0; i < path.length-1; i++) {
var elem = path[i];
if( !updatedJson[elem] ) {
updatedJson[elem] = {}
}
updatedJson = updatedJson[elem];
}
updatedJson[path[path.length-1]] = value;
}
return updatedJson;
}
var updatedJson = Object.assign(obj);
changes.forEach( function(changeObj){
var path = changeObj.path;
set(obj, path, changeObj.changes, updatedJson);
});
// handle empty object case
if(Object.keys(updatedJson).length === 0 && obj.constructor === Object){
callback({
success: false,
message: 'File not updated. One or more property are incorrect.'
})
} else {
callback({
success: updatedJson,
message: 'File was succefully updated'
})
}
Changes[0] pass and set new value to the obj.
Changes[1] should instead set updatedJson to empty one, which it does but when i check if Object is empty, updatedJson is full again.
Can someone explain me why is this happening?
And how can i handle error like empty path to object's value?

Try this:
var obj = { "users": {
"profile": {
"name": "markus",
"age": 28
}
}
}
var changes = [
{
path: ['users', 'profile', 'name'],
changes: "Nino"
},
{
path: [],
changes: "fail"
}
];
// Func to set new values
function set(jsonObj, path, value, updatedJson) {
if(path.length === 0 || value.length === 0) {
updatedJson = {};
return updatedJson;
}
if(path.length === 1){
updatedJson[path] = value;
} else {
for(var i = 0; i < path.length-1; i++) {
var elem = path[i];
if( !updatedJson[elem] ) {
updatedJson[elem] = {}
}
updatedJson = updatedJson[elem];
}
updatedJson[path[path.length-1]] = value;
}
return updatedJson;
}
var success = true;
var updatedJson = Object.assign(obj);
changes.forEach( function(changeObj){
var path = changeObj.path;
var result = set(obj, path, changeObj.changes, updatedJson);
if(Object.keys(result).length === 0 && result.constructor === Object)
success = false;
});
// handle empty object case
if(!success){
callback({
success: false,
message: 'File not updated. One or more property are incorrect.'
})
} else {
callback({
success: updatedJson,
message: 'File was succefully updated'
})
}

printing all records using only one alert

I have the following code with the JSFiddle for the same here:
var result = [
{"Id": 10004, "PageName": "club"},
{"Id": 10040, "PageName": "qaz"},
{"Id": 10059, "PageName": "jjjjjjj"}
];
$.each(result, function(i, item) {
alert(result[i].PageName);
});
In order to see all the results, I have to click Ok in alert window two times. How can I display the contents using one alert only?
//f1.js ---
var PatientReviewPage = (function () {
var cls = function () { }
var self = cls.prototype;
self.urlKey = "showmrn";
self.getData = function (mrn_) {
/*
if (isEmpty(mrn_)) { alert("Invalid mrn in getData()"); return false; }
// Lookup the AJAX web service URL
var url = regman.getWebServiceURL(self.urlKey);
if (isEmpty(url)) { alert("Invalid URL in getData()"); return false; }
var ajaxRequest = jQuery.ajax({
//beforeSend: TODO: show spinner!
data: {
registry_id: regman.registry.id,
mrn: mrn_
},
dataType: "json",
method: "GET",
url: url
})*/
//Some code related to ajax reques
this.done(function (data_, textStatus_, jqXHR_) {
// Validate the web service and retrieve the status.
if (typeof (data_) === "undefined" || data_ === null) {
alert("Invalid data returned from web service");
return false;
}
if (isEmpty(data_.webservice_status) || isEmpty(data_.webservice_status.status)) {
alert("Invalid web service status");
return false;
}
if (data_.webservice_status.status != "SUCCESS") {
alert(data_.webservice_status.message);
return false;
}
self.processdataDocuments(data_.data_document_list);
});
this.fail(function (jqXHR_, textStatus_, errorThrown_) {
alert("Error in getData(): " + errorThrown_);
return false;
});
};
// Initialize the page
self.initialize = function () {
var mrn = regman.selectedData["mrn"];
if (isEmpty(mrn)) {
alert("Invalid MRN provided by calling page");
return false;
}
self.getData(mrn);
};
self.processdataDocuments = function (collection_) {
if (isEmpty(collection_) || collection_.length < 1) {
// Populate the count and exit
jQuery("#nlpDocumentCount").html("(0)");
return true;
}
var source =
{
localdata: collection_,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$("#nlpDocumentPanel").jqxGrid(
{
source: dataAdapter,
width: '1000',
height: 150,
columns: [
{
text: 'Type', datafield: 'nc_type'
},
{
text: 'SubType', datafield: 'nc_subtype'
},
{
text: 'Concept', datafield: 'concept_text'
},
{
text: 'Date', datafield: 'nc_dos'
}
]
});
// For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
// http://www.jqwidgets.com/getting-the-clicked-grid-row/
$("#nlpDocumentPanel").on('rowclick', function (event) {
var row = event.args.rowindex;
var datarow = $("#nlpDocumentPanel").jqxGrid('getrowdata', row);
response = JSON.stringify(datarow, null, 10)
//alert(jsonStringify); // This alert displays the JSON data in a formatted manner
var obj = jQuery.parseJSON(response);
//alert("display Subtype "+obj.nc_subtype) // Works fine
self.mySubtype = obj.nc_subtype;
});
};
//I added this line for the demo to show 'f2' accessing this property from 'f1'. You should remove it if copying this code into your application
self.mySubtype = "Foo";
return cls;
})();
var f1 = new PatientReviewPage();
//f2.js ---
var DocumentDetailsDialog = (function () {
var cls = function () { }
var self = cls.prototype;
alert(f1.mySubtype);
/*this.getData = function (IDNumber_) {
// some code will be here
var ajaxRequest = jQuery.ajax({
// some code will be here
})
.done(function (data_, textStatus_, jqXHR_) {
// some code will be here
})
.fail(function (jqXHR_, textStatus_, errorThrown_) {
// some code will be here
});
};*/
return cls;
})();
var f2 = new DocumentDetailsDialog();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use map() and join() and return string with page names.
var result = [
{"Id": 10004, "PageName": "club"},
{"Id": 10040, "PageName": "qaz"},
{"Id": 10059, "PageName": "jjjjjjj"}
];
var r = result.map(function(e) {
return e.PageName;
}).join(' ');
alert(r);

Build a string with the results and alert the string:
alert(result.map( _ => _.PageName).join(', '))

While trying to download a page, why doesn't this code alert test?

I have to download myURLString (http://www.google.com/search?q=http://www.google.com/&btnG=Search+Directory&hl=en&cat=gwd%2FTop).
function getcontents(myURLString) {
var gChannel;
var ioService = Components.classes["#mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
var uri = ioService.newURI(myURLString, null, null);
gChannel = ioService.newChannelFromURI(uri);
var listener = new StreamListener(callbackFunc);
gChannel.notificationCallbacks = listener;
gChannel.asyncOpen(listener, null);
function StreamListener(aCallbackFunc) {
this.mCallbackFunc = aCallbackFunc;
}
StreamListener.prototype = {
mData: "",
onStartRequest: function (aRequest, aContext) {
this.mData = "";
},
onDataAvailable: function (aRequest, aContext, aStream, aSourceOffset, aLength) {
var scriptableInputStream = Components.classes["#mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
scriptableInputStream.init(aStream);
this.mData += scriptableInputStream.read(aLength);
},
onStopRequest: function (aRequest, aContext, aStatus) {
if (Components.isSuccessCode(aStatus)) {
this.mCallbackFunc(this.mData);
alert('test');
} else {
this.mCallbackFunc(null);
}
gChannel = null;
},
onChannelRedirect: function (aOldChannel, aNewChannel, aFlags) {
gChannel = aNewChannel;
},
getInterface: function (aIID) {
try {
return this.QueryInterface(aIID);
} catch (e) {
throw Components.results.NS_NOINTERFACE;
}
},
onProgress : function (aRequest, aContext, aProgress, aProgressMax) { },
onStatus : function (aRequest, aContext, aStatus, aStatusArg) { },
onRedirect : function (aOldChannel, aNewChannel) { },
QueryInterface : function(aIID) {
if (aIID.equals(Components.interfaces.nsISupports) ||
aIID.equals(Components.interfaces.nsIInterfaceRequestor) ||
aIID.equals(Components.interfaces.nsIChannelEventSink) ||
aIID.equals(Components.interfaces.nsIProgressEventSink) ||
aIID.equals(Components.interfaces.nsIHttpEventSink) ||
aIID.equals(Components.interfaces.nsIStreamListener))
return this;
throw Components.results.NS_NOINTERFACE;
}
};
}
I'm thinking this.mData should have the page's contents, but I can't alert it, so I'm trying first to alert test. What is wrong?
UPDATE: I'm trying now...
function callbackFunc(pagecontents) {
alert(pagecontents);
}
...but it isn't called. Why?

I suspect you are getting an error since StreamListener is defined after you call new StreamListener(...). Have you set the proper developer preferences?