Question

I’m having a lot of trouble with my javascript page.

Basically, I have a html/javascript page that gets data from a php page. I’m doing this multiple times, pushing them into the array, and then displaying the array.

Here’s a rundown of the code

    var spawnedNewspaper = [];
    var articlesToSpawn = null;

    $("#generate").click(function() {
        spawnNewspaper();
    });


    function spawnNewspaper(){

        if(itemsToSpawn==null){
            articlesToSpawn = 4;
            spawnedNewspaper = [];
        }

        if(itemsToSpawn > spawnedNewspaper.length)
            spawnAnItem();

        if(itemsToSpawn == spawnedNewspaper.length){
            itemsToSpawn = null;
            // ... display the results
        }
    }


    function spawnAnItem(nationalDexID, level, generateRandomBerry, generateRandomTMItem, generateRandomItem, knowsRandomTM, imageURL){
        $.getJSON("...url.../spawner_json.php?jsoncallback=?" , 
            {
                dataitename: data
            }
            , spawnAnArticlePart2
        );    
    }


    function  spawnAnArticlePart2(data){
        //returning from spawnAnItem callback
        p = ArticleObject(data.heading, data.date, data.author)

        spawnedNewspaper.push(p);
        spawnNewspaper();
    }


    function ArticleObject(heading, date, author){
        this.heading = heading;
        this.date = date;
        this.author = author;
        return this;
    }

So, after it’s done, it shows my array with the correct number of articles, but each article is exactly the same when I know that it’s generating unique things each time.

My thoughts are that there’s a concurrency problem and things are being overwritten (I used push() so this is odd), or that there’s a problem with my ArticleObject.

Any ideas on how to fix this?

Answer 1

Change this line:

p = ArticleObject(data.heading, data.date, data.author)

To use the new operator:

p = new ArticleObject(data.heading, data.date, data.author)

And then within your ArticleObject() function you don’t need to say return this; because this will be returned automatically when the function is called with new.

What’s happening is when you call the function with new JavaScript creates a new object that inherits from ArticleObject.prototype and within the function this points to that new instance. When you call the function without new JavaScript is setting this to window so each time your function runs it just updates the same properties on window.

For more information about using new read what MDN has to say about it.