Two fields in jQuery-ui autocomplete dropdown - javascript

I have an object that goes like this:
[{
"suburbName": "ABBOTSBURY",
"postCode": "2176",
"state": "NSW",
"country": "AU"
}, {
"suburbName": "ABBOTSFORD",
"postCode": "2046",
"state": "NSW",
"country": "AU"
}, {
"suburbName": "ACACIA GARDENS",
"postCode": "2763",
"state": "NSW",
"country": "AU"
}/*, etc */]
Where there may be some suburbs with the same suburbName but different postCodes and states.
I'd like to stick the suburbName and postcode together somehow in the autocomplete dropdown, either by just creating a new array with a string containing suburb and postcode or by using some special function for the source.
What do you think is the best way of going about this?

source expects an array, so you can use map:
$(myElement).autocomplete({
source: dataArray.map(function(val) {
return val.suburbName + " " + val.postCode;
})
});

Related

AngularJs extracting values from JSON Object and attaching to $scope

I am receiving the following JSON data object
{
"ip": "**Removed**",
"country_code": "GB",
"country_name": "United Kingdom",
"region_code": "ENG",
"region_name": "England",
"city": "Plymouth",
"zip_code": "PL6",
"time_zone": "Europe/London",
"latitude": 50.442,
"longitude": -4.0828,
"metro_code": 0
}
How do I extract the first two values and attach them to the $scope so that they can be shown in the template when received.?
Assuming that you're getting it via http request your call would be like this:
$http.get("./getData.php").success(function(data) {
$scope.data = {};
$scope.data["ip"] = data["ip"];
$scope.data["country_code"] = data["country_code"];
}
You can set this whole object to a property on the scope in your controller:
$scope.jsonObject = jsonObject;
Then in your template, just access it like:
<span>{{jsonObject.country_code}}</span>
If I understood correctly, first store that JSON into one varaible
Var jsonData = {
"ip": "Removed",
"country_code": "GB",
"country_name": "United Kingdom",
"region_code": "ENG",
"region_name": "England",
"city": "Plymouth",
"zip_code": "PL6",
"time_zone": "Europe/London",
"latitude": 50.442,
"longitude": -4.0828,
"metro_code": 0
}
$scope.firstTwoValues = jsonData.ip+jsonData.country_cody;
For dynamic names u can use smth like this:
someDataService.get()
.then(function(res) {
var keys = Object.keys(res.data).splice(1,2);
angular.forEach(keys, function(key){
$scope[key] = res.data[key];
});
return $q.when();
}

How to replace object value based on hash table (ex. "State": "CO" changes to "State": "Colorado")

Simplified Version of Problem:
I have an object that looks like this:
var info = [{
"population": 1234,
"state": "AL"
},{
"population": 1234,
"state": "AK"
}]
I need to replace the state two letter abbreviation with the actual state name. I have this available as follows:
var stateNames = {
"AL": "Alabama",
"AK": "Alaska"
};
The goal is to have it result in this:
[{
"population": 1234,
"state": "Alabama"
},{
"population": 1234,
"state": "Alaska"
}]
I have circled this long enough that I am pretty confused. My instructions to myself go like this:
Check every info.state value to see if it matches a key within stateNames.
If it matches, replace the info.state value with that stateNames value.
If there is no match, leave it.
Return object.
Some Possibly Related Code:
I have been searching SO for possible solutions and despite putting a good bit of time, don't have too much to offer. I do think using a foreach is probably right, and I think this SO question/answer is in the right direction:
Object.keys(hashmap).forEach(function(key) {
var newkey = key + "xxx";
hashmap[newkey] = hashmap[key];
delete hashmap[key];
});
But I haven't been able to successfully adapt it. Any help or advice is very appreciated - thanks for reading!
A JS Bin:
http://jsbin.com/nojamoyeya/2/edit?js,console
You can resolve a state's full name by using its short name as the key in stateNames. Basically: stateNames[shortName] = longName. You can use Object.prototype.hasOwnProperty to check if stateNames contains a specific key. Here is one way to do it:
var info = [{
"population": 1234,
"state": "AL"
},{
"population": 1234,
"state": "AK"
}];
var stateNames = {
"AL": "Alabama",
"AK": "Alaska"
};
info.forEach(function(state) {
if(stateNames.hasOwnProperty(state.state)) {
state.state = stateNames[state.state];
}
});
info.forEach(function (item) {
if (stateName[item.state]) {
item.state = stateName[item.state];
}
}
Would be one way.
var info = [{
"population": 1234,
"state": "AL"
}, {
"population": 1234,
"state": "AK"
}];
var stateNames = {
"AL": "Alabama",
"AK": "Alaska"
};
info.forEach(function (inf) {
if(inf.state in stateNames){
inf.state = stateNames[inf.state];
}
});
console.log(info);
updated js bin is here
http://jsbin.com/julexovete/1/edit?js,console
// Code
for(var i =0; i < info.length; i++){
if(stateNames[info[i]["state"]]){
info[i]["state"] = stateNames[info[i]["state"]];
}
}

Trying to filter and combine JSON items

I have a JSON with several objects with this format:
[{
"id":14,
"friendlyName":"NameOfPlace 1",
"lat":30.402735,
"lon":-90,
"address":"1 place street",
"city":"NYC",
"state":"NY",
"zipCode":"12346",
"locationCode":"MQ00003",
"details":"in the bank"
},
{
"id":15,
"friendlyName":"NameOfPlace 2",
"lat":30.402735,
"lon":-90,
"address":"1 place street",
"city":"NYC",
"state":"NY",
"zipCode":"12346",
"locationCode":"MQ00003",
"details":"near ATM"
}]
They are locations of stores. I have several of these in a list. Some of them have names like Name 1 and Name 2, if there are 2 locations within the same building. I am trying to find a way to combine them into one object with both values but only one place ("Name" in the case of the example). I have two questions, if I have list of objects like above can I sort based off of friendlyName alphabetically then check to see if there are similar named locations that can be combined into one object. Note the locations will have the same lat long and address, just different details and ids. I can only figure out how todo it linearly and it is very slow for the mobile app I am trying to do.
You could use a hash table for the grouping of the friendly name and generate a new array with the data. If the data is different, all values are in an array included.
var data = [{ "id": 14, "friendlyName": "NameOfPlace 1", "lat": 30.402735, "lon": -90, "address": "1 place street", "city": "NYC", "state": "NY", "zipCode": "12346", "locationCode": "MQ00003", "details": "in the bank" }, { "id": 15, "friendlyName": "NameOfPlace 2", "lat": 30.402735, "lon": -90, "address": "1 place street", "city": "NYC", "state": "NY", "zipCode": "12346", "locationCode": "MQ00003", "details": "near ATM" }],
grouped = [];
data.forEach(function (o) {
var key = o.friendlyName.split(/(?= \d*$)/)[0];
if (!this[key]) {
this[key] = { Name: key };
grouped.push(this[key]);
}
Object.keys(o).forEach(function (k) {
if (!(k in this[key])) {
this[key][k] = o[k];
return;
}
if (this[key][k] === o[k]) {
return true;
}
if (Array.isArray(this[key][k])) {
this[key][k].push(o[k]);
return;
}
this[key][k] = [this[key][k], o[k]];
}, this);
}, Object.create(null));
console.log(grouped);
can I sort based off of friendlyName alphabetically
You can do it by using sort method
var sortedArray = json.sort(function(a,b){
return a.friendlyName>b.friendlyName?1:-1
})
JSFIDDLE

Adding DevExtreme Grid to Wordpress

I am trying to figure out how to add DevExtreme's grid to wordpress.
Here is an example of what I am trying to add to wordpress.
http://js.devexpress.com/Demos/WidgetsGallery/#demo/datagridgridpagingandscrollingpager/generic/light/default
I have added the scripts in the functions.php file with wp_enqueue_script, so that this will load with all the pages.
Now I am trying to figure out how to add the data part
I am now trying to figure out where I can add the code, markup and data. Each of these pieces will be different on each load.
Does anyone have any suggestions on where I can put this?
Thank you so much!
<div id="gridContainer"></div>
$("#gridContainer").dxDataGrid({
dataSource: customers,
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [5, 10, 20]
},
columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
});
and
var customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": ""
}, {
"ID": 2,
"CompanyName": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "(800) 595-3232",
"Fax": "(800) 595-3231",
"Website": ""
}]
Looks to me like you may need a custom post type or custom fields that allow you to enter and manage fields like: "CompanyName" "Address" "City" "State" "Zipcode" "Phone" "Fax" "Website"
See http://codex.wordpress.org/Post_Types
Unless those fields are associated with a post, I don't know how you can manage them, grid or otherwise!

Setting 3rd Level Nested Attribute on a Backbone Model

I'm having trouble changing the location $id on this Backbone model.
{
"approved": null,
"caption": "This is my photo!",
"created": 1393537913,
"location": {
"_id": {
"$id": 5
},
"address1": "155 West Street",
"city": "Bangkok",
"country": "THA",
"latitude": "13.136",
"longitude": "100.2068",
"postalCode": "10330",
"region": "AP"
}
}
I've tried:
model.set({"location":{"_id":{"$id": 6}}})
But that obviously overwrites the entire location object.
model.set({"location._id":{"$id":6}})
Creates a new attribute on the model, "location._id".
So, how can I dig in to the location to change that attribute?
You can do like this :
var location = model.get('location');
location._id = { "$id": 6 };

Categories