0

我正在使用 $.map 方法从 Json 获取数据。并且根据数据的类型,我正在制作元素并将数据说明的内容附加到容器中。它适用于所有浏览器,包括 ie9。但少于即 9,我什么也没得到。

我怎样才能解决这个问题?

我的代码:

var processModules = function (mData) {
    var lMData = mData;
    $.map(lMData, function (mVal,i) {
            $(mVal.type === 'form' ?  '<form></form>' : '<div></div>',{
                id : mVal.attributes.id,
                'class' : mVal.attributes['class']
            })
            .appendTo(mVal.container);    // not appending in less than ie9.  
    } )
}

$(document).ready(function () {
   $.getJSON('json.txt', function (data) {
        if($(data['modules'])){
            processModules($(data['modules']));
        }
   })   
});

我的 json :

 "modules":[
      {
         "type":"navigation",
         "container":"#header",
         "title":"Top Navigation",
         "attributes":{
            "class":"topNavigation",
            "id":"topNavigation"
         }
      },
      {
         "type":"content",
         "title":"Hi Welcome to mobile development",
         "subtitle":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "container":"#maincontent",
         "attributes":{
            "class":"topContent"
         }
      },
      {
         "type":"form",
         "title":"Registration Form",
         "action":"submit.aspx",
         "name":"registrationform",
         "container":"#maincontent",
         "attributes":{
            "class":"registrationform"
         },
         "fields":[
            {
               "id":"firstname",
               "label":"First Name",
               "name":"fname",
               "type":"text",
               "value":""
            },
            {
               "id":"email",
               "label":"Email",
               "name":"email",
               "type":"text",
               "value":""
            },
            {
               "id":"countries",
               "label":"Country",
               "name":"countries",
               "type":"select",
               "options":[
                  {
                     "value":"",
                     "text":"Select Country"
                  },
                  {
                     "value":"in",
                     "text":"India",
                      "selected":"true"
                  },
                  {
                     "value":"us",
                     "text":"United Stated"

                  },
                  {
                     "value":"uk",
                     "text":"United Kingdom"
                  },
                  {
                     "value":"cn",
                     "text":"Canada"
                  }
               ]
            },
            {
               "id":"submit",
               "name":"submit",
               "type":"submit",
               "value":"Submit"
            }
         ]
4

2 回答 2

-1

您不能class在不将其括在引号中的情况下命名对象文字属性,因为class它是 JS 中的保留字。改变:

class : mVal.attributes.class

'class' : mVal.attributes.class

其他浏览器允许它(尽管我总是有点困惑他们为什么这样做 - 如果它是一个变量,而不是一个属性,毕竟它会出错)。

通常,避免在您自己的定义中使用保留字。

于 2012-08-13T10:59:50.083 回答
-1

假设您的函数甚至被调用(而且很可能不是),您需要将class键括在引号中,以确保它不会达到保留的关键字冲突规则。

您也需要为值执行此操作:

'class': mVal.attributes['class']

使用[]语法,因为myobject.'mykey'也不是合法的语法。

您的代码中还有一个无关紧要的 jQuery 包装器:

if ($(data['modules'])) { ... }

这是错误的,因为 modules 变量是一个对象数组,而不是 DOM 元素。

我会把整个事情写成:

var processModules = function(data) {
    var lMData = data.modules || [];  // default to empty array
    $.map(lMData, function (mVal,i) {
        $(mVal.type === 'form' ?  '<form>' : '<div>', mVal.attributes);
        .appendTo(mVal.container);
    })
}

$(document).ready(function () {
   $.getJSON('json.txt', processModules);
});

请注意,我没有创建新的属性对象,因为您的 JSON 中的属性对象已经可以直接提供给$().

如果毕竟它在 IE9 中仍然不起作用,那么您需要做更多的调试并在这里让我们满意,.appendTo调用确实是使用适当的参数调用的。一个核心 jQuery 函数根本无法工作是不可想象的。

于 2012-08-13T11:01:24.063 回答