knockout js mapping nested observable arrays

Question

Given this json structure:

{
    "categoryID" : 1,
    "categoryName" : "Stupid Questions",
    "questions" : [{
            "question" : [{
                    "questionOptions" : [{
                            "questionOptionID" : 1,
                            "optionText" : "It's top secret."
                        }, {
                            "questionOptionID" : 2,
                            "optionText" : "Because I am big and your small. I am right and your wrong."
                        }, {
                            "questionOptionID" : 3,
                            "optionText" : "I will gladly pay you Tuesday for a hamburger today."
                        },
                    ],
                    "questionType" : "checkbox",
                    "questionText" : "Why can't we use more abstract table and column names?",
                    "summary" : "Question of the year"
                }
            ]
        }
    ]
}

I would like to map both the questions and questionOptions to template and templateOptions:

{
    "categoryID" : 1,
    "categoryName" : "Stupid Questions",
    "templates" : [{
            "template" : [{
                    "templateOptions" : [{
                            "templateOptionID" : 1,
                            "optionText" : "It is top secret."
                        }, {
                            "QuestionOptionID" : 2,
                            "OptionText" : "Because we are lazy."
                        }, {
                            "QuestionOptionID" : 3,
                            "OptionText" : "I will gladly pay you Tuesday for a hamburger today."
                        },
                    ],
                    "QuestionType" : "checkbox",
                    "QuestionText" : "Why can't we use more abstract table and column names?",
                    "Summary" : "Question of the year"
                }
            ]
        }
    ]
}

Here is the start to my knockout mapping object:

var templateMapping = {
  'templates': {
      templates: function(data) {
          return ko.utils.unwrapObservable(data.questions);
      }
  }
  //how do I map observable array of question options to observable  array of template options here?
};

The key in this mapping is that the sub objects have a different structure (unlike this question - https://stackoverflow.com/a/7535397/466321). It seems like all of the mapping examples I have found don't cover how this may get done, and I have unsuccessfully tried a couple of theories of my own.

The mapper doesn't work that way. I takes object models and makes properties observable. It's not to meant to do that. — Jeff Mercado, Oct 25 '12 at 05:52

score 1 · Accepted Answer · answered Oct 25 '12 at 09:58

@Jeff Mercado is right. The mapper is not intended for this. To accomplish what you intend, it takes a bit of recursive javascript.

function myTransform(string) {
    // case-insensitive replace
    return string.replace(/question/i,'template');
}

function transformObject(source) {
    var result = {}
    for( var key in source ) {
        if( !source.hasOwnProperty(key) ) continue;
        var value = source[key];
        var newKey = myTransform(key);
        if( Object.prototype.toString.call(value) == "[object Array]" ) {
            result[newKey] = [];
            for( var i in value ) {
                if( !value.hasOwnProperty(i) ) continue;
                result[newKey][i] = transformObject(value[i]);
            }
        }
        else if( Object.prototype.toString.call(value) == "[object Object]" ) {
            result[newKey] = transformObject(value);
        }
        else {
            result[newKey] = value;
        }
    }
    return result;
}

var wow = transformObject(json);

See this fiddle

knockout js mapping nested observable arrays

1 Answers1