读取从 API REST 返回的 JSON 对象

Question

我觉得问这个问题很愚蠢，但我就像 3 天前一样......我构建了一个 php api rest，它返回一个 json 编码信息。 api返回的json是正确的，是这样的：

[
    {"pk_user":"1","name":"George","surname":"Littlewolf","profile":"Game designer - Developer"},
    {"pk_user":"2","name":"Anne","surname":"Carpenter","profile":"Developer"},
    {"pk_user":"3","name":"John","surname":"Sullivan","profile":"Designer"},
    {"pk_user":"4","name":"Judith","surname":"Lenders","profile":"Developer"},
    {"pk_user":"5","name":"Jason","surname":"Middleton","profile":"Manager"}
]

之后，我正在创建一个主干前端来攻击 api。我只开发了一个视图，它读取我上面写的 json。我有一个 model (User) 和一个 Collection (Users) 我想保存从 json info 读取的信息。

我只放视图的渲染函数的代码：

render: function() {
    var users = new Users();
    users.fetch();
    $.each(users['models'], function(i, item) {
        console.log(item);
    });


    this.template = _.template(template, {users : users});
    this.$el.html(this.template);
    return this;
}

现在，控制台只返回您在下一张图片中看到的内容：

我想直接访问这些项目，但我不知道为什么，但我尝试过的所有方法都不起作用......谢谢并原谅我的新手解释...... 编辑

我已经 uploaded the code to a hosting 给所有想“现场”看到问题的人。

Answer 1

fetch 是一个 AJAX 调用，因此：

users.fetch();

不会立即填充集合，它必须等待服务器响应。因此，当您查看 users.models 时，那里什么都没有，您的视图最终什么也没做。

通常的方法是侦听来自users 的事件并呈现HTML 以响应这些事件：

initialize: function() {
    this.collection = new Users;
    this.listenTo(this.collection, 'reset', this.render);
    // bind to other events as needed...
    this.users.fetch({ reset: true });
},
render: function() {
    this.collection.each(function(user) {
        // render the `user` model in here...
    });
}

注意切换到this.collection.each，而不是直接使用集合的models 属性。

或者，在您调用 fetch 时使用成功处理程序：

this.users.fetch({
    success: function(collection) {
        collection.each(function(user) {
            // render the `user` model in here...
        });
    }
});

Answer 2

不确定是否是您想要的，但如果您想记录用户的属性，请执行以下操作：

$.each(users['models'], function(i, item) {
    console.log(item.attributes);
});