如何从Json创建动态javascript对象?

时间:2014-09-15 18:10:12

标签: javascript jquery ajax json

我不知道如何创建动态javascript对象:

我已经尝试过这段代码,但它不起作用......

任何想法?

有人告诉我“在Ajax Scope之外创建元素”......

我想访问我的一个javascript对象,它应该被分类到一个名为element的数组中。

例如,元素[1]是一个对象,元素[2]是另一个对象。

整个对象数组是使用jquery从json ajax调用构建的。

它非常适合阅读......但是我无法在程序的另一部分修改我的对象。

这不是异步问题,它似乎是像[]这样的对象名称问题。

非常感谢你的宝贵答案!我会尝试修改代码......创建对象真是令人兴奋!我的目标是用户能够同时修改几个不同的表单,每个表单都是一个对象,但我不想使用Php hi hi ...我使用我的打印功能生成表单。

这是我的代码的狙击:

/* PHASE 1*/
 $.ajax({
     type: "POST",
     url: "lectureBdd.php",
     dataType: "json",
     success: function (data) {
         //CREATE JAVASCRIPTS OBJECTS
         var element = 0;
         var element = [];
         for (var i = 0; i < data.length; i++) {
             element[i] = new Element([i], data[i].nom, data[i].
             type, data[i].photo, data[i].taille, data[i].prix);
             // OBJECTS TO SCREEN WORKS WELL INTO THE FUNCTION BUT NOT OUTSIDE
             element[i].print();
             alert(element[i].prix);

         }
     }
 });

element[2].print();  /* Impossible to modify my object*/

/* CONSTRUCTOR CLASSE "ELEMENT" */
function Element(id,txtNom,txtType,txtPhoto,txtTaille,txtPrix){
    this.id=id;
    this.nom=txtNom;
    this.type=txtType;
    this.photo=txtPhoto;
    this.taille=txtTaille;
    this.prix=txtPrix;
    this.print=affForm;
    this.modif=modifForm;
    }

/ *信息代码的其余部分自动创建一个具有对象变量的表格* /

function affForm(){

var nom= this.nom;
var id=this.id;
var divid = 'div'+id;
var savebutton= 'savebutton'+id;

/* DYNAMIC FORM CREATION: */
/* http://stackoverflow.com/questions/17431760/create-a-form-dynamically-with-jquery-     and-submit */
$("#share").append('<form action="sharer.php" method="POST">');
   $("#share").append('<div id='+divid+' style="height:100px;background-color:white"  >      <img src="images/'+this.photo+'" height=100px width=150px />');
   $("#share").append('<input type="text" placeholder="'+nom+'" name="routename"   id="rname"/>');
   $("#share").append('<input type="text" placeholder="'+this.taille+'" name="routename" id="rname"/>');
   $("#share").append('<input type="text" placeholder="'+this.prix+' Euros" id="prix" name="prix" class="address"/>');
   $("#share").append('<input type="text" placeholder="'+id+'" id="rdescription" name="routedescription" class="address"/>');
   $("#share").append('<input type="text" placeholder="tags" id="tags" name="routetags"/>');
   $("#share").append('<br><input type="submit" id="'+savebutton+'" value="Save" />');
   $("#share").append('</div>');
   $("#share").append(divid);

$( "#"+savebutton+"").click(function() {
modifForm(id);
 alert( "Handler for .click() called. savebutton"+id+"" );

});

1 个答案:

答案 0 :(得分:1)

您正在Ajax函数的成功回调中创建一个Elements数组。这不会暴露给外部作用域,因此您以后不能索引该数组(它未定义)。在你调用它的范围内声明它。

此外,Ajax是异步的:在成功函数运行之前,您的数组将不会有任何元素,这可能需要花费任何时间。你也需要异步操作。看看jQuery的promises实现,它应该指向正确的方向。

var element = [];
$.ajax({
    type: "POST",
    url: "lectureBdd.php",
    dataType: "json", 
    success: function (data) {

    for (var i=0; i < data.length; i++){
    element[i] = new Element([i],data[i].nom,data[i].type,data[i].photo,data[i].taille,data[i].prix); 
    // OBJECTS TO SCREEN WORKS WELL INTO THE FUNCTION BUT NOT OUTSIDE
    element[i].print();  
    alert(element[i].prix);

    }}})
    .done(function(){ 
        element[2].print(); // Ajax is async; you'll need to operate async, too. Using a promise here.
    });