javascript - 卡住了动态构建 JavaScript 对象

Question

我有一堆交互事件，这些事件是通过从 XML 文件读取所有参数来编写的。我们正在远离 FLASH，因此我正在编写一个脚本，它将读取我需要的 XML 元素，并动态构建一个包含所有元素及其属性的 javascript 对象。最后，我通过 JSON.stringify() 传递对象并传回 JSON 化版本。

我正在使用带有 JQUERY 的 ajax 调用以及 JS 和 JQUERY 的混合来读取 XML。我喜欢 jquery 的 DOM 选择器。

我一边学习一边学习所有这些东西，而且我不是一名开发人员，所以当我需要使用 .each() 处理一堆元素时，我遇到了困难。 。我猜它是语法问题，但我不确定。一切都工作得很好，直到需要添加“面板”，在 XML 中看起来像 +...我必须处理每个面板。

$.ajax({
    type: "GET",
    url: "activity.xml",
    dataType: "xml",
    success: function(xml) {
        var activity = {
            title : {
                text: $(xml).find('title').text(), 
                xpos: $(xml).find('title').attr('xpos'), 
                ypos: $(xml).find('title').attr('ypos')
            },
        rubric : {
                text: $(xml).find('rubric').text(), 
                xpos: $(xml).find('rubric').attr('xpos'), 
                ypos: $(xml).find('rubric').attr('ypos')
            },
        panels: {
                $(xml).find('panel').each(function() {
                    panel :{width: $(this).attr('width'), 
                    height: $(this).attr('height'), 
                    xpos: $(this).attr('xpos'), 
                    ypos: $(this).attr('ypos')
            }});// end .each()
        }// end panels object
   });//end ajax.get(xml)   

   var activity_json = JSON.stringify(activity);

我确信它不是这样做的，但我不知道应该如何。

提前致谢

Answer 1

你的问题一定出在这里

panels: {
            $(xml).find('panel').each(function() {
                panel :{width: $(this).attr('width'), 
                height: $(this).attr('height'), 
                xpos: $(this).attr('xpos'), 
                ypos: $(this).attr('ypos')
        }});// end .each()

按如下方式重写代码:

 var activity = {
        title : {
            text: $(xml).find('title').text(), 
            xpos: $(xml).find('title').attr('xpos'), 
            ypos: $(xml).find('title').attr('ypos')
        },
    rubric : {
            text: $(xml).find('rubric').text(), 
            xpos: $(xml).find('rubric').attr('xpos'), 
            ypos: $(xml).find('rubric').attr('ypos')
    },
    panels : []
 };



  $(xml).find('panel').each(function() {
           var data = {
                panel :{
                    width: $(this).attr('width')
                }, 
                height: $(this).attr('height'), 
                xpos: $(this).attr('xpos'), 
                ypos: $(this).attr('ypos')
           }
           activity.panels.push(data);
  });

编辑

您正在破坏对象文字的语法。您应该初始化一个数组并完成对象声明。然后迭代您的集合并使用适当的值填充对象的 panels 属性。

编辑

是的。我明白你的意思了。

Here是迭代 dom 元素的 fiddle 。我使用了原生 JavaScript api。我不太熟悉 jQuery2XML。