Tree JavaScript code not working with Internet explorer - javascript

I need help for fixing up the bug on my JavaScript program. This program perfectly works fine on Google chrome and firefox, but the code dont works with internet explorer 8, giving a strange error mentioned below. Please someone give me a solution for my program. The fiddle link is given below
Error is:
SCRIPT438: Object doesn't support property or method 'keys'
File: treelist.js, Line: 12, Column: 13
Fiddle
var dataSource = {
"Watch": {
"Titan": {},
"parent": {
"leaf1": {},
"leaf2": {}
},
}
},
traverseObject = function (obj) {
var ul = document.createElement("ul"),
li;
for (var prop in obj) {
li = document.createElement("li");
li.appendChild(document.createTextNode(prop));
li.onclick = function(e) {
var classNames = e.currentTarget.className;
if (classNames.indexOf("hidden") == -1) {
e.currentTarget.className += "hidden";
} else {
e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
}
e.stopPropagation();
}
if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
li.appendChild(traverseObject(obj[prop]));
} else {
li.className += "leaf";
}
ul.appendChild(li);
console.log(ul);
}
return ul;
};
window.onload = function () {
document.getElementById("dvList1").appendChild(traverseObject(dataSource));
}
Thank you

The commas at the end of the members declaration are not supported in IE8.
Try to remove them, and it should work:
dataSource = {
"Watch": {
"Titan": {},
"parent": {
"leaf1": {},
"leaf2": {}
}, <-- remove this
}
Apart from this, you are refering to "Object.keys" which is not supported in IE8:
if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length)
You can solve it by adding this:
if (!Object.keys) {
Object.keys = function(obj) {
var keys = [];
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
keys.push(i);
}
}
return keys;
};
}

Schema is too complicated and a bit strange for interpretation of tree structures in JS.
IF you have chance to re design it to have something like this :
var dataSource = {
name : "Watch",
nodes : [
{
name : "Titan",
nodes: [],
},
{
name : "parent",
node : [
{
name : "leaf1",
nodes : []
},
{
name : "leaf2",
nodes : []
}
]
},
]
};
your code can be hugely reduced, and will work fine without annoying cross-browser stuff without hacks.

Related

If statement not returning as supposed

I might seem really dumb but this piece of code is really frustating me.
if(fs.exist(parametters[0])){
fs.remove(parametters[0]);
return "removed";
}else{
return "doesn't exist"
}
The thing is, the fs.remove() is actually called but the function is returning "doesnt't exist", Am I missing something?
I'm not using nodejs, this is from one library i made, is asynchronously.
It's not modifying the parametters but it does change the condition, might be that?
Well I'm posting my fs object although I don't think this will change anything.
fs = {
load: function() {
if (localStorage[0] == undefined || localStorage[0] == "undefined" || localStorage[0] == "") {
localStorage[0] = JSON.stringify(fs.files);
} else {
fs.files = JSON.parse(localStorage[0]);
}
},
save: function() {
localStorage[0] = JSON.stringify(fs.files);
},
files: [],
newFile: function(name, content, overwrite) {
if (overwrite == undefined)
overwrite = true;
if (fs.exist(name) && overwrite) {
fs.find(name).content = content;
fs.save();
}
if (!(fs.exist(name))) {
fs.files.push({
name: name,
content: content
});
fs.save();
}
},
exist: function(fileName) {
for (var i = 0; i < fs.files.length; i++) {
if (fs.files[i].name == fileName)
return true;
}
return false;
},
find: function(fileName) {
for (var i = 0; i < fs.files.length; i++) {
if (fs.files[i].name == fileName)
return fs.files[i];
}
return false;
},
format: function() {
fs.files = [];
localStorage[0] = undefined;
},
write: function(name, content, overwrite) {
if (overwrite == undefined)
overwrite = true;
if (fs.exist(name) && overwrite) {
fs.find(name).content = content;
fs.save();
}
if (!(fs.exist(name))) {
fs.files.push({
name: name,
content: content
});
fs.save();
}
},
remove: function(file) {
var arrToreturn = [];
for (var i = 0; i < fs.files.length; i++) {
if (fs.files[i].name != file)
arrToreturn.push(fs.files[i]);
}
fs.files = arrToreturn;
fs.save();
return arrToreturn;
}
}
Resolved -
After a few days of inspecting the code I found the bug where the function was called twice, the amount of code was really huge so it took me a while.
You need to add a semi-colon to return "doesn't exist", it should read return "doesn't exist";
If this is an Object, still it works.
We can assume this to be an File object ARRAY, indexOf still works to find if the item exists.
Please have a look upon below example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Result is 2 in case Apple is found
Result is -1 in case Apple is not found
You can have some more options at this link: http://www.w3schools.com/jsref/jsref_indexof_array.asp
Thanks
Use This Code For Solving This Problam. thanks
var fs = require('fs-extra')
fs.remove('/tmp/myfile', function (err) {
if (err) return console.error(err)
console.log('success!')
})
fs.removeSync('/home/jprichardson') //I just deleted my entire HOME directory.
You can try javascript indexOf function to check if the value really exists, BEFORE REMOVE Operation.
Example below:
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome");
=> Gives 13 if found
if we search for "welcome1" -> will give -1

Javascript - Find multiple values in multidimensional array

Got some JSON that I need to go through to fetch some IDs.
The JSON looks like this:
var carousel = [
{
"acf": {
"content": [
{
"acf_fc_layout": "custom",
"content": "Some text"
},
{
"acf_fc_layout": "exhibition",
"exhibition": 2594
},
{
"acf_fc_layout": "exhibition",
"exhibition": 1234
}
]
},
}
]
For every content where acf_fc_layout == exhibition I must fetch the value (ID) of exhibition so it can be used to fetch further data. As you can see there's multiple exhibition IDs aswell.
My confusion here is that there are both object and array, and that they're nested. I've done some similar stuff with jQuery, but that's out of the question this time. Don't think I need IE8 support, but still find this tricky..
If your JSON simply looks as you say, this is a simple solution:
var i;
for (i = 0; i < carousel[0].acf.content.length; i++) {
if (carousel[0].acf.content[i].acf_fc_layout === "exhibition") {
// do something with carousel[0].acf.content[i].exhibition
}
}
Alternatively if you have much more content in your JSON, this might be relevant:
var i, j;
for (i = 0; i < carousel.length; i++) {
if (typeof carousel[i].acf != 'undefined' && typeof carousel[i].acf.content != 'undefined') {
for (j = 0; j < carousel[i].acf.content.length; j++) {
if (carousel[i].acf.content[j].acf_fc_layout === "exhibition") {
// do something with carousel[i].acf.content[j].exhibition
}
}
}
}
carousel[0].acf.content.forEach(function (item) {
if (item["acf_fc_layout"] === "exhibition") {
// do some stuff
// id for exhibition placed in item["exhibition"]
}
});
With your current structure, you need to use a foreach and check the value.
var carousel = [
{
"acf": {
"content": [
{
"acf_fc_layout": "custom",
"content": "Some text"
},
{
"acf_fc_layout": "exhibition",
"exhibition": 2594
},
{
"acf_fc_layout": "exhibition",
"exhibition": 1234
}
]
},
}
];
$.each(carousel[0].acf.content,function (i,v){
if(v.acf_fc_layout == "exhibition")
$(".result").append(v.exhibition+"<br>");
});
JSFIddle
http://jsfiddle.net/oucp3v5x/
$(carousel).each(function(i, el){
$(el.acf.content).each(function(i, el){
if(el.acf_fc_layout === 'exhibition') {
$('<div>', {
text: el.exhibition
}).appendTo($('#results'));
}
});
});
If acf have many content, you need to run additional loop and acf have to be array of objects.

Azure mobile services and Ember.js

Hello!
I learning Ember.js as Web-Client Windows Azure Mobile Services from this tutorial.
When I write:
Tothevoidjs.ApplicationRoute = Ember.Route.extend({
// admittedly, this should be in IndexRoute and not in the
// top level ApplicationRoute; we're in transition... :-)
model: function(params) {
return Tothevoidjs.Secret.findAll();
}
});
I get this error:
Uncaught TypeError: Object function () {
if (!wasApplied) {
Class.proto(); // prepare prototype...
}
o_defineProperty(this, GUID_KEY, undefinedDescriptor);
o_defineProperty(this, '_super', undefinedDescriptor);
var m = meta(this), proto = m.proto;
m.proto = this;
if (initMixins) {
// capture locally so we can clear the closed over variable
var mixins = initMixins;
initMixins = null;
this.reopen.apply(this, mixins);
}
if (initProperties) {
// capture locally so we can clear the closed over variable
var props = initProperties;
initProperties = null;
var concatenatedProperties = this.concatenatedProperties;
for (var i = 0, l = props.length; i < l; i++) {
var properties = props[i];
Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));
for (var keyName in properties) {
if (!properties.hasOwnProperty(keyName)) { continue; }
var value = properties[keyName],
IS_BINDING = Ember.IS_BINDING;
if (IS_BINDING.test(keyName)) {
var bindings = m.bindings;
if (!bindings) {
bindings = m.bindings = {};
} else if (!m.hasOwnProperty('bindings')) {
bindings = m.bindings = o_create(m.bindings);
}
bindings[keyName] = value;
}
var desc = m.descs[keyName];
Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty));
Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));
Ember.assert("`actions` must be provided at extend time, not at create time, when Ember.ActionHandler is used (i.e. views, controllers & routes).", !((keyName === 'actions') && Ember.ActionHandler.detect(this)));
if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
var baseValue = this[keyName];
if (baseValue) {
if ('function' === typeof baseValue.concat) {
value = baseValue.concat(value);
} else {
value = Ember.makeArray(baseValue).concat(value);
}
} else {
value = Ember.makeArray(value);
}
}
if (desc) {
desc.set(this, keyName, value);
} else {
if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
this.setUnknownProperty(keyName, value);
} else if (MANDATORY_SETTER) {
Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
} else {
this[keyName] = value;
}
}
}
}
}
finishPartial(this, m);
this.init.apply(this, arguments);
m.proto = proto;
finishChains(this);
sendEvent(this, "init");
} has no method 'findAll'
My app.js:
var Tothevoidjs = window.Tothevoidjs = Ember.Application.create();
var client = new WindowsAzure.MobileServiceClient(
"link",
"key"
);
Tothevoidjs.WAMAdapter = Ember.Object.extend({
table: null,
init: function() {
this.table = this.get('table');
},
find: function(record, id) {
var query = this.table.where({
id: id
});
return query.read().then(function(data) {
Ember.run(record, record.load, data);
});
},
findAll: function(klass, records) {
var _self = this;
return _self.table.read().then(function(data) {
Ember.run(records, records.load, klass, data);
});
},
findQuery: function(klass, records, params) {
var query = this.table.where(params);
return query.read().then(function(data) {
Ember.run(records, records.load, klass, data);
});
},
createRecord: function(record) {
return this.table.insert(record.toJSON()).then(function(data) {
Ember.run(function() {
record.load(data.id, data);
record.didCreateRecord();
});
});
}
});
/* Order and include as you please. */
require('scripts/controllers/*');
require('scripts/store');
require('scripts/models/*');
require('scripts/routes/*');
require('scripts/views/*');
require('scripts/router');
My model file:
var attribute = DS.attr;
Tothevoidjs.Secret = DS.Model.extend({
id: attribute('number'),
body: attribute('string')
});
var client = new WindowsAzure.MobileServiceClient(
"link",
"key"
);
Tothevoidjs.Secret.adapter = Tothevoidjs.WAMAdapter.create({
table: client.getTable('secret')
});
And router:
Tothevoidjs.ApplicationRoute = Ember.Route.extend({
// admittedly, this should be in IndexRoute and not in the
// top level ApplicationRoute; we're in transition... :-)
model: function(params) {
return Tothevoidjs.Secret.findAll();
}
});
I do not understand what I did wrong. :(
Please tell me how to avoid this error or what I should read to understand it.
If you need to know version of Ember.js - it's from yeoman generator - 1.0.0
P.S. I'm newbie in web-dev.
Your tutorial is using the ember-model libray. But your current code use ember-data version 1.0.0.beta.x. Both are data libraries for ember, have similar api, but are different.
I recommend you to use the ember-model libray, so you will be able to finish the tutorial.
So, import the ember-model script, the source is here, make sure it comes after the ember.js script, and change your model definition to use ember-model:
var attribute = Ember.attr;
Tothevoidjs.Secret = Ember.Model.extend({
id: attribute('number'),
body: attribute('string')
});
I hope it helps

Nicer way to get nested object attributes

Often in a response from a remote API call, I receive nested objects:
var response = {
data : {
users : [
{
name : 'Mr. White'
}
]
}
}
I want to check whether the first user's name is 'Mr. White', and would naturally want to write something like.
var existed = response.data.users[0].name === 'Mr. White'
However I cannot be sure if all the objects are present, so to avoid exceptions instead I end up writing:
var existed = response && response.data && response.data.users && response.data.users[0].name === 'Mr. White'
Is there a nicer way to do this? Another ugly option that comes to mind is:
var existed = false;
try {
var existed = response.data.users[0].name === 'Mr. White';
} catch(e) { }
In addition to vanilla javascript, I usually have underscore.js and jquery available too.
Edit:
Oops, noticed I asked a dupe of javascript test for existence of nested object key.
An interesting option based on those answers is:
var existed = (((response || {}).data || {}).users || [{}])[0].name === 'Mr. White';
You could hide this naughty try/catch block inside a function like this one :
function resolve(root, path){
try {
return (new Function(
'root', 'return root.' + path + ';'
))(root);
} catch (e) {}
}
var tree = { level1: [{ key: 'value' }] };
resolve(tree, 'level1[0].key'); // "value"
resolve(tree, 'level1[1].key'); // undefined
More on this : https://stackoverflow.com/a/18381564/1636522
I would use the try catch approach but wrap it in a function to hide the ugliness.
Instead of a try/catch, this should be done via checking whether each level in the object is defined or not.
go for
if(typeof(response)!="undefined"
&& typeof(response.data)!="undefined"
&& typeof(response.data.users)!="undefined"
&& typeof(response.data.users[0])!="undefined"
&& typeof(response.data.users[0].name)!="undefined"
) {
//executes only if response.data.users[0].name is existing
}
Here is a function which I used in one of my projects http://jsfiddle.net/JBBAJ/
var object = {
data: {
users: [
{
firstName: "White"
},
{
firstName: "Black"
}
]
}
}
var read = function(path, obj) {
var path = path.split(".");
var item = path.shift();
if(item.indexOf("]") == item.length-1) {
// array
item = item.split("[");
var arrayName = item.shift();
var arrayIndex = parseInt(item.shift().replace("]", ""));
var arr = obj[arrayName || ""];
if(arr && arr[arrayIndex]) {
return read(path.join("."), arr[arrayIndex]);
} else {
return null;
}
} else {
// object
if(obj[item]) {
if(path.length === 0) {
return obj[item];
} else {
return read(path.join("."), obj[item]);
}
} else {
return null;
}
}
}
console.log(read("data.users[0].firstName", object)); // White
console.log(read("data.users[1].firstName", object)); // Black
console.log(read("data.test.users[0]", object)); // null
The idea is to pass your path as a string along with your object. The idea was to prevent the throwing of an exception and receive just null as result of the path is wrong. The good thing is that the function works with every path and you don't need to write long if statements.

Convert JSON to HTML Tree

I would like to generate an HTML tree (preferably UL-LI) from the JSON example below. Does anyone have a simple, recursive JS function (not a framework) that can handle this specific structure? Thanks for your help!
{ "folder" : [ {
"title" : "1",
"folder" : [ {
"title" : "1.1",
"folder" : [ {
"title" : "1.1.1",
} , {
"title" : "1.1.2",
} ]
} ]
} , {
"title" : "2",
} ] }
function to_ul (obj) {
// --------v create an <ul> element
var f, li, ul = document.createElement ("ul");
// --v loop through its children
for (f = 0; f < obj.folder.length; f++) {
li = document.createElement ("li");
li.appendChild (document.createTextNode (obj.folder[f].title));
// if the child has a 'folder' prop on its own, call me again
if (obj.folder[f].folder) {
li.appendChild (to_ul (obj.folder[f].folder));
}
ul.appendChild (li);
}
return ul;
}
Caveat: No error checking! If a 'title' or 'folder' is missing, the whole thing could blow up.
I had a problem getting my browser to accept the data structure submitted by the OP, but here is a fully working example I've drawn up for my own, similar purposes. Beside the function I provide the data structure as well, with name/branches instead of title/folder.
function to_ul(branches) {
var ul = document.createElement("ul");
for (var i = 0, n = branches.length; i < n; i++) {
var branch = branches[i];
var li = document.createElement("li");
var text = document.createTextNode(branch.name);
li.appendChild(text);
if (branch.branches) {
li.appendChild(to_ul(branch.branches));
}
ul.appendChild(li);
}
return ul;
}
function renderTree() {
var treeEl = document.getElementById("tree");
var treeObj = {
"root": [{
"name": "George & Sarah Trede",
"branches": [{
"name": "George & Frances Trede",
"branches": [{
"name": "Mary (Trede) Jempty"
}, {
"name": "Carol (Trede) Moeller"
}]
}, {
"name": "Mary (Trede) Sheehan"
}, {
"name": "Ward Trede"
}]
}]
};
treeEl.appendChild(to_ul(treeObj.root));
}
renderTree()
<div id="tree"></div>
I've used PURE with some success in the past for this kind of thing.
function to_li(obj, name) {
var li = document.createElement("li");
if (typeof(name) != "undefined") {
var strong = document.createElement("strong");
strong.appendChild(document.createTextNode(name + ": "));
li.appendChild(strong);
}
if (typeof(obj) != "object"){
li.appendChild(document.createTextNode(obj));
} else {
var ul = document.createElement ("ul");
for (var prop in obj){
ul.appendChild(to_li(obj[prop],prop));
}
li.appendChild(ul);
}
return li;
}
Check out the jquery plugin JSON2HTML, it's a little simpler to use than PURE and I've used it on a couple of site's I've created.
http://json2html.com
#Boldewyn: I believe you can also use a For...In loop instead of a regular For loop to shorten the code a bit. Of course, I don't have much experience using this kind of loop, so please check my code snippet.
for (var i in obj.folder) {
li = document.createElement ("li");
li.appendChild (document.createTextNode (i.title));
// if the child has a 'folder' prop on its own, call me again
if (i.folder) {
li.appendChild (to_ul (i.folder));
}
}
I have made a pip package for the same do check it out JSON2tree. Install it using pip install json2tree then use cli tool to create HTML tree.
json2tree -j example.json -o output.html

Categories

Resources