Uncaught Each data element must implement a unique 'id' property--- ../slick.model.js

Question

When I bind Json data to slickgrid using ajax call it works but when I bind using dataview it shows "Title" error Here is my code can any one help me

Edit:When I remove setItem(slickdata) grid is displayed but data is not populated and this my json data format

[{ "empid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
{ "empid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }]



    var jqxhr = $.getJSON('http://localhost:50305/Service1.svc/json/Projects', function (data) {
                    for (var i = 0; i < data.length; i++) {
                    slickdata[i] = {
                    empid: data[i].empid,
                    fname: data[i].fname,
                    lname: data[i].lname
                    };
                    }
                    dataView.beginUpdate();
                    dataView.setItems(slickdata);
                    dataView.endUpdate();
                    grid = new Slick.Grid("#teamGrid", dataView, columns, options);

                    dataView.onRowCountChanged.subscribe(function (e, args) {
                    grid.updateRowCount();
                    grid.render();
                    });

                    dataView.onRowsChanged.subscribe(function (e, args) {
                    grid.invalidateRows(args.rows);
                    grid.render();
                    });


                    })
                    .done(function () {
                    console.log("second success");
                    })
                    .fail(function () {
                    alert("fail");
                    console.log("error");
                    })
                    .always(function () {
                    console.log("complete");
                    });

Answer 1

I need to use setItems(slickdata,"UniqueId")

Answer 2

Cannot debug the implement Unique Id Property! 




    var dataView;
    var grid;
    var data;
    var options = {
    forceFitColumns: true,
    enableColumnReorder: false,
    autoExpandColumns: true
    };

    var columns = [{
    id: "userId",
    name: "User Id",
    field: "userId",
    resizable: false,
    sortable: false,
    minWidth: 100,
    maxWidth: 200
    }, {
    id: "id",
    name: "Id",
    field: "id",
    resizable: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 200
    }, {
    id: "title",
    name: "Title",
    field: "title",
    resizable: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 200
    }, {
    id: "completed",
    name: "Completed",
    field: "completed",
    resizable: false,
    sortable: false,
    minWidth: 200,
    maxWidth: 200
    }];

    $.ajax({
    url: 'http://jsonplaceholder.typicode.com/todos/',
    async: false,
    success: function (response) {
        data = JSON.stringify(response);
        console.log("received data " + JSON.stringify(response));
    },
    error: function () {
        console.log("error while getting data");
    }
    });

    dataView = new Slick.Data.DataView();

    dataView.beginUpdate();
    dataView.setItems(data, "id");
    dataView.endUpdate();


    grid = new Slick.Grid('#slickGrid', dataView, columns, options);

    // Make the grid respond to DataView change events.

    dataView.onRowCountChanged.subscribe(function (e, args) {
    alert("1");
    grid.updateRowCount();
    grid.render();
    });


    dataView.onRowsChanged.subscribe(function (e, args) {
    alert("2");
    grid.invalidateRows(args.rows);
    grid.render();
    });

JSFIDDLE HERE