Fetch all record in the grid into an Array

Question

When click the button I want to fetch all the data's inside the grid and those data will store into an array so I can use ajax function to parse into php. But I had a loop column in the grid occLevel_. I need help how do I get all occLevel_0 -> 3 values using for loop.

Full Demo

$("#grid").kendoGrid({
  columns: [
    { field: "Name" },
    { field: "occlevel_0" },
    { field: "occlevel_1" },
    { field: "occlevel_2" },
    { field: "occlevel_3" },
  ],
  dataSource: {
   data: [{
        "Name": "John",
        "occlevel_0": 11,
        "occlevel_1": 31,
        "occlevel_2": 51,
        "occlevel_3": 61
      }, {
        "Name": "Jane",
        "occlevel_0": 12,
        "occlevel_1": 32,
        "occlevel_2": 52,
        "occlevel_3": 62
      }, {
        "Name": "James",
        "occlevel_0": 13,
        "occlevel_1": 33,
        "occlevel_2": 53,
        "occlevel_3": 63
      }],
   schema:{
    model: {
     id: "id",
    }
   }
  },
  editable: true
});


$("#fetch_allData").kendoButton();
var button = $("#fetch_allData").data("kendoButton");
button.bind("click", function(e) {
  var grid = $('#grid').data('kendoGrid').dataSource.data();
  console.log(grid);

  var items = {
    method: "updateOccLevel" //function call in php
  };
  for ( var i=0; i < grid.length; i++ ) {  
    items["Name_" + i] = grid[i]['Name'],
    items["occlvl_" + i] = grid[i]['occlevel_' + i]  // ???
  }; 
  console.log(items);


  /*$.ajax({
    url: "./updateOccLevel.php",
    type: "POST",
    data: items,
    success : function (data) {
          alert('success');
    }         
  });*/ 

});

<div id="grid"></div>
<button id='fetch_allData' >Update Grid</button>

This is the thing you want: [find in nested array](https://stackoverflow.com/questions/54857222/find-all-values-by-specific-key-in-a-deep-nested-object-javascript) — Amin Rezaie, May 04 '20 at 08:11
One thing about you is odd to me: You post questions almost weekly basis and gets lots of help from lots of people, but I never see you upvoting them... — DontVoteMeDown, May 06 '20 at 10:17
Sorry but what is the different accepting an answer and upvoting the answer? I thought both are same. well in that case will do both next time. Thanks for notify me. — dontbannedmeagain, May 06 '20 at 23:55
@dontbannedmeagain you're free to upvote whatever you like, but its encouraged if any content is useful for you, not only the accepted answer. Just saying. — DontVoteMeDown, May 07 '20 at 11:25

score 1 · Accepted Answer · answered May 04 '20 at 13:44

Just use an additional loop inside the existing loop:

for ( var i=0; i < grid.length; i++ ) {  
    items["Name_" + i] = grid[i]['Name'];

    for (let n = 0; n <= 3; n++) {
        items["occlvl_" + i + "_" + n] = grid[i]['occlevel_' + n]  // ???
    }
};

Working snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
  <button id='fetch_allData' >Update Grid</button>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "Name" },
      { field: "occlevel_0" },
      { field: "occlevel_1" },
      { field: "occlevel_2" },
      { field: "occlevel_3" },
    ],
    dataSource: {
     data: [{
          "Name": "John",
          "occlevel_0": 11,
          "occlevel_1": 31,
          "occlevel_2": 51,
          "occlevel_3": 61
        }, {
          "Name": "Jane",
          "occlevel_0": 12,
          "occlevel_1": 32,
          "occlevel_2": 52,
          "occlevel_3": 62
        }, {
          "Name": "James",
          "occlevel_0": 13,
          "occlevel_1": 33,
          "occlevel_2": 53,
          "occlevel_3": 63
        }],
     schema:{
      model: {
       id: "id",
      }
     }
    },
    editable: true
  });
  
  
$("#fetch_allData").kendoButton();
var button = $("#fetch_allData").data("kendoButton");
button.bind("click", function(e) {
    var grid = $('#grid').data('kendoGrid').dataSource.data();
  
    var items = {
      method: "updateOccLevel" //function call in php
    };
    for ( var i=0; i < grid.length; i++ ) {  
   items["Name_" + i] = grid[i]['Name'];
      
      for (let n = 0; n <= 3; n++) {
       items["occlvl_" + i + "_" + n] = grid[i]['occlevel_' + n]  // ???
      }
    }; 
   console.log(items);
  
  
});
</script>
</body>
</html>

score 0 · Answer 2 · answered May 04 '20 at 08:17

Do like this:

const myObj ={
      columns: [
        { field: "Name" },
        { field: "occlevel_0" },
        { field: "occlevel_1" },
        { field: "occlevel_2" },
        { field: "occlevel_3" },
      ],
      dataSource: {
       data: [{
            "Name": "John",
            "occlevel_0": 11,
            "occlevel_1": 31,
            "occlevel_2": 51,
            "occlevel_3": 61
          }, {
            "Name": "Jane",
            "occlevel_0": 12,
            "occlevel_1": 32,
            "occlevel_2": 52,
            "occlevel_3": 62
          }, {
            "Name": "James",
            "occlevel_0": 13,
            "occlevel_1": 33,
            "occlevel_2": 53,
            "occlevel_3": 63
          }],
       schema:{
        model: {
         id: "id",
        }
       }
      },
      editable: true
    };

idArray = []

function func(obj) {
   idArray.push(obj["occlevel_0"]);
   if (!obj.children) {
       return
   }

   obj.children.forEach(child => func(child))
}


func(myObj);
console.log(idArray);

dev_in_progress · Answer 3 · 2020-05-04T18:39:22.840

0

I'm not sure what you want, but you can loop through object properties. Extract key and value.

var data = $('#grid').getKendoGrid().dataSource.data().toJSON();

var newItems = [];

for(var i = 0; i <  data.length; i++) {
  var item = data[i];
  var newItem = {};

  for (var prop in item) {
    console.log(prop + " = " +item[prop]);
    newItem[prop] = item[prop];
  }

  newItems.push(newItem);
}

console.log(newItems);

If this is not what you want please update the question with how array should look

Example: Looping object properties

edited May 04 '20 at 18:39

answered May 04 '20 at 09:27

dev_in_progress

2,484
2
21
32

1

Just a tip: You don't need to use `JSON.parse` and `JSON.stringify` for that, there is a method called [`toJSON()`](https://docs.telerik.com/kendo-ui/api/javascript/data/observablearray/methods/tojson) which returns plain JSON objects list from a dataSourece's data, e.g. `dataSource.data().toJson()`. – DontVoteMeDown May 04 '20 at 17:20

Fetch all record in the grid into an Array

3 Answers3