CODEWITHSUNDEEP
javascriptjqueryajaxjson
user4043491
user4043491

Reputation:

How to create dynamic javascript objects from Json?

I don't know how to create dynamics javascript objects:

I've tried this code but it doesnt work...

Any Idea ?

Somebody tells me " Create the element outside the Ajax Scope " ...

I want to access one of my javascript objects, that are supposed to be sorted into an array called element.

For example, element[1] is one object, element[2] is another object.

The whole array of objects is built from a json ajax call with jquery.

It works very well for the reading ... but its not possible to modify my objects in another part of my program.

It's not asynchronous problem, it seems to be an object name problem like the [] .

Thanks a lot for your precious answers ! I'll try to modify the code... It's so exciting to create objects ! My goal is that the user is able to modify several differents forms at the same time, each form is an object but i don't wanna use Php hi hi... I generate the forms using my print function.

This is the snipe of my code :

/* 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;
    }

/* THE REST OF THE CODE FOR INFORMATION IT CREATES AUTOMATICALLY A FORM WITH THE OBJECTS VARIABLES */

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

});

Upvotes: 0

Views: 909

Answers (1)

ajm
ajm

Reputation: 20105

You're creating an Array of Elements inside of your Ajax function's success callback. That isn't exposed to the outer scope, so you can't index that array later on (it isn't defined). Declare it in the scope you're calling it from.

Also, Ajax is asynchronous: your array won't have any elements until its success function runs, which can take any amount of time. You'll need to operate asynchronously, too. Have a look at jQuery's implementation of promises, which should point you in the right direction.

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

Upvotes: 1

Related Questions