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

Question

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: "[email protected]"
                    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: "[email protected]"
                    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: "[email protected]"
                    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"
                }

            ]

jeffjenx · Accepted Answer · 2016-04-19 21:20:32Z

1

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);
});

answered Apr 19, 2016 at 21:20

jeffjenx

17.6k6 gold badges62 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Takudzwa Mawarire Over a year ago

i tried that in no avail, i still get the same results, the problem remains, i have edited the question to consider what you have just suggested

jeffjenx Over a year ago

You moved kendofeatures out of the loop, though. You want that one in the loop so a new kendofeatures object gets created on each iteration. Otherwise you are just overwriting it every time.

Takudzwa Mawarire Over a year ago

Ohhhh, thanks. I really appreciate your help, i did not even notice that, jus reran the script and i am getting just the right result

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related