KnockoutJs 没有循环通过我的可观察数组答案

【问题标题】：KnockoutJs not looping through my observable arrayKnockoutJs 没有循环通过我的可观察数组
【发布时间】：2019-12-09 13:05:08
【问题描述】：

我的问题

我正在尝试通过循环访问从服务器获取的 JSON 来填充表格。这是显示给我的内容：

截图

JSON

{
    "users": [
        {
            "id": "123",
            "firstName": "john",
            "lastName" : "Smith",
            "email":"jmith@gmail.com",
            "phone":"800-555-1212",
            "role":"Admin"
        },
        {
            "id": "678",
            "firstName": "Mike",
            "lastName" : "Brown",
            "email":"mbrown@gmail.com",
            "phone":"800-777-1212",
            "role":"Admin"
        }

    ]
}

我已经按照 Knockoutjs.com 上关于这个 foreach 语句的教程进行操作，但仍然没有得到它们显示的结果。

这里的这个网络表单告诉我我的问题中有太多代码，所以这里是有问题的页面的链接，所以你可以看到我的表格 HTML：

链接到在线页面 http://johntesting.azurewebsites.net/knockout/users-list.html

我的视图模型 这是有问题的视图模型：


  /* CLASS User 
   * @param  id             int     unique id project

   */
  var User = function(id, firstName, lastName, username, email, password, phone, role) {

    this.id            = ko.observable(id);
    this.firstName     = ko.observable(firstName);
    this.lastName      = ko.observable(lastName);
    this.username      = ko.observable(username);
    this.email         = ko.observable(email);
    this.password      = ko.observable(password);
    this.phone         = ko.observable(phone);
    this.role          = ko.observable(role);

  };

// User View Model
var UserViewModel = function () {

    self = this;

    /* Constants */


    /* Observables */
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.userName = ko.observable();
    self.email = ko.observable();
    self.password = ko.observable();
    self.confirmPassword = ko.observable();
    self.phone = ko.observable();
    self.role = ko.observable();



    /* Observable Arrays */
    self.users = ko.observableArray();

    /* Computed Observables */
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    }, self);

    /* Methods */

    self.init = function () {
        self.getAllUsers();
        console.dir(self.users());
    }

    /* Get All Users */
    self.getAllUsers = function() {
        $.getJSON(Evolve.apiBaseUrl, function (data) {
            $.each(data, function (i, users) { 
                self.users.push( new User(
                    users.id,
                    users.firstName,
                    users.lastName,
                    users.username,
                    users.email,
                    users.phone,
                    users.role
                ) ); 
            });

        })
    }



    self.init();



}; // End View Model


ko.applyBindings(new UserViewModel());

谁能帮我弄清楚为什么不显示？

谢谢。

【问题讨论】：

标签： javascript arrays knockout.js javascript-objects

【解决方案1】：

经过反复试验，我自己找到了答案：

这与我创建对象的方式有关。对于那些可能需要这个答案的人，这是我使用的：

 self.getAllUsers = function() {
        $.getJSON( "./js/json/index.json", function( data ) {
            //JSON EXPECTS id, firstName, lastName, username, email, password, phone, role;
            $.each( data.users, function( key, val ) {
              self.evolveUsers.push( new User( val.id, val.firstName, val.lastName, val.userName, val.email, val.password, val.phone, val.role));
            });

          });
    }

然后是传统的 foreach 在我的 HTML 中工作。

【讨论】：