Develop Reference

duplicate data when searching for a specific value in javascript object

I am using the following code to look for a specific value id in javascript object. I am getting duplicate objects.
This is the javascript code I am using:
$('.seat').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
//SeatId is 1
var categoryArray = jsonData;
var id = $(this).attr('id');
var ticketData, seatLocation;
for (var i = 0; i < categoryArray.length; i++) {
var category = categoryArray[i];
for (var j = 0; j < category.assignments.length; j++) {
if (category.assignments[j].seatId == id) {
ticketData = category;
seatLocation = category.assignments[j];
}
}
}
console.log(ticketData);
console.log(seatLocation);
});
This is how the objecs look like after being parsed:
And this is how the data is being printed:
What am I doing wrong?

Try this way:
$('.seat').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var ticketData = [];
var seatLocation = [];
//SeatId is 1
var categoryArray = jsonData;
var id = $(this).attr('id');
$.each(categoryArray, function (i, cat) {
$.each(cat.assignments, function (j, ass) {
if (ass.seatId == id) {
ticketData = cat;
seatLocation = ass;
}
});
});
console.log(ticketData);
console.log(seatLocation);
});

Select2 clear items in another optgroup

On selecting an element in an optgroup, I wish to deselect elements in other optgroup. Here is the fiddle
https://jsfiddle.net/zfmr0std/
$("#block_house_suggest").select2().on("select2-selecting", function(e) {
var selected = $("#block_house_suggest [value='"+e.val+"']");
var opts = selected.parent().children();
var selected_array = [];
selected.prop('selected',true);
for (i = 0; i < opts.length; i++) {
if($(opts[i]).prop('selected')){
selected_array.push($(opts[i]).val());
}
}
$("#block_house_suggest").select2('data', selected_array);
});

var selected = '';
$("#block_house_suggest").select2()
.on("select2-selecting", function(e) {
selected = e.val;
})
.on("change", function(e) {
var selected_list = e.val;
var opts = $("#block_house_suggest [value='"+selected+"']").parent().children();
var opts_array = [];
for (i = 0; i < opts.length; i++) {
opts_array.push($(opts[i]).val());
}
selected_list = selected_list.filter(function(n) {
return opts_array.indexOf(n) != -1;
});
$("#block_house_suggest").select2('val', selected_list);
e.preventDefault();
});

Populate form from JSON.parse

I am trying to re-populate a form from some values in localStorage. I can't quite manage the last part to get the loop to populate my name and values.
function loadFromLocalStorage() {
PROCESS_SAVE = true;
var store = localStorage.getItem(STORE_KEY);
var jsn = JSON.parse(store);
console.log(jsn);
if(store.length === 0) {
return false;
}
var s = jsn.length-1;
console.log(s);
for (var i = 0; i < s.length; i++) {
var formInput = s[i];
console.log(s[i]);
$("form input[name='" + formInput.name +"']").val(formInput.value);
}
}
Could I get some pointers please.

Your issue is in this section of code.
var s = jsn.length-1;
console.log(s);
for (var i = 0; i < s.length; i++) {
You are setting s to the length of the jsn array minus 1, then using it as if it were jsn. I think you intended something like this.
function loadFromLocalStorage() {
PROCESS_SAVE = true;
var store = localStorage.getItem(STORE_KEY);
var jsn = JSON.parse(store);
console.log(jsn);
if(store.length === 0) {
return false;
}
for (var i = 0; i < jsn.length; i++) {
var formInput = jsn[i];
console.log(jsn[i]);
$("form input[name='" + formInput.name +"']").val(formInput.value);
}
}

How to click and edit each of the html cells in JavaScript

window.onload = function() {
var r = 0,
c = 0;
for (x in localStorage) {
var row = table.insertRow(r),
obj = JSON.parse(localStorage.getItem(x));
for (i in obj) {
var cell = row.insertCell(c);
cell.innerHTML = obj[i];
c += 1
}
r += 1;
c = 0;
}
for (var a = 0; a < table.length; a += 1) {
}
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[2].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[3].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
};
This code on load loops through the saved local storage JSON objects and then prints them into a table each object takes a row and the values are in the cells what i want is to be able to click and edit each of these rows this code only works for the first row and not the others so what should i do?

Put your code inside the for loop
for (var a = 0; a < table.length; a++) {
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
//more table.rows.....
}
Using jQuery is very simple:
$(function(){
$('table td').click(function(){
var ask = prompt("Input");
$(this).html(ask);
});
});

You add event outside of the loop
for (var a = 0; a < table.length; a += 1) {
for(var j=0;j<3;j++){
table.rows[a].cells[j].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
}
}

Refactor two jQuery UI auto-completes to be more Functional & DRY

I have two jQuery UI auto-completes on the same page and I'd like to make the code more "functional" and terse. My background is almost strictly OO and I'd like to get more serious about writing more functional JavaScript.
Both of these functions are properties of an object literal that I'm using to namespace the functions on the page. Right now there is a lot of code that's repeated between the functions and I'd like to use something similar to the "partial application" pattern to reduce the code.
autocomplete 1:
initProject : function(){
var selected = 0;
var suggestions = [];
var projs;
var len;
$("#projectNum").autocomplete({
source : function(req, add){
$.getJSON("projectList.do?method=viewProjectListJSON&contractID=" + req.term, function(data){
//clear the suggestions array
suggestions = [];
projs = data[0];
len = projs.length;
for(var i = 0; i < len; i++){
suggestions.push(projs[i][1]);
};
add(suggestions);
});//end getjson callback
},
minLength : 2,
select : function(){
thisval = $(this).val();
for(var i = 0;i < len; i++){
if(thisval === projs[i][1]){
$("#projectID").val(projs[i][0]);
return;
}
}
}
})
},
autocomplete 2:
initCAU : function(){
var selected = 0;
var suggestions = [];
var caus;
var len;
$("#cauNum").autocomplete({
source : function(req, add){
$.getJSON("cauList.do?method=viewCAUListJSON&cauNumber=" + req.term, function(data){
suggestions = [];
caus = data[0];
len = caus.length;
for(var i = 0; i < len; i++){
suggestions.push(caus[i][1].toString());
};
add(suggestions);
}); //end getjson callback
},
minLength : 2,
select : function(){
thisval = $(this).val();
for(var i = 0;i < len; i++){
if(parseInt(thisval,10) === caus[i][1]){
$("#cauID").val(caus[i][0]);
return;
}
}
}
})
},

//factored-out common code...
var autocompleter = function(urlPrefix, fragment) {
var selected = 0;
var suggestions = [];
var items;
var len;
return ({
minLength: 2,
source: function(req, add) {
$.getJSON(urlPrefix + req.term, function(data) {
suggestions = [];
items = data[0];
len = items.length;
for(var i = 0; i < len; i++) {
suggestions.push(projs[i][1]);
};
add(suggestions);
}); //end JSON callback
}, //end source callback
select: function() {
var thisVal = $(this).val();
for(var i = 0; i < len; i++) {
if(thisVal === items[i][1]) {
$(fragment).val(items[i][0]);
return;
}
}
} //end select callback
});
};
//verbose but clear way to achieve what you were doing before.
var initCAU = function() {
var attachTo = "#cauNum";
var urlPrefix = "cauList.do?method=viewCAUListJSON&cauNumber=";
var fragment = "#cauID";
$(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};
var initProject = function() {
var attachTo = "#projectNum";
var urlPrefix = "projectList.do?method=viewProjectListJSON&contractID=";
var fragment = "#projectID";
$(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};