We Keep Coding

Add class to biggest value

I have this thing.
In order to work you need to change the select.
After you change the option, some values will show, I'm adding the class highest on the biggest value of the currentDATA[year].
But the thing is if I switch to Something #2 and back to Something #1, the correct values are not highlighted.
if(value > prevVal) {
$el.parent().find('span').removeClass('highest');
$el.addClass('highest');
}
Full demo
Can someone explain me what I'm doing wrong?

First, prevVal was always zero. So setting that gets it working for one of the years.
Next, you need to reset prevVal to zero for each year so each will find it's own largest value.
$('select').on('change', function() {
var currentDATA = myJSON[$(this).val()];
for(var year in currentDATA){
var prevVal = 0;
console.log(year);
for(var val in currentDATA[year]) {
var value = currentDATA[year][val];
var $el = $('.' + val + '_' + year);
$el.html(value);
if(value > prevVal) {
prevVal = value;
$el.parent().find('span').removeClass('highest');
$el.addClass('highest');
}
}
}
});

You must keep tracking the highest value :
$('select').on('change', function() {
var currentDATA = myJSON[$(this).val()];
var highestVal = 0;
var highestValObj;
for(var year in currentDATA){
for(var val in currentDATA[year]) {
var value = currentDATA[year][val];
var $el = $('.' + val + '_' + year);
$el.html(value);
if(value > highestVal) {
highestVal = value;
highestValObj = $el;
}
}
}
$('.highest').removeClass('highest');
highestValObj.addClass('highest');
});

Yor prevVal is always 0. Change to if you want your code to work:
if(value > prevVal) {
prevVal = value;
$el.parent().find('span').removeClass('highest');
$el.addClass('highest');
}
But I would advice you to change prevVal name. The logic is built so that you should not compare current value with previous value, you should compare it with the highest value among all previous values.

Table json object in javascript

I want to make json object of html table in javascript.Currently I am able to read the each cells value in javascript, the only problem is that I am not able to retrieve as per my need so think of any suggestion here. Currently getting value like:
var x = document.getElementById("tableId");
for (var i = 0; i < x.rows.length; i++) {
for (var j = 0; j < x.rows[i].cells.length; j++){
tableJsonDTO[name] = x.rows[i].cells[j].innerHTML;
}
}
This is how i am able to read the each cell value.The table format is as follow:
header: company_1 company_2 company_3
Question1 answer_1 answer_1 answer_1
Question2 answer_2 answer_2 answer_2
and so on.How can i read the value so that i can get object like:
var obj = [{spname:"company_1",qalist:[{question:"",answer:""},{question:"",answer:""}]},{spname:"company_2",qalist:[{question:"",answer:""},{question:"",answer:""}]},{spname:"company_3",qalist:[{question:"",answer:""},{question:"",answer:""}]}]
Please give some suggestion.

You simply need to change the way you put values to tableJsonDTO. Demo.
document.getElementById('toJSON').addEventListener('click', function(){
var table = document.getElementById('mytable'),
names = [].slice.call(table.rows[0].cells),
values = [].slice.call(table.rows, 1),
out = {};
values.forEach(function(row) { //iterate over values
var cells = row.cells,
caption = cells[0].innerHTML; //get property name
[].forEach.call(cells, function(cell, idx) { //iterate over answers
var value = {},
arr;
if(!idx) return; //ignore first column
value[caption] = cell.innerHTML; //prepare value
//get or init array of values for each name
arr = out[names[idx].innerHTML] || (out[names[idx].innerHTML] = []);
arr.push(value);
});
});
console.log(out);
});

go trough javascript array and get next array index value

I have array which holds option values from select.
var arrValues = new Array();
$("#myId option").each(function()
{
var sel = $("#myId").val();
arrValues.push(sel);
}
now I want to find current selected value from #myId select option and take next array index value.
forexample
if array contains values like
array = "AB", "CD", "EF"
if my currently selected value is AB I want to take CD value and store into var nextValue variable.

This is how you would do it:
D E M O
var curval, nextval, _index, arrValues = new Array();
$(function() { bindDropdown();});
function bindDropdown() {
$("#myselect option").each(function()
{
arrValues.push($(this).val());
});
$("#myselect").on('change', function() {
curval = $( "#myselect" ).val();
_index = $.inArray(curval, arrValues);
nextval = arrValues[(_index==arrValues.length-1) ? 0 : _index+1];
});
}
nextval will be your next value..
Notice: if you choose the last option, then your next becomes the first.. I don't know if that's your desired behavior so let me know..

following function returns the next value or an empty string if the current value is the last value:
function getNextValue(array, currentValue) {
var nextValue = "";
for(var i = 0; i < array.length - 1; i++) {
if(array[i] == currentValue) {
nextValue = array[i + 1];
break;
}
}
return nextValue;
}

You can use Array.prototype.indexOf to find the index in the array, then just increment it to get the next. Be careful if the last option is selected, because there is no next value.
var nextValue;
var index = arrValues.indexOf($('#myId').val());
if(index < arrValues.length-1){
nextValue = arrValues[index+1];
} else {
// the selected value is the last in the array so can't get next
}

count total duplicates in js array

I'm looping through all classnames in my html body.
I'd like to store the classname with textSize value. Each time there is a duplicate value for a given classname, I want to increment its textSize.
$("*").each(function() {
classname = $(this).get(0).className;
myarray.push({"className" : classname, "textSize" : 5});
Here, I attempt to sort the classnames, then get a count for each duplicate:
myarray.sort();
var current = null;
var dupCount = 0;
for (var i = 0; i < myarray.length-1; i++) {
if (myarray[i]["className"] !== "") {
if (myarray.indexOf(myarray[i]["className"]) == -1) {
log(myarray[i]["className"]);
}
else {
log("DUP");
myarray[i]["textSize"] = myarray[i]["textSize"] += 5;
dupCount++;
}
}
}
log(myarray[i]["className"]);, shown in the image below, clearly shows duplicates:
Yet, log("DUP"); is never called once. Why is that?
Moreover, why doesn't myarray.sort(); sort them alphabetically? If it did that, I could just do if (myarray[i]["className"] === myarray[i++]["className"]) { to check if the value equals the next value in the array. But sort doesn't work.
Edit:
So when looping through, I should be able to alter the css per classname, right?
for(var classname in classes) {
console.log(classes[classname].textSize);
var $val = $(classes[classname]);
$val.css({
"color" : "blue",
"fontSize": $val.textSize+"px"
});
}
This doesn't work even though console.log(classes[classname].textSize); gives text sizes per element

Try using an object instead of an array, using class names as the keys:
var classes = {};
$("*").each(function() {
var classname = $(this).get(0).className;
var c = classes[classname] ||
(classes[classname] = { className: classname, textSize: 0 });
c.textSize += 5;
});
for(var classname in classes) {
console.log(classes[classname]);
}
Remember that any element can have multiple classes. If you want to account for that, you'll have to split up the class names:
$("*").each(function() {
var classnames = $(this).get(0).className.split(' ');
for(var i=0; i<classnames.length; i++) {
var classname = classnames[i];
var c = classes[classname] ||
(classes[classname] = { className: classname, textSize: 0 });
c.textSize += 5;
}
});
See this demonstration: http://jsfiddle.net/FSBhv/
UPDATE: the OP clarified that he wants to set the text size on the elements based on the number of elements that have that class. Doing that will take a slightly different approach (we'll actually have to store the elements):
var eltsByClass = {};
$("*").each(function() {
var $this = $(this);
$this.get(0).className.split(' ').forEach(function(cname) {
var c = eltsByClass[cname] ||
(eltsByClass[cname] = []);
c.push($this.get(0));
});
});
for(var cname in eltsByClass) {
var elts = eltsByClass[cname];
$(elts).css('font-size', (elts.length + 1) * 5 + 'px');
}

Store your data in an object, not an Array. And it can be simplified as:
var classes = {};
$("*").each(function() {
var classname = $(this).get(0).className;
classes[classname] = (classes[classname] || 0) + 5;
});
for(var classname in classes) {
console.log(classname + " textSize:" + classes[classname]);
}

myarray.indexOf(myarray[i]["className"]) is a problem.
You know that myarray contains only objects, but you're asking for the position of a string within that list. That's never going to return anything but -1.
Consider using a second array to store the frequency count, instead of trying to do both with myarray.
var frequency = {};
myarray.forEach(function (i) {
frequency[i.className] = frequency[i.className] || 0
frequency[i.className]++;
}

This will hely you to sort array alphabetically based on classname
var myarray=[];
$("*").each(function()
{
classname = $(this).get(0).className;
myarray.push({"className" : classname, "textSize" : 5});
});
function compare(a,b)
{
if (a.className < b.className)
return -1;
if (a.className > b.className)
return 1;
return 0;
}
myarray.sort(compare);

some jQuery/javascript help. Add items to optgroup

I have an array called tmp
var tmp = ["05", "13", "27"];
if an option value is equal to a value within tmp, I want to add that option to a particular optgroup, else add it to the other optgroup. I keep getting everything added to optgroup #2, except the option with the value "27". What am I doing incorrectly?
var groups = $("optgroup");
$("option").each(function() {
var value = $(this).val();
for (var x = 0; x < tmp.length; x++) {
var isMatch = (tmp[x] === value);
if (isMatch) {
$(this).appendTo($(groups[0]));
} else if (value.length > 0) {
$(this).appendTo($(groups[1]));
}
}
});
Thanks for any pointers to correct this.
~ck in San Diego

You should add a break after each appendTo statement so that you don't keep comparing the option to all tmp values.
var groups = $("optgroup");
$("option").each(function() {
var value = $(this).val();
for (var x = 0; x < tmp.length; x++) {
var isMatch = (tmp[x] === value);
if (isMatch) {
$(this).appendTo($(groups[0]));
break;
} else if (value.length > 0) {
$(this).appendTo($(groups[1]));
break;
}
}
});

Firstly,
$(this).appendTo($(groups[1]));
can be changed to
$(this).appendTo(groups[1]);
you don't need to wrap the element again into a jQuery object in order to append to it, a HTMLElement will work fine.
Do you have the HTML that you're using and where are your <option> elements that you are checking the value of?
EDIT:
I've rewritten your code slightly and this works correctly (N.B. appending won't work in IE6 and I believe 7 and 8 too - In IE the innerHTML property for a select element is readonly, so use createElement or the Option constructor to create options),
Working Example. add /edit to the URL to see the code. I have the option elements in an array in the working example, I assume that you have them in a similar structure.
var groups = $("optgroup");
$('options').each(function() {
var $this = $(this);
var val = $this.val();
if (tmp.indexOf(val) !== -1) {
$this.appendTo(groups[0]);
}
else if (val.length > 0) {
$this.appendTo(groups[1]);
}
});