knockout js映射嵌套的可观察数组

时间:2012-10-24 18:34:50

标签: json knockout.js knockout-mapping-plugin

鉴于这种json结构:

{
    "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"
                }
            ]
        }
    ]
}

我想将问题和questionOptions映射到template和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"
                }
            ]
        }
    ]
}

这是我的淘汰赛映射对象的开始:

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?
};

此映射中的关键是子对象具有不同的结构(与此问题不同 - https://stackoverflow.com/a/7535397/466321)。似乎我发现的所有映射示例都没有涵盖如何完成这些示例,并且我没有尝试过我自己的几个理论。

1 个答案:

答案 0 :(得分:1)

@Jeff Mercado是对的。映射器不适用于此。为了达到你想要的目的,它需要一些递归的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);

请参阅此fiddle