在对象上设置属性字符串Javascript
set attribute on objects by attribute string Javascript
我有Knockout For Students book,并正在查看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 -章- 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))
繁荣,做。
是否有一个Javascript等效的设置属性上的自我字符串,假设我知道我得到的JSON键是相同的属性名称,我想设置?
Knockout将要求我将属性作为函数调用,而不是将它们设置为普通属性(Knockout将其称为'observables')。
谢谢
可以使用括号符号和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]);
});
});
相关文章:
- 将DOM节点值与字符串Javascript进行比较
- 到UpperCase字符串Javascript中的特定字符索引
- 替换字符串javascript中的所有特殊字符..
- 在数组中查找某些字符串(Javascript)
- 解析特定的字符串Javascript(Node.js)
- 从字符串 JavaScript 中过滤多个正则表达式
- 在字符串 JavaScript 中使用正则表达式替换
- 忽略字符串javascript中的字符
- 如何检查url是否包含多个字符串.Javascript/jquery
- 截断字符串JavaScript
- 计算字符串javascript中的某些单词
- 从'获取本月的最后一天;2015-02-23'字符串(javascript)
- 从字符串javascript中获取键值对
- 从路径字符串 - Javascript 获取所有父路径
- 在字符串Javascript中查找丢失的字母
- AngularJS:如何使所有ng模型都是字符串.JavaScript和长整数
- 将浮点转换为至少有一个小数点的字符串(javascript)
- 替换字符串 JavaScript 中的多个文本
- 检查另一个字符串 JavaScript 中一个字符串是否有任何字符的最佳方法
- 将变量的值包含在 href 字符串 javascript 中