Question

我有一个像这样的xml文件:(这是动态创建xml文件，类别不是静态的）

<data>
    <step id="1">
        <category id="js"></category>
        <category id="css"></category>
        <category id="xml"></category>
    </step>
    <step id="2">
        <category id="js"></category>
        <category id="css"></category>
        <category id="xml"></category>
        <category id="php"></category>
        <category id="html"></category>
    </step>
    <step id="3">
        <category id="xml"></category>
        <category id="php"></category>
        <category id="html"></category>
    </step>
</data>

我希望在javascript对象中转换xml文件，我使用jquery

$.get('data.xml', function(xml){
    var oXML = $(xml).find('data'),
        data = {};

    oXML.each(function(){
        var stepID = jQuery(this).attr('id');
        data[stepID] = {};

        jQuery(this).each(function(){
            var categoryID = jQuery(this).attr('id')
            data[stepID][categoryID] = 'is available';

        });
    });
});

结果如下所示

obj = {
1: {
    js: 'is available',
    css: 'is available',
    xml: 'is available'
},

2: {
    js: 'is available',
    css: 'is available',
    xml: 'is available',
    php: 'is available',
    html: 'is available'

},

3: {
    xml: 'is available',
    php: 'is available',
    html: 'is available'
}
}

但我希望所有步骤都包含所有类别。你知道我怎么做吗？我想要一个像这样的结果对象

obj = {
    1: {
        js: 'is available',
        css: 'is available',
        xml: 'is available',
        php: 'is not available',
        html: 'is not available'
    },

    2: {
        js: 'is available',
        css: 'is available',
        xml: 'is available',
        php: 'is available',
        html: 'is available'

    },

    3: {
        js: 'is not available',
        css: 'is not available',
        xml: 'is available',
        php: 'is available',
        html: 'is available'
    }
}

Answer 1

收集所有类别，然后枚举数据并设置缺少的类别：

$.get('data.xml', function(xml){
    var oXML = $(xml).find('data'),
        data = {},
        categories = {};

    oXML.each(function(){
        var stepID = jQuery(this).attr('id');
        data[stepID] = {};
        jQuery(this).each(function(){
            var categoryID = jQuery(this).attr('id');
            if (!categories[categoryID]) {
                categories[categoryID] = true;
            }
            data[stepID][categoryID] = 'is available';
        });
    });
    $.each(data, function (key, value) {
        $.each(categories, function (key) {
            if (value[key] === undefined) {
                value[key] = 'is not available';
            }
        });
    });
});

Answer 2

~~使用设置为“不可用”的所有属性启动对象。~~

添加后你不知道你有哪些类别我会建议这样的

$.get('data.xml', function(xml){
    var oXML = $(xml).find('data'),
        data = {};

    // create a constructor for our object. We'll add the "not available" to the prototype later
    // I create it inside your request because I assume that the process of "remembering"
    // which properties exists should not be global but just for this request
    function DataObject () {};


    oXML.each(function(){
        var stepID = jQuery(this).attr('id');
        data[stepID] = new DataObject; // use an instance of our DataObject

        jQuery(this).each(function(){
            var categoryID = jQuery(this).attr('id')
            data[stepID][categoryID] = 'is available';

            // now add this propertiy to our prototype
            // this will "add" them to all instances of DataObject
            DataObject.prototype[categoryID] = 'is not available';
        });
    });
});

要完全理解这一点，您必须了解原型的概念。每个对象都有__proto__属性。如果您访问data[0].html且对象中不，则Javascript会检查__proto__中哪些内容是对构造函数prototype的引用。由于您在原型中添加了'is not available，因此data[0].html的结果为'is not available。

Answer 3

您可以在构造对象后迭代它以填充缺少的成员：

$.each(data, function (i, ival) {
    var member = ival;
    $.each(data, function (j, jval) {
        if (jval === member) return;
        $.each(jval, function (k, kval) {
            if (typeof (member[k]) === 'undefined') {
                member[k] = 'is not available';
            }
        });
    });
});

您的最终代码如下所示：

$.get('data.xml', function(xml){
    var oXML = $(xml).find('data'),
        data = {};

    oXML.each(function(){
        var stepID = jQuery(this).attr('id');
        data[stepID] = {};

        jQuery(this).each(function(){
            var categoryID = jQuery(this).attr('id')
            data[stepID][categoryID] = 'is available';
        });
    });

    $.each(data, function (i, ival) {
        var member = ival;
        $.each(data, function (j, jval) {
            if (jval === member) return;
            $.each(jval, function (k, kval) {
                if (typeof (member[k]) === 'undefined') {
                    member[k] = 'is not available';
                }
            });
        });
    });
});

Answer 4

在解析数据时存储xml中可用的所有类别的数组：

然后，一旦解析了所有xml，您将拥有所有可用类别的完整数组，遍历主对象并查看每个元素是否包含每个类别属性：

var oXML = $(xml).find('step'),
        data = {},
    cats_array=[];

    oXML.each(function(){

        var stepID = jQuery(this).attr('id');      
        data[stepID] = {};
        jQuery(this).find('category').each(function(){                    
            var categoryID = jQuery(this).attr('id');
          /* add category to array if doesn't already exist*/
           if( $.inArray( categoryID, cats_array) ==-1){
           cats_array.push( categoryID);
        }
            data[stepID][categoryID] = 'is available';

        });
    });
/* all categories now in array, loop over main object and if category doesn't exist add it*/
$.each(data, function(){
    for( i=0;i< cats_array.length; i++){
        if( ! this[cats_array[i]] ){
           this[cats_array[i]] ="not available";
        }
     }

})

工作演示：http://jsfiddle.net/MYXNh/2/

使用jquery将xml转换为object

4 个答案: