codyc4321 codyc4321 - 1 year ago 89
Ajax Question

set attribute on objects by attribute string Javascript

I have Knockout For Students book, and looking at AJAX:

self.loadUserData = function(){
$.getJSON("", function(data){

The full code looks like


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

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

<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("");


headers: {
// 'Origin': ''

self.loadUserData = function(){
$.getJSON("", function(data){
self[k] = data[k];
// self.firstName(data.firstName);
// self.lastName(data.lastName);
// self.activities(data.activities);
// self.favoriteHobby(data.favoriteHobby);

ko.applyBindings(new PersonViewModel());

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

app = Flask(__name__)

def hello():
return 'Hello, world'

def data():
data = {
'firstName': 'Cody',
'lastName': 'Childers',
'activities': [
'Web development',
'favoriteHobby': 'Golf',

return jsonify(**data)

if __name__ == "__main__":

The book and code is all working, but the
is hideous and repetitive. In python we can do this like:

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

boom, done.

Is there a Javascript equivalent to set attributes on self by string, assuming I knew the JSON keys I get are the same as attribute names I wanna set?

Knockout will require me to call attributes as a function, not set them as normal attributes (knockout calls it 'observables').

Thank you

Answer Source

You can use bracket notation and Object.keys()

$.getJSON("", 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]; 

If you want to assign only certain keys, you can use

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

Alternatively, you can also use Object.assign(), but without the possibility to exclude some keys:

$.getJSON("", function(data){
    self = Object.assign(self, data);

And for your comment, if you need to call a function (though you should add a check if the function exists before executing it):

$.getJSON("", function(data){
    Object.keys(data).forEach(function(k) {
        // you may check if the key is in the "to be transferred ones" here
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download