动态构建时无法访问JSON对象的属性,但静态构建时可以访问

时间:2013-03-21 15:56:45

标签: javascript jquery json

我已经在这一个小时了,我需要帮助。这有点令我困惑。在我的代码中考虑这个对象的显式设置:

工作案例


var terms={};
            terms[0]={}; 
            terms[1]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
            terms[2]={"label":"crayon","cell_src":"images/crayon.jpg","clue_type":"audio","clue_src":"/audio/car.wav"};
            terms[3]={"label":"pen","cell_src":"images/pen.jpg","clue_type":"audio","clue_src":"/audio/car.wav"};
            terms[4]={"label":"pencil","cell_src":"images/pencil.jpg","clue_src":"/audio/boat.wav"};
            terms[5]={"label":"pencil_case","cell_src":"images/pencil_case.jpg","clue_src":"/audio/train.wav"};
            terms[6]={"label":"rubber","cell_src":"images/rubber.jpg","clue_src":"/audio/taxi.wav"};
            terms[7]={"label":"ruler","cell_src":"images/ruler.jpg","clue_src":"/audio/plane.wav"};
            terms[8]={"label":"sharpener","cell_src":"images/sharpener.jpg","clue_src":"/audio/taxi.wav"}; 
           window.terms= terms;
window.terms= terms; // for using globaly 

如果我做一个console.log(window.terms [1]);我得到“包”。这就是我想要的。

不工作案例


如果不是显式定义term {}的值,而是从json文件中读取内容并将它们分配给每个枚举索引,如下所示:

var terms={};
terms[0]={};
$.getJSON('content.json', function(data){

  $.each(data,function(i){
    //terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
    terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};

  });
  window.terms=terms;   
});

如果我做一个console.log(window.terms [1]);我收到一个错误“Uncaught TypeError:无法读取未定义的属性'1'请注意,我有一个替代尝试注释掉了哪里我消除了我正在尝试的值出现奇怪的事情的可能性拉入并明确地为所有索引分配相同的静态值。这会产生同样的错误。

任何想法如何?

3 个答案:

答案 0 :(得分:1)

执行AJAX调用时,

$.getJSON不会阻止。你必须保持回调链的生效。

答案 1 :(得分:1)

$.getJSON()函数只是调用$.ajax()加载JSON文件的简写。由于AJAX调用是异步的,因此$.getJSON()的执行完成,并且在数据加载并存储到变量中之前执行任何代码。

如果您希望使用termssuccess回调函数中执行此操作,请转到$.getJSON()

如果您的代码如下所示:

var terms={};
terms[0]={};
$.getJSON('content.json', function(data){

  $.each(data,function(i){
    //terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
    terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};

  });
  window.terms=terms;   
});

// use window.terms here

然后它将无法工作,因为//使用window.terms这里部分在 AJAX调用完成之前执行。您需要将其移至单独的函数并从success回调中调用该函数:

function workWithTerms() {
    // use window.terms here
}

var terms={};
terms[0]={};
$.getJSON('content.json', function(data){

  $.each(data,function(i){
    //terms[i]={"label":"bag","cell_src":"images/bag.jpg","clue_type":"audio","clue_src":"/audio/bus.wav"};
    terms[i+1]={"label":data[i].headword,"cell_src":data[i].image,"clue_type":"audio","clue_src":data[i].audio};

  });
  window.terms=terms;   
  workWithTerms();
});

答案 2 :(得分:1)

我认为您希望将术语定义为对象数组。目前,您已将其定义为具有属性1,2,3等的对象。var terms = {}等语法表示terms是一个对象,当您指定terms[1] = {"label": "bag"}时,您说的是“该属性命名为1的对象术语是{"label": "bag"}。只需将您的术语声明更改为:

var terms = [];

另外,如果要查看其中一个对象的label属性,log语句将如下所示:

console.log(terms[2].label);