Develop Reference

How to prevent my "push" from putting everything in one array?

I have input fields, which are created based on my arrays in my JSON file.
However, when I insert something in my input fields, it goes right until I start inserting stuff in the input fields that aren't part of the other input fields. Don't worry, more explaining to come.
This is how my JSON looks like:
{
"main_object": {
"id": "5",
"getExerciseTitle": "TestFor",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
"title": "TestFor",
"language": "nl_NL",
"exercises": [{
"word": "test",
"syllables": [
"test01",
"test02",
"test03",
""
]
},
{
"word": "tesst",
"syllables": [
"test11",
"test12",
"",
""
]
}
]
},
"dataType": "json"
}
}
As you can see I have multiple arrays called syllables. What I am trying to do is: Create the push until it reaches the matched array in JSON, it should then change the input fields to buttons. However, when I go over to the next input fields that are linked to the second array, instead of starting the push from 0 it keeps on going.
A picture for you to see what I mean (note the console.log() too).
So: Instead of having the push start over it keeps on adding it to the already existing array. I want this NOT to happen so I can later on make a check that checks whether the push equals the array and then assign all the desired input fields to green buttons.
This is how my code looks like right now:
var x = [];
function prepareCheck() {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
$(document).on('change', '.syl-input', function() {
var rowCounter = $(this).parent().parent().parent().parent().attr('id');
var inputCounter = $(this).attr('id');
var jsyl = json.main_object.main_object.exercises[rowCounter].syllables[inputCounter];
var jsylall = json.main_object.main_object.exercises[rowCounter].syllables;
var valueInput = $(this).val();
console.log(jsylall);
if (valueInput == jsyl) {
var correctInput = $('<input/>', {
'class': 'form-control',
'type': 'text',
'id': 'button' + CBC++,
'value': valueInput
});
console.log(jsyl);
x.push(valueInput);
if (valueInput == '') {
x.remove($(this).val());
};
console.log(x);
$(this).replaceWith(correctInput);
S.playRight();
S.addRight();
} else if ($.inArray(valueInput, jsylall) >= -1) {
$(this).css({
'color': '#e00413'
});
S.playWrong();
S.addWrong();
}
});
});
}
Question: How can I reset x.push again? so I can keep on checking whether the input fields have the desired words/length to change them to green buttons?

How to determine the value in array which is in an object?

I get 100 objects (JSON) from a website, which is build like this.
"object" : [{
"id": 12243,
"name": 'Carl',
"text": 'subheader',
"tags": ["cars","child", "blue"],
...
},
{
"id": 12245,
"name": 'Dark',
"text": 'subheader',
"tags": ["cars"],
...
}
...
]
I want to get only which has the tag child. How can I do it?

You could try something like this:
var objectsWithChild = json.object.filter(function(o){
return o.tags.includes("child");
});
where json is your json string.

Using Array.prototype.filter()
var objs = [{
"id": 12243,
"name": 'Carl',
"text": 'subheader',
"tags": ["cars","child", "blue"]
},
{
"id": 12245,
"name": 'Dark',
"text": 'subheader',
"tags": ["cars"]
}]
var objsWithTags = objs.filter(obj => obj.tags.indexOf('child') > -1);
console.log(objsWithTags);

Christos has a cleaner way to do it, but this way might be clearer to a beginner. One way to do it would be to use nested for loops.
var myObjects = []
for (var i = 0; i < data.object.length; i++) {
var ob = data.object[i];
for (var j = 0; j < ob.tags.length; j++) {
if (ob.tags[i] === "child") {
myObjects.push(ob);
}
}
}

There are probably multiple ways to implement this.
But the main ideas are mostly the same.
Here in textual form:
Define a container (an array for example) for your matched objects.
Loop through all objects.
Loop through all entries of your array "tags".
Check if you find your desired value "child".
Remember your found object by adding it to your container (array).

adding javascript object in existing object

I was thinking that i know much about javascript but i must have to admit i know nothing.
i have been trying to create a custom object but still seems no where.
var currentline=[
{"NAME":"Battery For Alarm Panel","CODE":"POWER MAX","OWN":"ONM"},
{"NAME":"Fire Alarm Panel","CODE":"SANA SERVICES","OWN":"ONM"}...
]
Through help of following question i'm able to create following object
// skipping main loop code for brevity
detailObj=[];
loop{
singleObj = {};
singleObj[currentline['NAME']] = {};
singleObj[currentline['NAME']][currentline['CODE']] = {};
singleObj[currentline['NAME']][currentline['CODE']][currentline['OWN']] = value;
detailObj.push(singleObj);
}
AND get the following detailObj
[
{"Battery For Alarm Panel":{"POWER MAX":{"ONM":7}}},
{"Fire Alarm Panel":{"SANA SERVICES":{"ONM":8}}}
]
how i can push an object into object despite into array and could get following object?
{
"Battery For Alarm Panel":{"POWER MAX":{"ONM":7}},
"Fire Alarm Panel":{"SANA SERVICES":{"ONM":8}}
}
is there any function to add object in the object?

If currentline is like this
var currentline = [{
"NAME": "Battery For Alarm Panel",
"CODE": "POWER MAX",
"OWN": "ONM",
"VALUE": 7
}, {
"NAME": "Fire Alarm Panel",
"CODE": "SANA SERVICES",
"OWN": "ONM",
"VALUE": 8
}];
Simply change the detailObj an object and instead of pushing, assign NAMES values as keys, like this
var detailObj = {}; // An object, not an array
currentline.forEach(function(line) {
detailObj[line.NAME] = {};
detailObj[line.NAME][line.CODE] = {};
detailObj[line.NAME][line.CODE][line.OWN] = line.VALUE;
});
console.log(detailObj);
# { 'Battery For Alarm Panel': { 'POWER MAX': { ONM: 7 } },
# 'Fire Alarm Panel': { 'SANA SERVICES': { ONM: 8 } } }

JSON/JS Object accessing key when you don't know the name in Google Apps Script

I'm working with a response from the Webtrends API in Google apps script and I have a JSON/JS object that looks like this:
"data": [
{
"period": "Month",
"start_date": "2013-12",
"end_date": "2013-12",
"attributes": {},
"measures": {
"Visits": 500
},
"SubRows": [
{
"facebook.com": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
},
"google.co.uk": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
},
"newsnow.co.uk": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
},
"No Referrer": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
},
"t.co": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
}
}
]
}
]
What I need to access is the names i.e facebook.com etc... and visit numbers for each of the SubRows.
I'm able to get the visit numbers, but I can't work out how to get the names. Please note the names will change constantly as different sites will send different amounts of traffic each day.
Section of my code at the moment where I get the visit numbers:
for(i in dObj){
var data = dObj[i].SubRows;
var sd = dObj[i].start_date;
var ed = dObj[i].end_date;
if(sd == ed){
var timep = ""+ sd;
}
else{
var timep = ""+ sd + "-" + ed;
}
var subRows = data[0];
Logger.log(subRows);
for(i in subRows){
var row = subRows[i];
var rmeasures = row.measures;
var rvis = rmeasures.Visits;
values = [timep,"",rvis]; //Blank string for where the name of the site would go
}
}
I've tried the following links, but none of them seem to have the answer:
Getting JavaScript object key list
How to access object using dynamic key?
How to access key itself using javascript
How do I access properties of a javascript object if I don't know the names?
I'm just using vanilla google apps script as I don't have any experience with Jquery etc...
Any help would be much appreciated!

I usually use a little helper function that looks like this:
var keyVal = function(o) {
var key = Object.keys(o)[0];
return {"key": key, "val":o[key]};
} ;
This will map an object with a variable key to a key/value object {key:...., val:{}}, which is usually convenient enough to work with.
describe.only ("stack overflow answer", function(){
it ("is should create a key/value pair" , function(){
var res = keyVal( {
"facebook.com": {
"attributes": {},
"measures": {
"Visits": 100
},
"SubRows": null
}});
res.key.should.equal('facebook.com');
res.val.attributes.should.deep.equal({});
});

Within the loop, the variable i contains the current key. Replacing the empty string with i should give you what you need.

You might also want to look at some of the more functional tools built into Javascript. Some more concise code might also be more explicit:
data.map(function(datum) {
var timep = datum.start_date == datum.end_date ? datum.end_date :
(data.start_date + "-" + datum.end_date);
return datum.SubRows.map(function(subRow) {
return Object.keys(subRow).map(function(key) {
return [timep, key, subRow[key].measures.Visits];
});
});
});
would return an object something like this:
[
[
[
["2013-12", "facebook.com", 100],
["2013-12", "google.co.uk", 100],
["2013-12", "newsnow.co.uk", 100],
["2013-12", "No Referrer", 100],
["2013-12", "t.co", 100 ]
]
]
]
This just uses map and Object.keys to simplify some of what you're doing with explicit loops.

Javascript nested array transformation

I'm trying to get my head around Javascript array functions. I have a nested array like this, where every row covers the same time period:
[{
"category": "fruit",
"variety": "apple",
"data": [{
"day": 1,
"units": 2
}, {"day": 2,
"units": 4
}]
},{
"category": "fruit",
"variety": "orange",
"data": [{
"day": 1,
"units": 3
}, {"day": 2,
"units": 5
}]
},{
"category": "veg",
"variety": "tomato",
"data": [{
"day": 1,
"units": 4
}, {"day": 2,
"units": 2
}]
}]
I would like to sum the units by day by category, to get an array like this:
[{
"category": "fruit",
"data": [{
"day": 1,
"units": 5
}, {"day": 2,
"units": 9
}]
},{
"category": "veg",
"data": [{
"day": 1,
"units": 4
}, {"day": 2,
"units": 2
}]
}]
I've been tackling this through long looping if statements, and making a bit of a hash of it. Can you see an elegant way to solve this?
Many thanks!

The solution is pretty obvious: Loop through the array, and store the data in a key-value pair. Then, loop through the has, and construct the resulting array using Array.prototype.map. Finally, if you want a nicely formatted JSON-string, use JSON.stringify(result, null, 4);, where 4 is the number of spaced for pretty formatting.
Demo: http://jsfiddle.net/jde6S/
var list = [ ... ];
var hash = {};
for (var i=0; i<list.length; i++) {
var obj = list[i];
// This part makes sure that hash looks like {fruit:[], veg: []}
var hashObjCat = hash[obj.category];
if (!hashObjCat) {
hashObjCat = hash[obj.category] = {};
}
// This part populates the hash hashObjCat with day-unit pairs
for (var j=0; j<obj.data.length; j++) {
var data = obj.data[j];
if (hashObjCat[data.day]) hashObjCat[data.day] += data.units;
else hashObjCat[data.day] = data.units;
}
}
// Now, we hash looks like {fruit: {1:5, 2:9} }
// Construct desired object
var result = Object.keys(hash).map(function(category) {
// Initial object
var obj = {category: category, data:[]};
var dayData = Object.keys(hash[category]);
// This part adds day+units dicts to the data array
for (var i=0; i<dayData.length; i++) {
var day = dayData[i];
var units = hash[category][day];
obj.data.push({day: day, units: units});
}
return obj;
});
// Test:
console.log(JSON.stringify(result, null, 4));

reduce the array to an object (See #RobW's answer on how to do that with loops):
var data = [...] // your input
// Iterate the data with reduce...
var sumsbycategory = data.reduce(function(map, fruit) {
var cat = fruit.category;
// set an property to an object, iterating the days array...
map[cat] = fruit.data.reduce(function(sums, day) {
var d = day.day;
// set or update the units for this day
sums[d] = (sums[d] || 0) + day.units;
return sums; // into the next iteration
}, map[cat] || {}) // ...passing in the already existing map for this cat or a new one
return map; // into the next iteration
}, {}); // ...passing in an empty object
Now we have the following format:
{"fruit":{"1":5,"2":9},"veg":{"1":4,"2":2}}
...which I think is much easier to handle, but lets build your array:
var result = []; // init array
for (var cat in sumsbycategory) { // loop over categories
var data = []; // init array
// add category object:
result.push({category:cat, data:data});
for (var day in sumsbycategory[cat]) // loop over days in category
// add day object
data.push({day:day, units:sumsbycategory[cat][day]});
}
But, wait! An object has no order, and it could happen that day2 comes before days1 in the result array (which might break your appplication?) So, you could use map on the keys of that object which also can be sorted before, to generate the array in one clean-looking expression:
var result = Object.keys(sumsbycategory).map(function(cat) {
return {
category: cat,
data: Object.keys(sumsbycategory[cat])
.sort(function numbercompare(a,b){ return a-b; })
.map(function(day) {
return {
day: day,
units: sumsbycategory[cat][day]
};
})
};
});
result:
[{
"category": "fruit",
"data": [{"day":"1","units":5},{"day":"2","units":9}]
},{
"category": "veg",
"data": [{"day":"1","units":4},{"day":"2","units":2}]
}]
(Demo at jsfiddle.net)

If you're willing to grab some external code and use it to essentially re-index your structure you could probably do something. I know the old dojo data api was a mess to work with, but could allow something like what you seem to be asking.
Personally I'd stick with loops, just keep your variable names readable. Also remember the object literals can be addressed as either an array/hash syntax x[y] or dot syntax x.y