Loop through object and replace values - javascript

I have an object which at some points is four levels deep, however I want a function that will cope should more levels be introduced. I'm trying to write a function that will replaced elements such that <span class="ajax-parent1-parent2-parent3-value"></span> will be replaced with parent1.parent2.parent3.value.
The issue is that the depth is variable, so I could have something like <span class="ajax-parent1-value"></span> to be replaced with parent1.value.
Finally, it's not always the text to be replaced. Optionally, data-attr can specify an attribute to be used instead (through element.attr(<data-attr>, <value>)).
Currently, I'm iterating manually, however it isn't very clean so I was wondering if there is a better way to do it. This also doesn't work for greater than two levels deep.
function render(data) {
$.each(data, function(parent, value) {
$.each(value, function(element, value) {
$el = $('.ajax-' + parent + '-' + element);
$.each($el, function(key, el) {
if ($(el).data('attr')) {
$(el).attr($(el).data('attr'), value);
} else {
$(el).text(value);
}
}
});
});
}
Example object:
{
"profile": {
"username": "johnd",
"bio": "Some example data about John",
"website": "http://john.com",
"profile_picture": "http://john.com/me.jpg",
"full_name": "John Doe",
"counts": {
"media": 13,
"followed_by": 26,
"follows": 49
},
"id": "16"
},
"dashboard": {
"script": {
"tags": ["media"],
"stats": {
"liked": 0,
"lastrun": "never",
"duration": 0
},
"status": {
"code": 0,
"slug": "disabled",
"human": "Disabled",
"message": "Not running."
}
},
"account": {
"plan": "free",
"created": 1419261005373,
"updated": 1419261005373
}
},
"serverInformation": {
"serverName": "Johns API",
"apiVersion": "0.0.1",
"requestDuration": 22,
"currentTime": 1419262805646
},
"requesterInformation": {
"id": "redacted",
"fingerprint": "redacted",
"remoteIP": "redacted",
"receivedParams": {
"action": "getDashboard",
"apiVersion": 1
}
}
}

Here is the solution I wrote:
function iterate(obj, stack) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property], stack + '-' + property);
} else {
$group = $('.ajax' + stack + '-' + property);
$.each($group, function(key, element) {
if ($(element).data('attr')) {
$(element).attr($(element).data('attr'), obj[property]);
} else {
$(element).text(obj[property]);
}
});
}
}
}
}

Why don't you start from the HTML, so you only access the properties you actually want to render?
That way you can keep it quite simple (also note that this removes the need to nest HTML spans in the same order/depth as the data object, you can just place any HTML node anywhere. Just make sure you don't use class/node names more then once.
function parseData(data) {
var $container = $('.ajax');
$container.find("[class^='ajax-']").each(function(i, el) {
var $el = $(el);
if ($el.children().length === 0)
{
var nodes = $el.attr('class').split('-');
nodes.shift();
var node = data;
for (var i = 0; i < nodes.length; i++) {
node = node[nodes[i]];
if (typeof(node) == "undefined") {
break;
}
}
if ($el.data('attr'))
{
$el.attr($el.data('attr'), node);
}
else
{
$el.text(node);
}
}
});
}
Fiddle here:
http://jsfiddle.net/ckcduLhn/5/

Related

Grab Keys from JSON Array Without Repeating

Consider the following JSON array returned from a request sent to an Elasticsearch cluster:
[
{
"_type": "Event example",
"_source": {
"democarrier_s": "vodafone UK",
"m-Ecosystem_s": "iOS",
"demo-application": "demo",
"demo-country-code": "GB"
}
},
{
"_type": "Event example",
"_source": {
"democarrier_s": "Verizon",
"m-Ecosystem_s": "iOS",
"demo-application": "demo1",
"demo-country-code": "US"
}
}
]
I am trying to figure out how to grab all of the unique keys from this document without repeating and without hard-coding any of the values and store them into an object of the following form:
columns = ['_type', '_source.democarrier_s', '_source.m-Ecosystem_s', '_source.demo-application', '_source.demo-country-code'];
Could someone help me figure out how to achieve this? I've been trying to loop through the document and store the keys but I can't quite figure it out. '_type' can be hard coded into the columns object because it will always exist.
Thank you in advance for your help and time.
If it's just 2 levels you could do this:
var data = [
{
"_type": "Event example",
"_source": {
"democarrier_s": "vodafone UK",
"m-Ecosystem_s": "iOS",
"demo-application": "demo",
"demo-country-code": "GB"
}
},
{
"_type": "Event example",
"_source": {
"democarrier_s": "Verizon",
"m-Ecosystem_s": "iOS",
"demo-application": "demo1",
"demo-country-code": "US"
}
}
]
var keys = [];
data.forEach(function(item) {
for (var key in item) {
var hasProperties = false;
if (typeof item[key] !== 'string') {
for (var key2 in item[key]) {
hasProperties = true;
var keyName = key + "." + key2;
if (keys.indexOf(keyName) < 0)
keys.push(keyName);
}
}
if (!hasProperties && keys.indexOf(key) < 0) {
keys.push(key);
}
}
});
keys.forEach(function (k) { console.log(k) });

Validate JSON array length

I am trying to write an if statement that determines whether the getDept JSON array contains more than one value. If it does, then redirect to a different page. Through my research, it seems like it is as simple as getDept.length > 1, I have not been able to make this work though.
My Javascript code is as follows:
$.getJSON("https://apex.oracle.com/pls/apex/mfajertest1/department/"+$x('P2_DEPT_NO').value, function(getDept)
{
console.log(getDept);
if(getDept.length == 0)
{
window.alert("No Department with that ID");
}
else if(getDept.length > 1)
{
apex.navigation.redirect('f?p=71293:11');
}
else
{
$x('P2_DEPT_NAME').readOnly = false;
$x('P2_DEPT_NAME').value=getDept.items[0].dname;
$x('P2_DEPT_NAME').readOnly = true;
$x('P2_DEPT_LOC').readOnly = false;
$x('P2_DEPT_LOC').value=getDept.items[0].loc;
$x('P2_DEPT_LOC').readOnly = true;
$x('P2_DEPT_NO').readOnly = true;
}
});
The getDept JSON array contains this information:
{
"next": {
"$ref": "https://apex.oracle.com/pls/apex/mfajertest1/department/%7Bid%7D?page=1"
},
"items": [
{
"deptno": 10,
"dname": "accounting",
"loc": "madison"
},
{
"deptno": 20,
"dname": "Finance",
"loc": "Milwaukee"
},
{
"deptno": 30,
"dname": "IT",
"loc": "La Crosse"
},
{
"deptno": 40,
"dname": "Purchasing",
"loc": "Green Bay"
},
{
"deptno": 10,
"dname": "Accounting II",
"loc": "Madison II"
},
{
"deptno": 50,
"dname": "Sports",
"loc": "Waukasha"
}
]
}
I would be glad to provide more information regarding this issue if need be.
Your JSON response is actually an object, not an array. The array you're checking for is a property inside that object called items. Thus, wherever you are using getDept, you should instead be using getDept.items:
$.getJSON("https://apex.oracle.com/pls/apex/mfajertest1/department/"+$x('P2_DEPT_NO').value, function(getDept)
{
console.log(getDept.items);
if(getDept.items.length == 0)
{
window.alert("No Department with that ID");
}
else if(getDept.items.length > 1)
{
apex.navigation.redirect('f?p=71293:11');
}
else
{
$x('P2_DEPT_NAME').readOnly = false;
$x('P2_DEPT_NAME').value=getDept.items[0].dname;
$x('P2_DEPT_NAME').readOnly = true;
$x('P2_DEPT_LOC').readOnly = false;
$x('P2_DEPT_LOC').value=getDept.items[0].loc;
$x('P2_DEPT_LOC').readOnly = true;
$x('P2_DEPT_NO').readOnly = true;
}
});

Remove an object from array

am trying to remove an object from an Array list within a JavaScript object.
The Structure if the Object:
{
"temp": {
"name": "",
"css": {
"bg_color_main": "#xxxxx",
"part_bg_color": "xxxxx",
"txt_font_family": "xxxxxxxx",
"txt_font_color_main": "#xxxxx",
"headline_font_family": "xxxxx",
},
"part": [
{
"name": "xxxxxx",
"style": {}
},
{
"name": "yyyyyy",
"style": {}
},
{
"name": "zzzzzz",
"style": {}
}
]
}
}
The Code:
$.each(jsonData.temp.part, function(k, v) {
var tt = this; //var tt = $(this)
if( v.name === partName ){
delete tt[k];
}
});
Nothing happens.. no error, no warning!
There are two problems in your code. First, delete does not remove elements. It only sets them to undefined. Use splice instead.
Second, it never gets to do that, because tt (or this) is the object inside the array that you are currently working on, not the array you are iterating. You need to access the array explicitly with its full name.
$.each(jsonData.temp.part, function(k, v) {
var tt = this; //var tt = $(this)
if( v.name === partName ){
jsonData.temp.part.splice(k,1);
}
});
Alternatively you could simply use a filter.
var o = {
"temp": {
"name": "",
"css": {
"bg_color_main": "#xxxxx",
"part_bg_color": "xxxxx",
"txt_font_family": "xxxxxxxx",
"txt_font_color_main": "#xxxxx",
"headline_font_family": "xxxxx",
},
"part": [
{
"name": "xxxxxx",
"style": {}
},
{
"name": "yyyyyy",
"style": {}
},
{
"name": "zzzzzz",
"style": {}
}
]
}
}
o.temp.part = o.temp.part.filter(function (element) {return element.name !== "zzzzzz"});
You could use different approach, for example:
If the reference of the array is not needed, you can use reduce to create a new array:
jsonData.temp.part = jsonData.temp.part.reduce(function(acc, value) {
if( value.name !== partName ){
acc.push(value);
}
return acc;
}, []);
Also you can find the index of the element, and use splice to mantain the reference:
var indexElement = jsonData.temp.part.reduce(function(acc, value, index) {
if( value.name !== partName ){
return index;
}
return acc;
}, -1);
jsonData.temp.part.splice(indexElement, 1)
Both ways work.
Here is a possible solution:
The simplest way is to use delete.
var jsonData = {
"temp": {
"name": "",
"css": {
"bg_color_main": "#xxxxx",
"part_bg_color": "xxxxx",
"txt_font_family": "xxxxxxxx",
"txt_font_color_main": "#xxxxx",
"headline_font_family": "xxxxx",
},
"part": [
{
"name": "xxxxxx",
"style": {}
},
{
"name": "yyyyyy",
"style": {}
},
{
"name": "zzzzzz",
"style": {}
}
]
}
}
var nameToRemove = 'xxxxxx';
var parts = jsonData.temp.part;
$.each(parts, function(k, v) {
if (v.name === nameToRemove)
{
delete parts[k];
}
});
//this code is added to just show the result
$.each(parts, function(i, r){
if (r != undefined)
{
$('#result').append(r.name + ',')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="result"></label>
You created a copy and delete item from the copy.
$.each(jsonData.temp.part, function(k, v) {
var tt = this; // now you created a new array!!!
if( v.name === partName ){
delete tt[k]; // here you delete the item from the copy array
delete this[k]; // you remove item from the original array
}
});

Remove objects/fields which contains a specific word

I have a JSON file; I want to remove all of the fields or objects, whose names are a specific word (lets say "test") and then return the stripped JSON file back; how can I do it in Node.JS?
Here is an example of my JSON file:
{
"name": "name1",
"version": "0.0.1",
"storage": {
"db": {
"test": "STRING",
"tets2": "STRING",
},
"test": {
"test11": "STRING",
"test2": {
"test3": "0",
"test4": "0"
},
"test5": {
"test6": "0",
"test7": "0"
}
},
"test8": {
"test9": "STRING",
"test10": "STRING"
}
}
}
The desired output:
{
"name": "name1",
"version": "0.0.1",
"storage": {
"db": {
"tets2": "STRING",
},
"test8": {
"test9": "STRING",
"test10": "STRING"
}
}
}
I tried the folloiwng, but I dont know how to use typeof() and check if it is an objectgo deeper in the tree! could you please help me in this regard
var new_json = config;
async.each(Object.keys(config), function(key) {
if (key == "test") {
delete new_json[key];
}
while (typeof (new_json[key]) == "object") {
// How can I handle it here
}
});
console.log("done!");
This function should do it:
function clean(obj,target) {
var tmpobj = obj;
for (var key in tmpobj) {
if (key === target) {
delete obj[key];
}
else if (typeof obj[key] === "object") {
obj[key] = clean(obj[key],target);
}
}
return obj;
}
called this way:
json_struct = clean(json_struct,"test")
Below Recursion code will work. But you need to list of acceptable fields or not acceptable fields and based on that you need to change the below condition IF you know not acceptable fields then use below conditions.
unAcceptableFields.indexOf(key) > 0
var acceptableFields = ["name","version","storage","db", "test9", "test10","tets2", "test8", "test9", "test10" ];
console.log(removeUnwantedFields(testObject, acceptableFields));
function removeUnwantedFields(jsData,acceptableFields) {
var key;
if (jsData) {
for (key in jsData) {
if (acceptableFields.indexOf(key) == -1) {
delete jsData[key];
}
else if(typeof jsData[key] === "object"){
jsData[key] = removeUnwantedFields(jsData[key],acceptableFields);
}
}
}
return jsData;
}
Refer this URL http://jsfiddle.net/55x2V/

Nested JSON find item

I have the following valid JSON. It describes a tree structure:
{
"items": [
{
"id": "d1"
},
{
"id": "2",
"children": [
{
"id": "3"
},
{
"id": "4"
},
{
"id": "5",
"children": [
{
"id": "6"
},
{
"id": "7",
"children": [
{
"id": "8"
},
{
"id": "9"
}
]
},
{
"id": "10"
}
]
},
{
"id": "11"
},
{
"id": "12"
}
]
},
{
"id": "13"
},
{
"id": "14"
}
]
}
I need to be able to get any of the "items" by id and any of the child items. For example. Initially I tried grep:
var returnedData = $.grep(obj.items, function(element, index){return element.id == "2";
});
This worked great for item with id==2 but fails completely when I try to obtain element.id=="7"
Any assistance would be appreciated. Thanks in advance.
You can make a recursive function to search in the data:
function find(source, id)
{
for (key in source)
{
var item = source[key];
if (item.id == id)
return item;
// Item not returned yet. Search its children by recursive call.
if (item.children)
{
var subresult = find(item.children, id);
// If the item was found in the subchildren, return it.
if (subresult)
return subresult;
}
}
// Nothing found yet? return null.
return null;
}
// In the root object, the array of items is called 'items', so we pass in
// data.items to look into. The root object itself doesn't seem to have an id anyway.
var result = find(data.items, 7);
// Show the name of item 7, if it had one...
alert(result.name);
Demo: http://jsfiddle.net/rj26H/
In this function I just looped over the object, so its a bit more verbose. You could probably also use $.grep to do the searching and make the code a bit smaller. Anyway, the trick is to search all children if the item is not found on the main level. Apparently grep doesn't work in a recursive fashion.
Try this:
var id = 7;
var data = {"items": [{"id": "d1"},{"id": "2","children": [{"id": "3"},{"id": "7"},{"id": "11"},{"id": "12"}]}]};
function search(values) {
$.each(values, function(i, v) {
if (v.id == id) {
console.log('found', v);
return false;
}
if (v.children) {
search(v.children);
}
});
}
search(data.items);
Demo Link
I know this have been already answered, but I wanted to show how you could leverage the new the new JavaScript 1.7 features to solve this. Please note that the same approach could have been used without support for generators, but the code would have been longer.
//Returns an iterator that knows how to walk a tree
function treeIterator(root, childGetter, childCountGetter) {
let stack = [root], node;
while (node = stack.pop()) {
yield node;
for (let i = childCountGetter(node); i--;) stack.push(childGetter(node, i));
}
}
//Our custom search function
function findNodeById(tree, id) {
let it = treeIterator(tree,
function (node, i) { return node.children[i]; },
function (node) { return node.children? node.children.length : 0; }
);
for (let node in it) if (node.id === id) return node;
return null;
}
var tree = {
id: 'root',
children: [
{ id: 'a' },
{
id: 'b',
children: [
{ id: 'b1' },
{ id: 'b2' }
]
},
{ id: 'c' }
]
};
findNodeById(tree, 'b1'); //Object { id="b1"}
Note that you can also set the __iterator__ on the data structure so that functions that needs to iterate over this data structure do not have to know implementation details.
tree.__iterator__ = treeIterator.bind(null, tree,
function (node, i) { return node.children[i]; },
function (node) { return node.children? node.children.length : 0; }
);
Then the findNodeById function can be:
function findNodeById(tree, id) {
for (let node in it) if (node.id === id) return node;
return null;
}

Categories