Search code examples
javascriptangularjsruby-on-rails-4angularjs-scopehandsontable

Trying to load data into a handsontable using angularjs


I am trying to read and load this json response using angularjs and try to load the data into an hansontable.

As you can see in the console log result reads OK, but not outside. Can you tell what is going on? because it is reading the response but is not setting the scope variable as expected.

result1: {"$$state":{"status":0}}

result2: undefined

This is a very simple read and show info. All the script is in CoffeeScript. Also using ngHandsonTable and rails on serverside.

json response

{
  "sEcho": 0,
  "iTotalRecords": 15445,
  "iTotalDisplayRecords": 15445,
  "aaData": [
    {
      "matricula": "12-0004",
      "semestre": "1",
      "materia": "TENGUA ESPAÑOLA",
      "ev1": 74,
      "ev2": 88,
      "ev3": 88,
      "ev4": 90,
      "examen": 70,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "2",
      "materia": "TENGUA ESPAÑOLA",
      "ev1": 82,
      "ev2": 80,
      "ev3": 83,
      "ev4": 80,
      "examen": 86,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "1",
      "materia": "TIOLOGIA",
      "ev1": 83,
      "ev2": 86,
      "ev3": 87,
      "ev4": 86,
      "examen": 61,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "2",
      "materia": "TIOLOGIA",
      "ev1": 75,
      "ev2": 85,
      "ev3": 80,
      "ev4": 86,
      "examen": 64,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "1",
      "materia": "TDUCACION FISICA",
      "ev1": 91,
      "ev2": 87,
      "ev3": 95,
      "ev4": 94,
      "examen": 81,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "2",
      "materia": "TDUCACION FISICA",
      "ev1": 86,
      "ev2": 84,
      "ev3": 83,
      "ev4": 85,
      "examen": 56,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "1",
      "materia": "TDUCACION ARTISTICA",
      "ev1": 83,
      "ev2": 83,
      "ev3": 85,
      "ev4": 86,
      "examen": 80,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "2",
      "materia": "TDUCACION ARTISTICA",
      "ev1": 76,
      "ev2": 81,
      "ev3": 78,
      "ev4": 83,
      "examen": 67,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "1",
      "materia": "TNGLES",
      "ev1": 87,
      "ev2": 83,
      "ev3": 86,
      "ev4": 90,
      "examen": 89,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    },
    {
      "matricula": "12-0004",
      "semestre": "2",
      "materia": "TNGLES",
      "ev1": 75,
      "ev2": 92,
      "ev3": 85,
      "ev4": 90,
      "examen": 66,
      "completivo": null,
      "extra": null,
      "esp": null,
      "esp2": null
    }
  ]
}

Angularjs code:

app = angular.module("Grades", ['ngResource', 'ngHandsontable'])

app.factory "Ano_escolar", ["$resource", ($resource) ->
  $resource("/anoescolars.json")
]
app.factory "Materia", ["$resource", ($resource) ->
  $resource("/materia.json")
]
app.factory "Curso", ["$resource", ($resource) ->
  $resource("/cursos.json")
]
app.factory "Seccion", ["$resource", ($resource) ->
  $resource("/seccions.json")
]

app.factory "Notas", ["$resource", ($resource) ->
  $resource("/grades/index.json", {ano_escolar: "@ano_escolar", materia: "@materia", semestre: "@semestre", curso: "@curso", seccion: "@seccion", tanda: "@tanda"}, 'query': {isArray: false})
]

@GradesCtrl = ["$scope","$resource", "Ano_escolar", "Materia", "Curso", "Seccion", "Notas", ($scope, $resource, Ano_escolar, Materia, Curso, Seccion, Notas) ->
  $scope.ano_escolares = Ano_escolar.query()
  $scope.materias = Materia.query()
  $scope.cursos = Curso.query()
  $scope.seccion = Seccion.query()

  $scope.ano_escolar = ""
  $scope.materia = ""
  $scope.semestre = "1"
  $scope.curso = ""
  $scope.seccion = ""
  $scope.tanda = "M"

#  $scope.searchGrades = $resource("/grades/index.json", {ano_escolar: "@ano_escolar", materia: "@materia", semestre: "@semestre", curso: "@curso", seccion: #"@seccion", tanda: "@tanda"}, 'query': {isArray: false})
  $scope.searchGrades = Notas.get({ano_escolar: $scope.ano_escolar, materia: $scope.materia, semestre: $scope.semestre, curso: $scope.curso, seccion:$scope.seccion, tanda: $scope.tanda}).$promise.then( (result) -> 
        $scope.resultData = result
        console.log('result: ' + JSON.stringify($scope.resultData))
        JSON.stringify(result))

  console.log('result1: ' + JSON.stringify($scope.searchGrades))
  console.log('result2: ' + JSON.stringify($scope.resultData))

  $scope.colHeaders = true;

  $scope.saveGrades = ->

  $scope.afterChange = ->

]

app.controller("GradesCtrl", GradesCtrl)

and this is the console log I got:

result1: {"$$state":{"status":0}} index2.self-26ab4d630524deb977921be4b858f4e1c054fbbc935a8ab79cd724794c221090.js:71:1
result2: undefined index2.self-26ab4d630524deb977921be4b858f4e1c054fbbc935a8ab79cd724794c221090.js:72:1
window.controllers is deprecated. Do not use it for UA detection. nsHeaderInfo.js:412:0
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery-min.js:3:0
result: {"sEcho":0,"iTotalRecords":15445,"iTotalDisplayRecords":15445,"aaData":[{"matricula":"12-0004","semestre":"1","materia":"TENGUA ESPAÑOLA","ev1":74,"ev2":88,"ev3":88,"ev4":90,"examen":70,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"2","materia":"TENGUA ESPAÑOLA","ev1":82,"ev2":80,"ev3":83,"ev4":80,"examen":86,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"1","materia":"TIOLOGIA","ev1":83,"ev2":86,"ev3":87,"ev4":86,"examen":61,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"2","materia":"TIOLOGIA","ev1":75,"ev2":85,"ev3":80,"ev4":86,"examen":64,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"1","materia":"TDUCACION FISICA","ev1":91,"ev2":87,"ev3":95,"ev4":94,"examen":81,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"2","materia":"TDUCACION FISICA","ev1":86,"ev2":84,"ev3":83,"ev4":85,"examen":56,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"1","materia":"TDUCACION ARTISTICA","ev1":83,"ev2":83,"ev3":85,"ev4":86,"examen":80,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"2","materia":"TDUCACION ARTISTICA","ev1":76,"ev2":81,"ev3":78,"ev4":83,"examen":67,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"1","materia":"TNGLES","ev1":87,"ev2":83,"ev3":86,"ev4":90,"examen":89,"completivo":null,"extra":null,"esp":null,"esp2":null},{"matricula":"12-0004","semestre":"2","materia":"TNGLES","ev1":75,"ev2":92,"ev3":85,"ev4":90,"examen":66,"completivo":null,"extra":null,"esp":null,"esp2":null}]} index2.self-26ab4d630524deb977921be4b858f4e1c054fbbc935a8ab79cd724794c221090.js:68:1
Error: too much recursion
objectEach@http://localhost:3000/assets/handsontable/handsontable.self-894da499cadf1f87fa9b83b133201a4bc3457ef4749d5f6f9a2d5f0824c40e80.js?body=1:9736:12

Solution

  • I try to fixed using this code

      $scope.searchGrades = -> Notas.get({ano_escolar: $scope.ano_escolar, materia: $scope.materia, semestre: $scope.semestre, curso: $scope.curso, seccion:$scope.seccion, tanda: $scope.tanda}).$promise.then( (result) -> 
            $scope.resultData = result.aaData
            console.log('resultData: ' + JSON.stringify(result)))
    

    but now it working and set $scope.resultData when result is not empty.