尝试使用angularjs将数据加载到handontable

时间:2015-11-25 16:37:45

标签: javascript angularjs ruby-on-rails-4 angularjs-scope handsontable

我正在尝试使用angularjs读取并加载此json响应,并尝试将数据加载到hansontable中。

正如您在控制台中看到的,日志结果显示为OK,但不在外部。你能说出发生了什么吗?因为它正在读取响应但未按预期设置范围变量。

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

result2:undefined

这是一个非常简单的阅读和显示信息。所有脚本都在CoffeeScript中。 还在服务器端使用ngHandsonTable和rails。

json回应

{
  "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代码:

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)

这是我得到的控制台日志:

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

1 个答案:

答案 0 :(得分:0)

我尝试修复使用此代码

  $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)))

但是现在它工作并且当结果不为空时设置$ scope.resultData。