Javascript class with jQuery and JSON

Question

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

Although not relevant to the problem, your data structure is weird - this.sito.nome would make more sense than this.NomeSito — Eric
– Eric, Commented Aug 8, 2013 at 23:01
What does parse/parametri.php return? Can you show an example? Why are you iterating over the data? You'll only get the last result — Eric
– Eric, Commented Aug 8, 2013 at 23:03

Eric · Accepted Answer · 2013-08-08 23:10:19Z

1

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

answered Aug 8, 2013 at 23:10

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arianna Hajar DelBen Over a year ago

I really have to sleep on this, this is working too but it's 100% new for me i love both solutions :)

bfavaretto · Accepted Answer · 2013-08-08 22:51:38Z

1

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

answered Aug 8, 2013 at 22:51

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

Arianna Hajar DelBen Over a year ago

This is doesen't work too, thank you :) i found the solution to other post, thank you really for your help

bfavaretto Over a year ago

That answer is right about the callback. The correct answer is actually a combination of that with what I said (see Eric's comment).

Zach · Accepted Answer · 2013-08-08 22:54:14Z

1

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

answered Aug 8, 2013 at 22:54

Zach

7,9503 gold badges23 silver badges26 bronze badges

4 Comments

Arianna Hajar DelBen Over a year ago

This is work perfectly, never thought about call back function i'm littlebit new on this :)

Eric Over a year ago

Note that here value == this, which is probably unintentional

Zach Over a year ago

Great, glad I could help! The other reply also makes sense in combination with this one -- you should use a different "this" object or else you might be putting those extra properties on the global ("window") object. It will work, but it's better to encapsulate. See javascript.crockford.com/private.html for the "var that = this" pattern.

Zach Over a year ago

Agreed, it would make much more sense for this to just be a function (and not call it with "new"). Then store the values on some other variable (not "this") and pass it into the callback.

Collectives™ on Stack Overflow

Javascript class with jQuery and JSON

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related