CODEWITHSUNDEEP
javascriptjqueryjsonclass
Arianna Hajar DelBen
Arianna Hajar DelBen

Reputation: 53

Javascript class with jQuery and JSON

i'm creating a function that i wanna use as class on javascript. My function, will call an JSON page create with php parse json, and set the vars, but it doesen't work. May you can give me some hints? Here's the code, thx in advance:

function SiteParams(){
    $.getJSON("parse/parametri.php",function(data){
        $.each(data,function(index,value){
            this.NomeSito = value.nomesito;
            this.URLSito = value.urlsito;
            this.EmailAutore = value.email;
            this.NomeAutore = value.nomeautore;
        });
    });
}
var website = new SiteParams();
function ModuleBase(){
    $("<div/>",{id:"title", text:website.NomeSito}).appendTo("#main");
}

Upvotes: 0

Views: 757

Answers (3)

Eric
Eric

Reputation: 97601

This is a good place to use $.Deferred

function SiteParams(){
    // create a private deferred, and expose the promise:
    var d = new $.Deferred();
    this.load = d.promise();

    var that = this;
    $.getJSON("parse/parametri.php", function(data) {
        // your $.each only used one value anyway
        var value = data[0];

        // copy the data across
        that.NomeSito = value.nomesito;
        that.URLSito = value.urlsito;
        that.EmailAutore = value.email;
        that.NomeAutore = value.nomeautore;

        // resolve the promise
        d.resolve();
    });
}

var s = new SiteParams();
s.load.done(function() {
    $("<div/>", {id:"title", text: s.NomeSito}).appendTo("#main");
});

Upvotes: 1

Zach
Zach

Reputation: 7930

getJSON is asynchronous, so you need to pass a callback function. Try this:

function SiteParams(cb){
    $.getJSON("parse/parametri.php",function(data){
        $.each(data,function(index,value){
            this.NomeSito = value.nomesito;
            this.URLSito = value.urlsito;
            this.EmailAutore = value.email;
            this.NomeAutore = value.nomeautore;
            cb(this);
        });
    });
}
new SiteParams(ModuleBase);
function ModuleBase(website){
    $("<div/>",{id:"title", text:website.NomeSito}).appendTo("#main");
}

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71918

You have the wrong this inside the callback to $.each (and the callback to getJSON). Try that:

function SiteParams(){
    var that = this;
    $.getJSON("parse/parametri.php",function(data){
        $.each(data,function(index,value){
            that.NomeSito = value.nomesito;
            that.URLSito = value.urlsito;
            that.EmailAutore = value.email;
            that.NomeAutore = value.nomeautore;
        });
    });
}

Note that it doesn't make much sense to loop with each if your response only contains a single object. And if it contained multiple objects, every object would overwrite the previous. So, if your response is really an array with a single item inside, you can simple use this:

function SiteParams(){
    var that = this;
    $.getJSON("parse/parametri.php",function(data){
        that.NomeSito = data[0].nomesito;
        that.URLSito = data[0].urlsito;
        that.EmailAutore = data[0].email;
        that.NomeAutore = data[0].nomeautore;
    });
}

Upvotes: 1

Related Questions