We Keep Coding

Populate selectors using json doesn't work as expected

I am trying to make two selector's populated with JSON. One for states and one for cities. If i choose a state the next selector is supposed to show me the cities that are in that state.
I've made it so far using functions. My state function is working fine, but I'm having troubles with my city selector. It doesn't show anything.
I'm stuck here.
In my scripts.js I have
function populateState(data){
var listState = "";
for(var i in data.states){
listState += '<option value="'+data.states[i].id+'">'+data.states[i].name+'</option>';
}
$('#states').html(listState);
}
function populateCities(data){
var listobj = "";
for(var i in data.states.cities){
listobj += '<option value="'+data.states.cities[i].id+'">'+data.states.cities[i].name+'</option>';
}
$('#cities').html(listobj);
}
And in my ready.js where i use the functions I have
var dataJson = {
"states": [
{
"name": "First state",
"id": "1",
"cities": [
{
"name": "city1",
"id": "cos"
},
{
"name": "city2",
"id": "mio"
},
{
"name": "city3",
"id": "top"
}
]
},
{
"name": "Second state",
"id": "2",
"cities": [
{
"name": "city4",
"id": "or"
},
{
"name": "city5",
"id": "st"
},
{
"name": "city6",
"id": "bs"
}
]
},
]
};
$(document).ready(function() {
populateState(dataJson);
$("#states").change(function () {
populateCities(dataJson);
});
});
Here`s the HTML
<select id="states" >
<option value="000">-Select State-</option>
</select>
<select id="cities" >
<option value="000">-Select Cities-</option>
</select>

The issue is that you can't iterate through the cities like that, with for(var i in data.states.cities){...}. You need to iterate through just the cities belonging to the selected state.
Here's a working example.
function populateState(data){
var listState = "";
for(var i in data.states){
listState += '<option value="'+data.states[i].id+'">'+data.states[i].name+'</option>';
}
$('#states').html(listState);
}
function populateCities(data){
var listobj = "";
for(var i in data.states){
if (data.states[i].id == $("#states").val()) {
//this is the selected state, let's get their cities
for(var j in data.states[i].cities){
listobj += '<option value="'+data.states[i].cities[j].id+'">'+data.states[i].cities[j].name+'</option>';
}
}
}
$('#cities').html(listobj);
}
var dataJson = {
"states": [
{
"name": "First state",
"id": "1",
"cities": [
{
"name": "city1",
"id": "cos"
},
{
"name": "city2",
"id": "mio"
},
{
"name": "city3",
"id": "top"
}
]
},
{
"name": "Second state",
"id": "2",
"cities": [
{
"name": "city4",
"id": "or"
},
{
"name": "city5",
"id": "st"
},
{
"name": "city6",
"id": "bs"
}
]
},
]
};
$(document).ready(function() {
populateState(dataJson);
$("#states").change(function () {
populateCities(dataJson);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="states" >
<option value="000">-Select State-</option>
</select>
<select id="cities" >
<option value="000">-Select Cities-</option>
</select>
You would probably want to do something like call the populateCities as a callback when you're done with populateState on document.ready, since it comes up with the First state already selected, but doesn't populate its cities. But at least this will get you past your issue.

how to bind nested json data into angularjs dropdown?

I have some json data related to timzone below i need to bind particular nested value into dropdown, in using angularjs, in timezone array its coming as string format i need to bind those into dropdown.
timezone.json --
{
"countries": {
"US": {
"id": "US",
"name": "United States",
"timezones": [
"America/New_York",
"America/Detroit",
]
},
"CA": {
"id": "CA",
"name": "Canada",
"timezones": [
"America/St_Johns",
"America/Halifax",
]
},
"IN": {
"id": "IN",
"name": "India",
"timezones": [
"Asia/Kolkata"
]
},
}
}
Script--
$http({
method: "GET",
url: 'timezon.json'
}).then(function mySuccess(response) {
$scope.timeZones = response.data;
}, function myError(response) {
$scope.timeZones = response.statusText;
});
HTML Content
<select class="form-control">
<option value="0">--Select Time Zones></option>
</select>

You can use the following to iterate through your object keys and populate your select.
<select class="form-control">
<option value="0">--Select Time Zones></option>
<option ng-repeat="(key, value) in data.countries" value="value.id">{{value.timezones.toString()}}</option>
</select>
Demo

First off manipulate data and then populate select
HTML
<div ng-app="app" ng-controller="Ctrl" ng-init="getTimeZones">
<h1>{{selectedTimezone}}</h1>
<select ng-model="selectedTimezone" ng-options="item for item in timezones">
</select>
</div>
JS
var app = angular.module("app", []);
app.controller('Ctrl', function($scope, $filter) {
$scope.timezones = []
$scope.data = {
"countries": {
"US": {
"id": "US",
"name": "United States",
"timezones": [
"America/New_York",
"America/Detroit",
]
},
"CA": {
"id": "CA",
"name": "Canada",
"timezones": [
"America/St_Johns",
"America/Halifax",
]
},
"IN": {
"id": "IN",
"name": "India",
"timezones": [
"Asia/Kolkata"
]
},
}
}
$scope.getTimeZones = setTimeout(function(){
// http request here after success
for (var key in $scope.data.countries) {
var timezones = $scope.data.countries[key].timezones;
timezones.unshift($scope.data.countries[key].name);
Array.prototype.push.apply($scope.timezones, timezones);
// For ES6
// $scope.timezones.push(...timezones)
}
}, 1000);
});
Demo

How to show json data as optgroup with multiple-select in Select Option in angularjs

I try to show JSON data as optgroup option with multi-select in angularjs but not get success
In Html it shown as:
<select ng-model="industrycatslect" ng-change="industryslected(industrycatslect)" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory track by skilldata.id">
<option value="">Select Location</option>
</select>
JSON shown as:
"skillCategory": [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
],
Please Help me I think I done some mistake in "ng-options".

Not much changes except removing the track by part
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.skillCategory = [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="industrycatslect" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory">
<option value="">Select Location</option>
</select>
<br>
{{industrycatslect}}
</div>

I think that this might help you out. There was an error in how you define your skillCategory JSON data. I hope that this JSFiddle helps out. It's not sorted by ID but it displays the elements as intended:
Answer 1

Binding json arrays in angular js select option

I am working with select box in angular js. i need to bind the data to the select box from the json,How do i populate json with arrays inside a select box in angular. i have the following code.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x.names.name for x in names">
</select>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = {
"jobs": [
{
"Software": [
{
"name": "Developer",
"displayName": "App Developer"
},
{
"name": "Designer",
"displayName": "App Designer"
}
]
},
{
"Business": [
{
"name": "Sales",
"displayName": "Sales Manager"
},
{
"name": "Marketing",
"displayName": "Head of Marketing"
}
]
}
]
};
});
How do i populate the json $scope.names inside the select box. i am finding difficulty as the json have arrays. Thanks in advance

Try this one may be it will help you
Use ng-repeat on <select> tag
<select name="singleSelect" id="singleSelect" ng-model="selectedName">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option ng-repeat="n in names.software" value="{{n.name}}">{{n.displayName}}</option>
</select>
same way you can add different data.

It will be alot more easier if you prepare the data in your controller
$scope.values = [];
angular.forEach($scope.names, function (value, key) {
angular.forEach(value, function (value2, key2) {
angular.forEach(value2, function (value3, key3) {
angular.forEach(value3, function (value4, key4) {
$scope.values.push(value4.name);
});
});
});
});
and use $scope.values in your select

One possible way to do this by using custom directive.
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model='selectedName' custom-options>
<option value="">-- choose an option --</option>
</select>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = {
"jobs": [
{
"Software": [
{
"name": "Developer",
"displayName": "App Developer"
},
{
"name": "Designer",
"displayName": "App Designer"
}
]
},
{
"Business": [
{
"name": "Sales",
"displayName": "Sales Manager"
},
{
"name": "Marketing",
"displayName": "Head of Marketing"
},
{
"name": "Sales1",
"displayName": "Sales Manager1"
},
{
"name": "Marketing1",
"displayName": "Head of Marketing1"
}
]
}
]
};
}).directive("customOptions", function () {
return function (scope, element, attrs) {
var data = scope['names']['jobs'];
var propertyName = 'name';
if (angular.isArray(data)) {
angular.forEach(data, function(value, key) {
angular.forEach(value, function(ivalue, ikey) {
for (var i = 0; i < ivalue.length; i++) {
element.append(angular.element('<option>').text(ivalue[i][propertyName]).attr('value',ivalue[i][propertyName]));
}
})
});
}
}
})
JS FIDDLE

How to handle data binding on a dynamic set of checkboxes

I'm trying to create an angular directive making me able to select from a list of items group by category. Each item should be selectable using a checkbox.
The input data to the directive is something like
[
{
"id": "1",
"name": "category1",
"items": [
{
"id": "1",
"name": "item1"
},
{
"id": "2",
"name": "item2"
},
{
"id": "3",
"name": "item3"
},
{
"id": "4",
"name": "item4"
}
]
},
{
"id": "2",
"name": "category2",
"items": [
{
"id": "5",
"name": "item5"
},
{
"id": "6",
"name": "item6"
}
]
}
]
And the object of pre-checked items is:
{
"1": [
"2",
"4"
]
}
Here item with id 2 and 4 from category with 1 should be pre-checked.
My code results in this view:
The checked-state is handled using the ng-checked directive:
<input id="item-{{item.id}}" value="{{item.id}}" type="checkbox" ng-checked="isSelected(cat,item)">
When checking/unchecking an item, the selected items object should be updated to reflect the current state. How can I handle this? Should all this be structured in a different way?
See my plumber: http://plnkr.co/edit/6fbfZnQCq5fq1zDp8VIB.

As always, there is multiple ways to achieve this. My suggestion:
Use ng-model on your inputs:
<input ng-model="selected[cat.id][item.id]"
id="item-{{item.id}}"
value="{{item.id}}"
type="checkbox"
ng-checked="selected[cat.id][item.id]">
This will require a slight modification of your selectedItems property (it is now an object instead of an array):
$scope.selectedItems = {
"1": {
"2": true,
"4": true
}
};
The ng-checked in the HTML will automatically check the items which are marked true.
I'm not sure how you want to handle the selection of categories, but I hope this will give you an idea!
Check the updated Plunker.