通过属性字符串Javascript在对象上设置属性答案

【问题标题】：set attribute on objects by attribute string Javascript通过属性字符串Javascript在对象上设置属性
【发布时间】：2016-11-04 21:52:07
【问题描述】：

我有 Knockout For Students 的书，正在研究 AJAX：

    self.loadUserData = function(){
        $.getJSON("http://127.0.0.1:5000/data", function(data){
            self.firstName(data.firstName);
            self.lastName(data.lastName);
            self.activities(data.activities);
            self.favoriteHobby(data.favoriteHobby);
        });
    }
}

完整代码如下

ajax-chapter-7.html:

<html lang='en'>
<head>
  <title>External data</title>
  <meta charset='utf-8' />
  <link rel='stylesheet' href='style.css' />
</head>
<body>
  <h1>External data</h1>

  <form action="#" method="post">
      <p>
          First name: <input data-bind='value: firstName' />
      </p>
      <p>
          Last name: <input data-bind='value: lastName' />
      </p>
      <div>
          Your favorite hobby:
          <select data-bind='options: activities, value: favoriteHobby'></select>
      </div>
      <p>
          <button data-bind='click: loadUserData'>Load Data</button>
      </p>
  </form>

  <script type='text/javascript' src='knockout-3.4.0.js'></script>
  <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
  <script type='text/javascript'>
    function PersonViewModel(){
        var self = this;
        self.firstName = ko.observable("");
        self.lastName = ko.observable("Johnson");
        self.activities = ko.observableArray([]);
        self.favoriteHobby = ko.observable("");

        // http://stackoverflow.com/questions/25011952/can-you-add-headers-to-getjson-in-jquery

        $.ajaxSetup({
            headers: {
                // 'Origin': 'http://example.com'
            }
        })

        self.loadUserData = function(){
            $.getJSON("http://127.0.0.1:5000/data", function(data){
                Object.keys(data).forEach(function(k){
                    alert(k);
                    alert(data[k]);
                    alert(self[k]);
                    self[k] = data[k];
                });
                // self.firstName(data.firstName);
                // self.lastName(data.lastName);
                // self.activities(data.activities);
                // self.favoriteHobby(data.favoriteHobby);
            });
        }
    }

    ko.applyBindings(new PersonViewModel());
  </script>
</body>
</html>

server.py：

from flask import Flask, jsonify
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)


@app.route('/')
def hello():
    return 'Hello, world'


# http://stackoverflow.com/questions/13081532/how-to-return-json-using-flask-web-framework
@app.route('/data')
def data():
    data = {
        'firstName': 'Cody',
        'lastName': 'Childers',
        'activities': [
            'Golf',
            'Kayaking',
            'Web development',
        ],
        'favoriteHobby': 'Golf',
    }

    return jsonify(**data)


if __name__ == "__main__":
    app.run()

这本书和代码都可以正常工作，但loadUserData 是可怕的和重复的。在 python 中，我们可以这样做：

keys = ['firstName', 'lastName', 'activities', 'favoriteHobby']
for key in keys:
    setattr(self, key, getattr(data, key))

砰，完成。

假设我知道我得到的 JSON 键与我想设置的属性名称相同，是否有一个 Javascript 等效于通过字符串在 self 上设置属性？

Knockout 将要求我将属性调用为函数，而不是将它们设置为普通属性（knockout 将其称为“可观察对象”）。

谢谢

【问题讨论】：

标签： javascript jquery python ajax knockout.js

【解决方案1】：

您可以使用括号表示法和Object.keys()

$.getJSON("http://127.0.0.1:5000/data", function(data){
    Object.keys(data).forEach(function(k) {
        // you may check if the key is in the "to be transferred ones" here
        self[k] = data[k]; 
    });
});

如果你只想分配某些键，你可以使用

var allowedKeys = ['firstName', 'lastName', 'activities', 'favoriteHobby']
$.getJSON("http://127.0.0.1:5000/data", function(data){
    Object.keys(data).forEach(function(k) {
        if (allowedKeys.indexOf(k) > -1) self[k] = data[k]; 
    });
});

或者，您也可以使用Object.assign()，但不能排除某些键：

$.getJSON("http://127.0.0.1:5000/data", function(data){
    self = Object.assign(self, data);
});

对于您的评论，如果您需要调用一个函数（尽管您应该在执行之前添加一个检查该函数是否存在）：

$.getJSON("http://127.0.0.1:5000/data", function(data){
    Object.keys(data).forEach(function(k) {
        // you may check if the key is in the "to be transferred ones" here
        self[k](data[k]); 
    });
});

【讨论】：

这是行不通的，因为 knockoutjs 中的 observables 是函数。我现在正在看
编辑了一个带有函数调用@codyc4321的版本
gerne @codyc4321 :-)