I have a JSON object that returns several key value pairs. One of which is a Languages key and this contains comma separated values e.g "English, Hindi,French" etc
I'm trying to split the array before adding it to a combo list, but everything I try fails. Can anybody help, please?
$('#combolist-languages').html(function () {
var ret = '<option value="-1" selected>Select language_</option>',
u = user.slice(),
arr = [];
(function get() {
if (u.length) {
var v = u.shift();
if ($.inArray(v.Languages, arr) == -1) {
arr.push(v.Languages);
ret += '<option value="">' + v.Languages + '</option>';
}
get();
}
}());
return ret;
});
I'm just not sure where to put the split function. Thanks!
What about that?
var lang = 'English,Hindi,French';
var html = '<option value="-1" selected>Select language_</option>';
html += '<option value="">';
html += lang.split(',').join('</option><option value="">');
html += '</option>';
$('#combolist-languages').html(html);
Setting a value for each option with jQuery.map :
var lang = 'English,Hindi,French';
var html = '<option value="-1" selected>Select language_</option>';
$('#combolist-languages').html(
html + jQuery.map(lang.split(','), function (text, value) {
return '<option value="' + value + '">' + text + '</option>';
})
);
Related
I have complex json data. It can be in either formats as below :
1. {"Physics":{"5b87ceb691":"Motion","5b87ce3e":"Mass"}} //where value itself is a json
2. {"a60a8001805":"Finish chapter 1","a60a8002ab0":"Finish assignments"} //simple key value pair
I want to create checkboxes for all values (Motion, Mass, Finish chapter 1, Finish assignments for above examples) and keys should come like text in between those checkboxes (Physics for above example) (Key should come like text only if it's value is a json object, since Physics's value is a json, Physics should show like a text and in example 2, since there are no such keys whose value is a json object, no key will show like a text).
I've implemented this in javascript in the following way :
var str = "";
if(Object.keys(data).length !== 0) {
var i = 1;
for (var key in data) {
if (data.hasOwnProperty(key)) {
var val = data[key];
if(typeof val == 'object') {
str += '<div class = "data_text hidden">' + key + '</div>';
for (var subKey in val) {
if (val.hasOwnProperty(subKey)) {
var subValue = val[subKey];
str += '<div class="db-checkbox data_options hidden"><input type="checkbox" name="abc" id="' + i + '"><label for="' + i + '">' + subValue + '</label></div>'
i += 1;
}
}
} else {
str += '<div class="db-checkbox data_options hidden"><input type="checkbox" name="abc" id="' + i + '"><label for="' + i + '">' + val + '</label></div>'
i += 1;
}
}
}
Now, I want to do the same in php. I searched to find out the way to access json data in php, but all of those works only when keys are known. (For example, data->a60a8002ab0) But I want to do this generically. Don't want to hardcode anything. How can I do this? Thank you.
Try json_decode in associative mode by passing in the second param true so that it returns an associative array that you can loop through, similar to your javascript code.
//try each of the following by comment/uncomment
//$myjson = '{"Physics":{"5b87ceb691":"Motion","5b87ce3e":"Mass"}}';
//$myjson = '{"a60a8001805":"Finish chapter 1","a60a8002ab0":"Finish assignments"}';
$myjson = '{"a60a8001805":"Finish chapter 1","a60a8002ab0":"Finish assignments","Physics":{"5b87ceb691":"Motion","5b87ce3e":"Mass"}}';
$json_md_ary = json_decode($myjson,true);
$i=1;
foreach($json_md_ary as $key=>$val){
if (is_array($val)){
echo $key, "<br>";
foreach($val as $k=>$v){
echo $k, ' => ' ,$v,'<input type="checkbox" name="abc" id="'.$i.'">',"<br>";
$i++;
}
}else{
echo $key, ' => ' ,$val,'<input type="checkbox" name="abc" id="'.$i.'">',"<br>";
$i++;
}
}
$jsondata = '{"Physics":{"5b87ceb691":"Motion","5b87ce3e":"Mass"}}';
$data = json_decode($jsondata);
foreach($data as $key => $val){
print_r($val);
}
I need to select first option of select with jQuery. My code is a bit complex and can't figure out how to make it work. Thanks
Html:
'sortingHtml': '<select id="bc-sf-filter-top-sorting-select">{{sortingItems}}</select>'
Javascript:
BCSfFilter.prototype.buildFilterSorting = function() {
if (bcSfFilterTemplate.hasOwnProperty('sortingHtml')) {
jQ(this.selector.topSorting).html('');
var sortingArr = this.getSortingList();
if (sortingArr) {
// Build content
var sortingItemsHtml = '';
for (var k in sortingArr) {
sortingItemsHtml += '<option value="' + k +'">' + sortingArr[k] + '</option>';
}
sortingItemsHtml = '<option disabled="disabled" selected>Sort by</option>' + sortingItemsHtml
var html = bcSfFilterTemplate.sortingHtml.replace(/{{sortingItems}}/g, sortingItemsHtml);
jQ(this.selector.topSorting).html(html);
// Set current value
jQ(this.selector.topSorting + ' select').val(this.queryParams.sort);
}
}
};
Code to select the first option:
$("#bc-sf-filter-top-sorting-select").val($("#bc-sf-filter-top-sorting-select option:first").val());
$("#bc-sf-filter-top-sorting-select option:first").prop("selected", true);
Im working to create dropdowns loading for n-level records in Laravel 5. Currently I worked with this code but Im receiving error with children categories.
Honestly I dont know how to get values from children categories and I believe that is the main source of problem. But I dont know how to solve it
CONSOLE.LOG DISPLAYS
TypeError: children is not a function[Learn More]
This is my db and code:
DB: STRUCTURE
Entity Function:
public function getAjaxGetCategoriesDropdown() {
$categories = DB::table('categories')
->where('is_active', 1)
->orderBy('path', 'asc')
->select('categoryName','level','id','parentId')
->get();
$first = array();
$children = array();
foreach ($categories as $cats) {
if ($cats->level == 2) {
$first[$cats->id] = $cats;
} else if ($cats->parentId) {
$children[$cats->parentId][] = $cats;
}
}
return array('first' => $first, 'children' => $children);
}
SCRIPT:
<script type="text/javascript">
var children = #json($cats['children'])
function showCat(obj, level) {
var catId = obj.value;
level += 1;
if ($('cat_container_' + level)) {
$('cat_container_' + level).remove();}
var options = children(catId);
var html = '<select id="cat_' + catId + '" onchange="showCat(this, ' + level + ')">' + '<option value="">Select a SubCategory</option>';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].id + '">' + options[i].categoryName + '</option>';}
html += '</select>' + '<i class="arrow double"></i>';
html = '<label class="field select ' + 'cat_container_' + level + '">' + html + '</label>';
$('sub_cat').insert(html);
}
VIEW BLADE:
<select id="first_cat" class="required-entry validate-select" onchange="showCat(this, 2)">
<option value=""> Select a Category </option>
#foreach($cats['first'] as $cat): <option value="{{ $cat->id }}">{{ $cat->categoryName }}</option> #endforeach
</select>
<div id="sub_cat"></div>
any help appreciated!.
Change
var options = children(catId);
To
var options = children[catId];
I have a sting with comma separated
var str = "-1,opt1,opt2,opt3,opt4,opt5";
I want to append these values to my select dropdown, so that it should look like
<select>
<option value="-1">-Select-</option>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
<option value="opt4">opt4</option>
<option value="opt5">opt5</option>
</select>
I have tried putting the string into my select
$.each(str, function(key, value) {
$('#sel').append('<option value="'+value+'">'+key+'</option>');
});
Now this will put each string as an option value. But how do i put each opt as one option as i described above.
You can split the string and then iterate
var str = "-1,opt1,opt2,opt3,opt4,opt5";
$.each(str.split(','), function(key, value) {
$('#sel').append('<option value="' + value + '">' + (value == '-1' ? 'select' : value) + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel">
</select>
You need to split() your string in to an array before looping through it:
var str = "-1,opt1,opt2,opt3,opt4,opt5";
$.each(str.split(','), function(key, value) {
$('#sel').append('<option value="' + value + '">' + key + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="sel"></select>
Try this,
var str = "-1,opt1,opt2,opt3,opt4,opt5";
var strArr = str.split(',');
var htmlOptions='';
$(strArr).each(function(index,value){
htmlOptions += '<option value="'+value+'">' +(value==-1 ? '--select--' : value) +'</option>';
});
$('#sel').html(htmlOptions);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel"></select>
Use the string split method.
var str = "-1,opt1,opt2,opt3,opt4,opt5";
var optionStrings = str.split(',');
...
Try this:
var array = str.split(",");
for (i=0;i<array.length;i++){
$('#sel').append('<option value="'+array[i]+'">'+array[0]+'</option>');
}
you should try this
var array = str.split(",");
for (i=0;i<array.length;i++){
$('#sel').append('<option value="'+array[i]+'">'+array[0]+'</option>');
}
I'm trying to populate my drop down in certain order (alphabetical order/alpha numeric order), but my code doesn't seems to be working. It is populating the value but not in order.
Here is my code
function dropdown(){
var html = html + "<option value='All'>All</option>";
var colValue = getColumn("COLUMN");
for( var i = 0; i < colValue.length; i++ ) {
var valueRow = colValue[i];
html = html + "<option value='" + valueRow.c + "'>" + valueRow.c + "-" + valueRow.v + "</option>";
}
$('#id').append(html);
}
here, COLUMN is the key that holds the value A1,A2,A3,B1
this code populate my drop down in the order A3,A1,A2,B1
I want my drop down to populate in the order A1,A2,A3,B1
while i did alert(html);i get the result
<option value='All'>All </option>";
<option value='A3'>A3-a3Value </option>";
<option value='A2'>A1-a2Value </option>";
<option value='A1'>A2-a1Value </option>";
<option value='B1'>B1-b1Value </option>";
and it is populating exactly in the same order.
My question is, what i need to do, to populate my dropdown in order?
I'm still in the beginner phase in java script and Jquery. Appreciate your help
Thanks
Based on what you are saying, it looks like colValue looks like this:
colValue = [
{ c="A3", v="a3Value" },
{ c="A1", v="a2Value" } // etc.
]
So you will need to decide what property to sort on, and then you can create a comparator:
function createComparator(property) {
return function(a, b) {
return a[property] > b[property];
};
}
You would use it like this:
colValue.sort(createComparator("c"));
Based on this SO answer: How to sort javascript objects based on their properties, specifying the property
You could try this:
function dropdown(){
var html = html + "<option value='All'>All</option>";
var colValue = getColumn("COLUMN");
colValue.sort();
for( var i = 0; i < colValue.length; i++ ) {
var valueRow = colValue[i];
html = html + "<option value='" + valueRow.c + "'>" + valueRow.c + "-" + valueRow.v + "</option>";
}
$('#id').append(html);
}
Since valueRow is an object instead of an array and you want to sort on valueRow.v you need more than Array.sort().
Take a look at lodash's sortBy: http://lodash.com/docs#sortBy
_.sortBy(valueRow, 'c')