How to create dynamic javascript objects from Json?

Question

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

});

several problems. var element is in a closure and not accessible at second print . Also AJAX is asynchronous so even fixing first scope problem, elements don't exist yet when you try 2nd print — charlietfl
– charlietfl, Commented Sep 15, 2014 at 18:15
What they mean by 'outside the ajax scope' is to make a global variable and store it there. That way other methods/namespaces can access it. Put element = []; outside your ajax function and remove all var element = .. (See answer below) — below9k
– below9k, Commented Sep 15, 2014 at 18:16

ajm · Accepted Answer · 2014-09-15 18:16:51Z

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

Collectives™ on Stack Overflow

How to create dynamic javascript objects from Json?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related