Building a bounty hunter list script

[Boy_Wonder]

Again only used on custom pages - so I know not a plugin but I know not else where to place this!


function LandBounty (name, image, wantedLevel, reward) {
this.name = name;
this.image = image;
this.wantedLevel = wantedLevel;
this.reward = reward;
}

function NavalBounty (name, image, wantedLevel, reward) {
this.name = name;
this.image = image;
this.wantedLevel = wantedLevel;
this.reward = reward;
}

LandBounty.prototype.toHTML = function(question) {
   var htmlString = question;
   return htmlString;
};

function LandOutput (){
this.landList = [ ];
}
LandOutput.prototype.add = function(newlandList) {
   this.landList.push(newlandList);
};


var landBountyList = new LandOutput ();

var bountyland = new LandBounty ("TestymcGee","http://placehold.it/128x128","2","£5000");
var bountyland2 = new LandBounty ("TestyMcCreed","http://placehold.it/128x128","1","£1000");

var bountyNaval = new NavalBounty ("TestymcGee","http://placehold.it/128x128","2","£6500");
var bountyNaval2 = new NavalBounty ("TestyMcCreed","http://placehold.it/128x128","1","£2000");

landBountyList.add(bountyland);
landBountyList.add(bountyland2);

console.log(landList.length)


This is so far with my testingness -

I'm TRYING to push the information into an array for for looping through, apparently my mind is struggling to make this work. Doing more work on it but if anyone can push me in the right direction

[Quozzo]

Did you check the console? You will see that landList is not defined. It is not in the global scope. I'ts not in any scope. It's a property of an object you are inserting into the add method of landBountyList. It can be accessed in the add method. It can also be accessed by specifying the object and property in the global scope.

bountyland.landList.length


Oh and I just have to say; You know LandBounty and NavalBounty are the same? You could just use one and call it bounty

[Boy_Wonder]

I need to call two them eventually to two seperate lists

[Boy_Wonder]

Still getting "Cannot read property 'length' of undefined'

However when I load the function in and type in 'landBountyList' it then tells me it has an array of two

$( document ).ready(function() {



function Bounty (name, image, wantedLevel, reward) {

this.name = name;

this.image = image;

this.wantedLevel = wantedLevel;

this.reward = reward;

}







function Output (){

this.Listing = [ ];

}

Output.prototype.add = function(newList) {

   this.Listing.push(newList);

};





var landBountyList = new Output ();



var bountyland = new Bounty ("TestymcGee","http://placehold.it/128x128","2","£5000");

var bountyland2 = new Bounty ("TestyMcCreed","http://placehold.it/128x128","1","£1000");



var bountyNaval = new Bounty ("TestymcGee","http://placehold.it/128x128","2","£6500");

var bountyNaval2 = new Bounty ("TestyMcCreed","http://placehold.it/128x128","1","£2000");



landBountyList.add(bountyland);

landBountyList.add(bountyland2);



var htmlStringLand;



for(i = 0; i < landBountyList.length; i++) {

htmlStringLand = '<div class="box wanted"><span class="has-text-centered">';

htmlStringLand += name;

htmlStringLand += '</span><br /><p class="is-128"><img src="';

htmlStringLand += image;

htmlStringLand += '" /></p> <br /><strong>Wanted Level</strong> ';

htmlStringLand += wantedLevel;

htmlStringLand += '<br /><strong>Reward</strong>';

htmlStringLand += reward;

}



$("#land-bountys").append(htmlStringLand);



});

Updated list...that's showing no errors but not outputting me anything either

[Quozzo]

landBountyList is not an array. It's an object that has inherited from Output. Output has the property that you are looking for, which is inherited to landBountyList. The array you are looking for is a property on landBountyList.

[Boy_Wonder]

Okay so would I be using output.length?

[Quozzo]

I don't think you know what a property is. It is a "variable" on an object. You are assigning the Listing property onto the objects that you create, due to prototypal inheritance. So you need to read the Listing property on that variable. You had the right variable in your example, you just were not accessing the Listing property from that object.

Then there's the HTML inside the loop itself. There is no name, image etc variable. They are all properties of the objects inside the array you're trying to access. you need to access the property of the objects.

[Boy_Wonder]

Okay so let me get this straight - LandBountyList is a property? Or a method?

Listing counts as a variable for the object (aka a property).

So as my head is hurting do I need to check against Listings Length or Listings.landBountyList ?
Okay another code update as well


$( document ).ready(function() {



function Bounty (name, image, wantedLevel, reward) {

this.name = name;

this.image = image;

this.wantedLevel = wantedLevel;

this.reward = reward;

}



function Output (){

this.Listing = [ ];

}

Output.prototype.add = function(newList) {

   this.Listing.push(newList);

};





var landBountyList = new Output ();





var bountyland = new Bounty ("TestymcGee","http://placehold.it/128x128","2","£5000");

var bountyland2 = new Bounty ("TestyMcCreed","http://placehold.it/128x128","1","£1000");



var bountyNaval = new Bounty ("TestymcGee","http://placehold.it/128x128","2","£6500");

var bountyNaval2 = new Bounty ("TestyMcCreed","http://placehold.it/128x128","1","£2000");



landBountyList.add(bountyland);

landBountyList.add(bountyland2);



var htmlStringLand;



for(i = 0; i < Output.Listing.length; i++) {

   console.log([i]);

htmlStringLand = '<div class="box wanted"><span class="has-text-centered">';

htmlStringLand += name;

htmlStringLand += '</span><br /><p class="is-128"><img src="';

htmlStringLand += image;

htmlStringLand += '" /></p> <br /><strong>Wanted Level</strong> ';

htmlStringLand += wantedLevel;

htmlStringLand += '<br /><strong>Reward</strong>';

htmlStringLand += reward;

}



$("#land-bountys").append(htmlStringLand);



});


Have I not found the right 'key' to use for the property yet?

[Quozzo]

Use your previous example, not the recent one, and put this before the loop. tell me what you see.
console.log(landBountyList);

[Boy_Wonder]

In the Console I see Output when expanded I see Listing: Array [2]

[Quozzo]

Isn't that the array you were looking for?

[Boy_Wonder]

Yes - as long as I can target it to only that which is pushed into it by LandBounty versus the next list I'll be doing which is Navalbountylists