Takudzwa Mawarire Takudzwa Mawarire - 7 months ago 11
Javascript Question

how to create an array of objects from an $.each loop in jquery

Hie, i am trying to create a geojson object from an array of objects. I am using a

$.each()
to iterate through the array and trying to return an array of the object i named kendofeatures (a geojson object) something like this:

kendofeatures.type = "Feature";
kendofeatures.properties = {
"id": _id,
"Id": _id,
"FaultType": _faulttype,
"EntryGUID": _entryguid,
"Date": _datcaptured,
"Status": _status,
"Area": _area,
"Zone": _zones,
"Latitude": _latutude,
"Longitude": _longitude,
"Comments": _comments,
"User": _fullname,
"UserID": _idnumber,
"UserPhone": _phonenumber,
"UserMail": _email
};
kendofeatures.geometry = {
"type": "Point",
"coordinates": [
_latutude,
_longitude
]
};


the code i am using looks something like this:

function displayFilterResults() {
var kendofeatures = {};
var dataSource = $("#grid").data("kendoGrid").dataSource;
console.log(dataSource);
// TODO:Gets the filter from the dataSource
var filters = dataSource.filter();
console.log(filters);
// TODO:Gets the full set of data from the data source
var allData = dataSource.data();
console.log(allData);
// TODO:Applies the filter to the data
var query = new kendo.data.Query(allData);
console.log(query);
var filteredData = query.filter(filters).data;
console.log(filteredData);
var geoJsonObject = {
"type": "FeatureCollection",
"features": []
};
$(filteredData).each(function (index, item) {

var _area = item.Area;
var _email = item.C_Email;
var _fullname = item.C_FullName;
var _idnumber = item.C_IDNumber;
var _phonenumber = item.C_MobileNumber;
var _comments = item.Comments;
var _datcaptured = item.DateTimeCaptured;
var _faulttype = item.FaultType;
var _id = item.Id;
var _entryguid = item.RecordID;
var _reportedvia = item.ReportedVia;
var _status = item.Responce;
var _latutude = item.XCoordinate;
var _longitude = item.YCoordinate;
var _zones = item.Zone;

kendofeatures.type = "Feature";
kendofeatures.properties = {
"id": _id,
"Id": _id,
"FaultType": _faulttype,
"EntryGUID": _entryguid,
"Date": _datcaptured,
"Status": _status,
"Area": _area,
"Zone": _zones,
"Latitude": _latutude,
"Longitude": _longitude,
"Comments": _comments,
"User": _fullname,
"UserID": _idnumber,
"UserPhone": _phonenumber,
"UserMail": _email
};
kendofeatures.geometry = {
"type": "Point",
"coordinates": [
_latutude,
_longitude
]
};
console.log(kendofeatures);
geoJsonObject.features.push(kendofeatures);

});
console.log(geoJsonObject);


}

Instead of an array with distinct objects properties in
filteredData
,
featureCollection
is resulting in an array of the same object with the same properties, geometry etc.
My Question is how do i return the desired
featureCollection
. so that my
geoJsonObject
can look something like:

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": 1,
"Id": 1,
"FaultType": "Sewer Burst",
"EntryGUID": "0ectey-yu78ee7e-01",
"Date": "2016/04/01",
"Status": "Assigned",
"Area": "Senga",
"Zone": "Residential",
"geometry": {
"type": "Point",
"coordinates": [
24.960937499999996,
11.178401873711785
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
30.585937499999996,
-19.642587534013032
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"Id": 2,
"FaultType": "Water Burst",
"EntryGUID": "0ectey-yu78yre7e-01",
"Date": "2016/02/01",
"Status": "Closed",
"Area": "CBD",
"Zone": "CBD",
},
"geometry": {
"type": "Point",
"coordinates": [
24.43359375,
-9.535748998133627
]
}
},
{
"type": "Feature",
"properties": {
"id": 3,
"Id": 3,
"FaultType": "Pot Hole",
"EntryGUID": "07yye54y-yu78ee7e-01",
"Date": "2016/03/21",
"Status": "Unassigned",
"Area": "Riverside",
"Zone": "Residential",
},
"geometry": {
"type": "Point",
"coordinates": [
45.439453125,
-17.476432197195518
]
}
}
]
}


filteredData
looks like this:

[
{
Area: "Senga"
C_Email: "tkmawarire@live.com"
C_FullName: "Takudzwa Kain Mawarire"
C_IDNumber: "29-279485 B 27"
C_MobileNumber: "+263779960053"
Comments: "Main hole burst near the far end"
DateTimeCaptured: Fri Apr 15 2016 01: 14: 40 GMT + 0200(South Africa Standard Time)
FaultType: "Sewer Burst"
Id: 1
RecordID: "a63c8656-437c-4d7a-9fe3-dad5edf73e08"
ReportedVia: "Web Application"
Responce: "Assigned"
XCoordinate: 29.8395538
YCoordinate:
-19.51572
Zone: "Institution"
},
{
Area: "Senga"
C_Email: "tkmawarire@live.com"
C_FullName: "Takudzwa Kain Mawarire"
C_IDNumber: "29-279485 B 27"
C_MobileNumber: "+263779960053"
Comments: "Sewer burst near football pitch"
DateTimeCaptured: Fri Apr 15 2016 23: 58: 40 GMT + 0200(South Africa Standard Time)
FaultType: "Sewer Burst"
Id: 2
RecordID: "c776808c-3f09-4221-99e6-11a44bcec692"
ReportedVia: "Web Application"
Responce: "Unassigned"
XCoordinate: 29.8392315
YCoordinate:
-19.5195084
Zone: "Institution"
}, {
Area: "Senga"
C_Email: "tkmawarire@live.com"
C_FullName: "Takudzwa Kain Mawarire"
C_IDNumber: "29-279485 B 27"
C_MobileNumber: "+263779960053"
Comments: "Water bleading from the ground"
DateTimeCaptured: Sat Apr 16 2016 01: 18: 08 GMT + 0200(South Africa Standard Time)
FaultType: "Water Pipe Burst"
Id: 7
RecordID: "aff0ece0-b084-4031-8cc8-43ca66f6adb5"
ReportedVia: "Web Application"
Responce: "Closed"
XCoordinate: 29.8388252
YCoordinate:
-19.5002327
Zone: "Institution"
}

]

Answer

Move featureCollection = []; outside of the each loop. You want to start with a blank array before the loop and then push an object onto that array during an iteration.

var featureCollection = [];

$(filteredData).each(function(index, item) {
  var kendofeatures = {}; 
  // ...
  featureCollection.push(kendofeatures);
});

var geoJsonObject = {
  "type": "FeatureCollection",
  "features": featureCollection
};

Or, define your geoJsonObject first and use that in the loop directly:

var geoJsonObject = {
  "type": "FeatureCollection",
  "features": []
};

$(filteredData).each(function(index, item) {
  var kendofeatures = {}; 
  // ...
  geoJsonObject.features.push(kendofeatures);
});
Comments