how to assign values from Json file to Javascript array - javascript

to populate the countries list in my typeahead search I am declaring manually.
var data = [
{
"id": "Austria",
"continent": "Europe"
},
...
{
"id": "USA",
"continent": "America"
}
];
I want the array data will get data from an external json file. Let's say my countries.json file contains this data
[
{
"id": "Austria",
"continent": "Europe"
},
{
"id": "France",
"continent": "Europe"
},
{
"id": "Japan",
"continent": "Asia"
},
{
"id": "USA",
"continent": "America"
}
]
I used getJSON To load the json data in my array data
var data = [];
$.getJSON( "js/countries.json", function(json){
data = json;
console.log(data);
});
The console shows me that data contains the values I need but in the rest of my code where I am using data as source it's not working. When I load data from Json file, i don't have any country shown in the search input.
Any suggestions please what I am missing ? Thank you.
var data = [{
"id": "Austria",
"continent": "Europe"
}, {
"id": "France",
"continent": "Europe"
}, {
"id": "Japan",
"continent": "Asia"
}, {
"id": "USA",
"continent": "America"
}];
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead-input",
minLength: 0,
hint: true,
searchOnFocus: true,
group: {
key: "continent",
template: function(item) {
var continent = item.continent;
return continent;
}
},
emptyTemplate: 'no result for {{query}}',
groupOrder: ["Europe", "Asia", "America"],
display: ["id"],
correlativeTemplate: true,
dropdownFilter: [{
key: 'continent',
template: '<strong>{{continent}}</strong> continent',
all: 'All Countries'
}],
multiselect: {
matchOn: ["id"],
data: function() {
var deferred = $.Deferred();
return deferred;
}
},
template: '<span>' +
'<span class="id">{{id}}</span>' +
'</span>',
source: {
groupName: {
data: data
}
},
debug: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input class="js-typeahead-input"
name="q"
type="search"
autofocus
autocomplete="on">
</span>
</div>
</div>

Try
data = JSON.parse(json);
The request will get text and you need to parse that text into a JavaScript object. See how if I convert the object in your snippet to a string it needs to be parsed. Try
console.log(typeof json)
and you will see it is a string, not an array.
var data = JSON.parse(`[{
"id": "Austria",
"continent": "Europe"
}, {
"id": "France",
"continent": "Europe"
}, {
"id": "Japan",
"continent": "Asia"
}, {
"id": "USA",
"continent": "America"
}]`);
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead-input",
minLength: 0,
hint: true,
searchOnFocus: true,
group: {
key: "continent",
template: function(item) {
var continent = item.continent;
return continent;
}
},
emptyTemplate: 'no result for {{query}}',
groupOrder: ["Europe", "Asia", "America"],
display: ["id"],
correlativeTemplate: true,
dropdownFilter: [{
key: 'continent',
template: '<strong>{{continent}}</strong> continent',
all: 'All Countries'
}],
multiselect: {
matchOn: ["id"],
data: function() {
var deferred = $.Deferred();
return deferred;
}
},
template: '<span>' +
'<span class="id">{{id}}</span>' +
'</span>',
source: {
groupName: {
data: data
}
},
debug: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input class="js-typeahead-input"
name="q"
type="search"
autofocus
autocomplete="on">
</span>
</div>
</div>

Related

Issues parsing JSON with JQuery/Ajax

I'm accessing an API through JQuery/JSON. I can get the entire JSON block to display on a page using the following:
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
contentType: 'application/json',
headers: {'Access-Control-Allow-Origin': '*'},
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('un:pw'));
},
error: function(jqXHR, textStatus, data){
console.log("(1)Static error message");
console.log("(2)Output of textStatus " + textStatus);
console.log("(3)Output of data " + data);
},
success: function(data) {
var myData = data;
$('#myData').html('<p>'+ myData +'<p>')
}
})
However, when I try to access a key/value from that JSON, I get undefined. I think I'm not parsing the JSON correctly. Here's an example of some code I tried inside the success function:
$.each(myData.blockOne, function(data){
$('#myData').html('<p>'+ this.blockOne.id +'<p>')
});
Here's is an example of the JSON:
[
{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [
{
"id": "ABC",
"subject": "321",
}
],
"blockTwo": [
{
"id": "EFG",
"subject": "456",
}
]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [
{
"id": "JIL",
"subject": "999",
}
],
"blockTwo": [
{
"id": "OPE",
"subject": "778",
}
]
},
]
I'm trying to output something like the following:
Item
ID: XYZ
Case: 123
Block 1:
ID: ABC
Subject: 321
Block 2:
ID: EFG
Subject: 456
Item
ID: HIJ
Case: 333
Block 1:
ID: JIL
Subject: 999
Block 2:
ID: OPE
Subject: 778
Any help is greatly appreciated.
Inside $.each(), you need to loop through myData array instead of myData.blockOne because myData.blockOne returns only the data of the blockOne object.
var myData = [{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [{
"id": "ABC",
"subject": "321",
}],
"blockTwo": [{
"id": "EFG",
"subject": "456",
}]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [{
"id": "JIL",
"subject": "999",
}],
"blockTwo": [{
"id": "OPE",
"subject": "778",
}]
},
];
var html = "";
$.each(myData, function() {
html += `
<p>Item</p>
<p>ID :${this.ItemName.id}</p>
<p>Case :+${this.ItemName.caseNumber}</p>
<p>Block 1:</p>
<ul>
<li>ID :${this.blockOne[0].id}</li>
<li>Subject :${this.blockOne[0].subject}</li>
</ul>
<p>Block 2:</p>
<ul>
<li>ID :${this.blockTwo[0].id}</li>
<li>Subject :${this.blockTwo[0].subject}</li>
</ul>
`
});
$('#myData').html(html)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myData"></div>

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

Add id to dynamically created row using bootstrap table in jquery

I am creating Bootstrap table using JSON values. I can add class dynamically to row. But i cant add ID to row when creating dynamically bootstrap table. Please find my code,
HTML:
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>
JS:
$.ajax({
type: "POST",
url: "apilist",
data: "",
success: function (response) {
if (response != null) {
var data = [];
$.each(response.Slip, function (index) {
var obj = {};
obj.SlipID = response.Slip[index].SlipID;
obj.Client = response.Slip[index].Client;
data.push(obj);
});
$('#eventsTable').bootstrapTable({
columns: [
{ field: "state", checkbox: true },
{ field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
{ field: "Client", title: 'Client', sortable: true },
],
data: data,
});
}
}
});
Please let me know the suggestions,
Thanks.
For this you can use rowAttributes for row attributes and rowStyle for row styling.
Here is below CODE SNIPPET you can check.
I hope this will help/guid you or achieve your requirement.
var data = [{
"name": "Bahrain",
"code": "BH"
}, {
"name": "Burundi",
"code": "BI"
}, {
"name": "Benin",
"code": "BJ"
}, {
"name": "Bhutan",
"code": "BT"
}, {
"name": "Jamaica",
"code": "JM"
}, {
"name": "Bouvet Island",
"code": "BV"
}, {
"name": "Botswana",
"code": "BW"
}, {
"name": "Samoa",
"code": "WS"
}, {
"name": "Bonaire, Saint Eustatius and Saba ",
"code": "BQ"
}, {
"name": "Brazil",
"code": "BR"
}];
$('#eventsTable').bootstrapTable({
columns: [{
title: "Conutry Code",
field: 'code',
sortable: true
}, {
title: "Conutry name",
field: 'name',
sortable: true
}],
data: data,
rowStyle: function(row, index) {
return {
classes: `row-border ${index%2==1?'row-even':'row-odd'}`
};
},
rowAttributes: function(row, index) {
return {
id: `x-bootstrap-row-${index+1}`
};
}
});
.row-border{
border-bottom: 1px solid #ccc;
}
.row-odd{
background-color: wheat;
}
.row-even{
background-color: whitesmoke;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

filter multiple checkbox angular

I am trying to filter my results on multiple checkboxes.
Here is my JSFIDDLE
How do i write dynamic ng-model for the checkboxes for the filter to take reflect?
function MainCtrl($scope) {
$scope.languages = [
{ name: 'persian', _id : 0 },
{ name: 'English', _id : 1 },
{ name: 'spanish', _id : 2 }
];
$scope.bu = [
{ name: 'A', _id : 1 },
{ name: 'B', _id : 2 },
{ name: 'C', _id : 3 },
{ name: 'D', _id : 4 },
{ name: 'E', _id : 5 }
];
$scope.array = [
{
"id": 910,
"language": {
"_id": "333",
"name": "Persian",
"abbreviation": "PE"
},
"business_unit": {
"_id": "2",
"name": "B"
}
},
{
"id": 909,
"language": {
"_id": "456",
"name": "English",
"abbreviation": "EN"
},
"business_unit": {
"_id": "3",
"name": "C"
}
},
{
"id": 908,
"language": {
"_id": "456",
"name": "Spanish",
"abbreviation": "SP"
},
"business_unit": {
"_id": "4",
"name": "D"
}
},
{
"id": 911,
"language": {
"_id": "343",
"name": "German",
"abbreviation": "GE"
},
"business_unit": {
"_id": "5",
"name": "E"
}
},
{
"id": 912,
"language": {
"_id": "696",
"name": "Russian",
"abbreviation": "RU"
},
"business_unit": {
"_id": "1",
"name": "A"
}
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MainCtrl">
<li ng-repeat="o in languages" ng-model="lang.language.name">
<input type="checkbox">
{{o.name}},
`</li>
<br><br><br>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="bu.business_unit.name">
{{o.name}},
`</li>
<br><br><br>
<div ng-repeat="arr in array filter : lang | filter : bu">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
<div>
You can use custom filter to achieve your goal:
custom fileter:
filter('myFilter', function() {
return function(items, search) {
var filterItems = {
search: search,
result: []
};
if (!search.needFilter) {
return items;
}
angular.forEach(items, function(value, key) {
if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) {
this.result.push(value);
}
}, filterItems);
return filterItems.result;
};
})
HTML:
<p>Search by Language:</p>
<li ng-repeat="o in languages">
<input type="checkbox" ng-model="search.language[o.name]"> {{o.name}}
</li>
<p>Search by Unit:</p>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}}
</li>
<p><b>Result:</b></p>
<div ng-repeat="arr in array | myFilter : search:false ">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
For more details see PLUNKER DEMO

How to set data-* from datasources in Select2?

I am using Select2 as follow:
$('select#fields').select2({
placeholder: 'Select a field',
data: data.fields
});
data.fields is a JSON like this one:
"fields": [
{
"id": "companies_id",
"text": "companies_id",
"data-type": "int"
},
{
"id": "parent_companies_id",
"text": "parent_companies_id",
"data-type": "int"
},
{
"id": "client_of_companies_id",
"text": "client_of_companies_id",
"data-type": "int"
},
{
"id": "asset_locations_id",
"text": "asset_locations_id",
"data-type": "int"
},
{
"id": "companies_name",
"text": "companies_name",
"data-type": "varchar"
},
{
"id": "companies_number",
"text": "companies_number",
"data-type": "varchar"
}
]
id and text are used to fill the option values, can I use the third value data-type and set it as an attribute for the <option>? If so how? Can any leave me an example?
Actually - select2 by default saves all of the attributes in the data('data') variable of the <option> element that it creates, and you can always access these values using the $(<option>).data('data'), however keep in mind that it's not the same as .data('type') for data-type="value". You need to use the complete name of the attribute.
Here is an example of how to get the value of data-type on select event:
var $example = $("#s1").select2({
data: [
{
"id": "companies_id",
"text": "companies_id",
"data-type": "int",
"data-extra": '1'
},
{
"id": "parent_companies_id",
"text": "parent_companies_id",
"data-type": "int",
"data-extra": '2'
},
{
"id": "client_of_companies_id",
"text": "client_of_companies_id",
"data-type": "int",
"data-extra": '3'
},
{
"id": "asset_locations_id",
"text": "asset_locations_id",
"data-type": "int",
"data-extra": '4'
},
{
"id": "companies_name",
"text": "companies_name",
"data-type": "varchar",
"data-extra": '5'
},
{
"id": "companies_number",
"text": "companies_number",
"data-type": "varchar",
"data-extra": '6'
}
],
}).on('select2:select', function(e) {
console.log(e.params.data['data-type'], e.params.data['data-extra']);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<select id="s1">
</select>

Categories