We Keep Coding

Dynamically set the "selected" attribute using Javascript

Here is my code:
$.ajax({
type: "POST",
url: "localhost/api.php",
data: {id:user_id},
cache: false,
success: function(data) {
var obj = $.parseJSON(data);
if (obj.msg == "1")
{
$.each(obj.userList, function(i,value) {
var jArray = <?php echo json_encode($groupData ); ?>;
list = [];
for (var i = 0; i < jArray.length; i++) {
list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
}
var html ="<tr>"+
"<td>"+value['id']+"</td>"+
"<td>"+value['groupID']+"</td>"+
"<td><select name='Group[]''>"+list+ "</select></td>";
$('table#List tbody').append(html);
});
}
},
alert('Error');
});
I'm dynamically constructing the html based on the ajax response.
In the code snippet >
var jArray = <?php echo json_encode($groupData ); ?>;
list = [];
for (var i = 0; i < jArray.length; i++) {
list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
}
$groupData is a PHP array. So I'm converting it into a Javascript array and using this jArray to generate the "option" and push the resulting list array. I'm appending this list array into the html and this much is working perfectly. Now there are 6 groups and one of them is already set for a particular user in the database. So currently none of the "option" has selected attribute. I'm having trouble in comparing jArray[i].Group_Id with value['groupID']. What I want to achieve is I want to compare jArray[i].Group_Id with value['groupID'] and if they are equal then set a selected attribute to that particular . How do I write an if statement for the comparison inside the "option" ?

Here's some example code showing this working:
const jArray = [{Group_Id: 1, Group_Name: 'One'}, {Group_Id: 2, Group_Name: 'Two'}];
const userList = [{id: 'user1', groupID: 2}, {id: 'user2', groupID: 2}, {id: 'user3', groupID: 1}];
$.each(userList, function(x,value) {
list = [];
for (var i = 0; i < jArray.length; i++) {
list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + (jArray[i].Group_Id == value.groupID ? ' selected ' : '') + '>' + jArray[i].Group_Name + '</option>');
}
var html ="<tr>"+
"<td>"+value.id+"</td>"+
"<td>"+value.groupID+"</td>"+
"<td><select name='Group[]''>"+list+ "</select></td>";
$('table#List tbody').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="List">
<tbody></tbody>
</table>
The important piece missing from your code being:
(jArray[i].Group_Id == value.groupID ? ' selected ' : '')

How to access all nested associative array elements?

Situation : I receive JSON array from jQuery <-> PHP Ajax request. Here's structure of unparsed JSON aray :
{"Focus":{"id":2,"brand":"Ford","name":"Focus"}}
And after using JSON.parse(json); the structure looks like :
Focus: Object
brand: "Ford"
id: 2
name: "Focus"
Problem : I want to access all array's '1st tier' elements and use them like an object, but none of the following ways works :
for (var entity in dataTable)
{
formattedText += entity['brand'] + " " + entity['name'] + "<br>";
OR
formattedText += entity.brand + " " + entity.name + "<br>";
OR
formattedText += dataTable[0]['brand'] + " " + dataTable[0]['name'] + "<br>";
}
Any solutions how to read values of all object in this array?

The for..in loop uses keys and does not return the elements themself: for (var key in dataTable)You would then access each element with dataTable[key]. The key is actually the name of the Element.
You where using it as you would use a for..of loop, but that is a new feature not supported in all Browsers yet.
Demo:
var dataTable = {"Focus":{"id":2,"brand":"Ford","name":"Focus"}}
var formattedText = ""
for (var key in dataTable)
{
formattedText += dataTable[key]['brand'] + " " + dataTable[key]['name'] + "<br>";
}
document.write(formattedText)

Object.keys will return array of all the keys of the object
You can loop(forEach/for-loop) through the keys to get the expected output.
Using forEach:
var dataTable = {
"Focus": {
"id": 2,
"brand": "Ford",
"name": "Focus"
}
}
var keys = Object.keys(dataTable);
var str = '';
keys.forEach(function(item) {
str += dataTable[item].brand + " " + dataTable[item].name;
});
alert(str);
Using for-loop:
var dataTable = {
"Focus": {
"id": 2,
"brand": "Ford",
"name": "Focus"
}
}
var keys = Object.keys(dataTable);
var str = '';
for (var i = 0, len = keys.length; i < len; i++) {
str += dataTable[keys[i]].brand + " " + dataTable[keys[i]].name;
}
alert(str);

The correct syntax to write this would be:
When you loop, you'll get the key name in the variable entity and then use that to get the value, also, you need to access the associative array inside the first key i.e. Focus
var dataTable = JSON.parse('{"Focus":{"id":2,"brand":"Ford","name":"Focus"}}');
var formattedText = '';
for (var entity in dataTable.Focus) {
formattedText += dataTable.Focus['brand'] + " " + dataTable.Focus['name'] + "<br>";
}

Sounds like you're using each function in a wrong way. in your each function change arguments to key and value like this:
$.each(dataTable, function (key, value) {
//access key and values here
});
In your case u should iterate again over key and values of your key values.

Trying to iterate over

I'm trying to iterate through a JSON object and wrap each item in the array in an li tag.
Here is my JSON structure
var classYear = {
"1921": [
'name1', 'name2', 'name3', 'name4'
],
"1933": [
'name5', 'name6', 'name7', 'name8'
],
"1943": [
'name9', 'name10', 'name11', 'name12', 'name13'
]
};
Here is my javascript
var container = document.getElementById('classYearContainer');
function classYearOutput(yClass, yId, listId, key, name) {
return '<div class="'+ yClass +'" id="'+ yId +'">' +
'<h4>' + key + '</h4>' +
'<ul id="'+ listId +'">' + name + '</ul>' +
'</div>';
}
function nameList(name) {
return '<li>' + name + '</li>';
}
for(var year in classYear) {
container.innerHTML += classYearOutput(
'category',
'y-' + year,
year + '-list',
year,
nameList(classYear[year])
);
}
With this setup my output is returning all the names in one li as opposed to separate li tags. Strangely, when I console.log I get the expected result, but when I return it puts all names in the same li.
Thanks for any help.

classYear[year] is an array, and you're passing it to the nameList function.
You have to iterate in that function as well
function nameList(name) {
var html = '';
for (var i=0; i<name.length; i++) {
html += '<li>' + name[i] + '</li>';
}
return html;
}

The issue is your passing the array into name list, you'll need to loop through the array and create an li for each name.
function nameList(names) {
var out = "";
names.forEach(function (el) {out += "<li>" + el + "</li>";});
return out;
}
Fiddle: http://jsfiddle.net/noy3dshx/

function nameList(names) {
return names.map(function(name) {
return '<li>' + name + '</li>';
});
}
Names is an array, so you need to iterate over that instead you are essentially calling the toString method of the array which is doing it's best and giving you a comma seperated list of the contents (e.g. console.log(['a', 'b', 'c'].toString()); or console.log('' + ['a', 'b', 'c']);)

Rebuild a JSON doc by Looping over the contents?

Am looking to .get an array of MongoDB docs, build var from the array using object.foo, and then reBuild an array of the all the foobar, once ranked..
Have another function that handles some variable calculations for ranking.
Am trying to reBuild the JSON array, using a for loop to iterate over the elements, but:
..the array starts with a comma for some odd reason
..looping over the newly built array seems to loop over the characters instead of the values
The console logs this: [01:10:40.833] ", {title: "Title1", quantity: "2", _id: "530c12c66e6b0de318000001"}, {title: "Title2", quantity: "4", _id: "530c12cc6e6b0de318000002"}, {title: "Title3", quantity: "8", _id: "530c12d16e6b0de318000003"}"
Then the console logs this: [01:10:40.833] undefined 213
MongoDB via .get:
function getAll(res) {
db.collection('demo').find().sort( { value: 1 } ).toArray(function (err, docs) {
console.log("Got the Docs: " + utils.inspect(docs));
// each doc looks like: { _id: ObjectID, title: 'string', quantity: int}
res.json({docs: docs});
});
}
Docs looks like this in the console:
[ { _id: 530c12c66e6b0de318000001,
title: 'Sample1',
quantity: 2 },
{ action: 'Sample2',
quantity: 4,
_id: 530c12cc6e6b0de318000002 },
{ _id: 530c12d16e6b0de318000003,
action: 'Sample3',
quantity: 8 } ]
Javascript Function to ReBuild the Array:
function reBuild(returnValue)
{
console.log(returnValue);
var docs = returnValue;
var returnedValue = [];
var doc;
for (var i=0, length=docs.length; i < length; i++){
doc = docs[i];
if (returnedValue == [])
{
returnedValue = returnedValue + '{' + 'title: "' + doc.title + '", quantity: "' + doc.quantity + '", _id: "' + doc._id + '"}';
}
else
{
returnedValue = returnedValue + ", " + '{' + 'title: "' + doc.title + '", quantity: "' + doc.quantity + '", _id: "' + doc._id + '"}';
}
}
console.log(returnedValue);
var newDocs = returnedValue;
var newDoc;
for (var i=0, length=newDocs.length; i < length; i++){
newDoc = newDocs[i];
console.log(newDoc.title);
}
}

See you can't simply assign String value to a array type variable. JavaScript allows you do so because it is a loosely typed(or dynamically typed). But it you case it is the cause for your problem.
In your code:
function reBuild(returnValue)
{
console.log(returnValue);
var docs = returnValue;
//==> Initializes to a array type i.e. equivalent to var returnedValue = new Array();
var returnedValue = [];
var doc;
for (var i=0, length=docs.length; i < length; i++){
doc = docs[i];
//==>Its better to use === if you want equality without type coersion. i.e. the values must be equal in type as well.
if (returnedValue == []){
//==>Here you are changing the type of `returnedValue` variable from array to String
//So this condition start failing from next loop onwards.
returnedValue = returnedValue + '{' + 'title: "' + doc.title + '", quantity: "' + doc.quantity + '", _id: "' + doc._id + '"}';
}
else{
returnedValue = returnedValue + ", " + '{' + 'title: "' + doc.title + '", quantity: "' + doc.quantity + '", _id: "' + doc._id + '"}';
}
}
console.log(returnedValue);
var newDocs = returnedValue;
var newDoc;
for (var i=0, length=newDocs.length; i < length; i++){
newDoc = newDocs[i];
console.log(newDoc.title);
}
}
You are changing the type of your variable returnedValue in a loop and also you are checking condition if (returnedValue == []). It automatically becomes false since it changes in first iteration from any array to String type. So the way you can look into is something array function such as arrayObject.push('YourValue')
Try the following code:
for (var i=0; i < docs.length; i++){
//This builds JSON object out of your string and pushes into your array `returnedValue`
returnedValue.push(JSON.prarse('{' + 'title: "' + docs[i].title + '", quantity: "' + docs[i].quantity + '", _id: "' + docs[i]._id + '"}'));
}
And the correct operator to typed check is to use ===. So basically the answer to your question is too broad But I did a attempt to point few of the points which takes you near to solution for your problem.
Happy coding :)

Generating a select menu using javascript/jquery arrays

I am trying to generate an HTML select menu using a javascript array. The array keys should be used as values of options. And if the array keys are entered as numbers(as what I have done in my code) they should be accepted.
a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5"]);
function a(x) {
elementString = "<select>";
for(var i in x) {
elementString += '<option value="">'+i+'</option>';
}
elementString += "</select>";
alert(elementString);
}
But this code does not work. And I could not find a way to use array keys as the values
of options. Another question I got is, if I put numbers as keys it does not work(This is a requirement).
jsfiddle
Edit: jsfiddle link works now

Your code is syntactically wrong and JavaScript doesn't have associative arrays, the key of array's elements is their index, however you can use an object:
a({selected: "No of rooms", 1: "1", 2: "2", 3: "3", 4: "4", 5: "5"});
But it should be noted that JavaScript object doesn't have order, ie, the generated elements may be different in each browser. If you want to keep the order you should use an array, in this case an array of objects:
a([{
text: "No of rooms",
value: "...",
selected: true
}, {
text: "one",
value: "1",
selected: false
}]);
function a(x) {
var elementString = "<select>";
for (var i = 0; i < x.length; i++) {
elementString += '<option value="' + x[i].value + '"' + (x[i].selected ? "selected='selected'" : '') + '>' + x[i].text + '</option>';
}
elementString += "</select>";
// document.body.innerHTML = (elementString);
}

If you have assoc massive like var arr={"room1" : "1", "room2" : "2"} then you can use keys of array like new array:
var keys = Object.keys(arr);
var k = keys.length;
var elementString = "<select>";
for(var i=0; i<k; i++) {
elementString += '<option value="'+keys[i]+'">'+arr[keys[i]]+'</option>';
}
elementString += "</select>";
And more simple method is:
var arr = {"room1" : "1", "room2" : 2};
for (var i in arr) {
elementString += '<option value="'+i+'">'+arr[i]+'</option>';
}
elementString += "</select>";

The syntax of your array is wrong.
check this fiddle
change your array as follows
var arr= ["No of rooms", "1", "2", "3", "4", "5"];
if you want to use key- value pairs, use an array of json objects.
more about json
update: fiddle using json
var arr = [{
value: '1',
data: "1"
}, {
value: '2',
data: "2"
}, {
value: '3',
data: "3"
}, {
value: '4',
data: "4"
}, {
value: '4',
data: "4"
}];
a(arr);
function a(x) {
elementString = "<select><option value='0' selected>" + "No of rooms</option>";
for (var i in x) {
elementString += '<option value="' + x[i].value + '">' + x[i].data + '</option>';
}
elementString += "</select>";
alert(elementString);
}