javascript - 如何从 Json 创建动态 JavaScript 对象？

Question

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

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

有什么想法吗？

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

我想访问我的一个 JavaScript 对象，该对象应该被排序到一个名为 element 的数组中。

例如，element[1]是一个对象，element[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;
    }

/* 其余信息代码会使用 OBJECTS 变量自动创建一个表单 */

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+"" );

});

Answer 1

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

此外，Ajax 是异步的:在成功函数运行之前，您的数组不会有任何元素，这可能需要任意时间。您还需要异步操作。看一下 jQuery 的 Promise 实现，它应该会为您指明正确的方向。

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.
    });