Using Javascript to generate a fresh object based on another object and then extracting it from an array

Question

Using Javascript to generate a fresh object based on another object and then extracting it from an array

I have this sample constructor that creates new Loot objects:

function Loot(type, sellValue) {
    this.type = type;
    this.sellValue = sellValue; 
}

I want to extend these properties to other objects and add them to an array like so:

var inventory = [];

var stone = new Loot("craft", 20);
inventory.push(stone);

var hat = new Loot("clothing", 80);
inventory.push(hat);

var coal = new Loot("ore", 5);
inventory.push(coal);

var diamond = new Loot("ore", 400);
inventory.push(diamond);


console.log(inventory);

But the problem is that when I check my inventory, it shows (Loot, Loot, Loot, Loot) instead of the actual names of the items (stone, hat, coal, diamond).

How can I fix this issue? Do I need to implement some kind of inheritance?

Thanks!

javascript arrays object inheritance

Answer 1

Answer №1

The object does not recognize variable names like "stone." Instead, these names serve as references to the object itself without directly representing the data within the object.

Therefore, "stone" is just a label assigned to the same Loot instance that was initialized.

In this scenario, only one Loot object exists in your code.

If you examine the array using a debugger, it will indicate the type of object (Loot). To view the specific values stored within the object, you will need to expand the object and explore its contents.

Answer 2

The object does not recognize variable names like "stone." Instead, these names serve as references to the object itself without directly representing the data within the object.

Therefore, "stone" is just a label assigned to the same Loot instance that was initialized.

In this scenario, only one Loot object exists in your code.

If you examine the array using a debugger, it will indicate the type of object (Loot). To view the specific values stored within the object, you will need to expand the object and explore its contents.

Answer 3

Answer №2

However, when I attempt to view my inventory, it displays as (Loot, Loot, Loot, Loot) instead of showing the actual names of the items, (stone, hat, coal, diamond).

To see the names of the items in your inventory array, you will need to iterate through the array and log the .type properties of each item:

for (var i=0; i<inventory.length; i++)
    console.log(inventory[i].type);

Alternatively, you can create a new array containing only the item types using the map method:

var types = inventory.map(function(item) { return item.type; });
console.log(types);

Answer 4

However, when I attempt to view my inventory, it displays as (Loot, Loot, Loot, Loot) instead of showing the actual names of the items, (stone, hat, coal, diamond).

To see the names of the items in your inventory array, you will need to iterate through the array and log the .type properties of each item:

for (var i=0; i<inventory.length; i++)
    console.log(inventory[i].type);

Alternatively, you can create a new array containing only the item types using the map method:

var types = inventory.map(function(item) { return item.type; });
console.log(types);

Answer 5

Answer №3

It's important to note that the array cannot contain string keys. In this case, using an object is recommended for storing these items.

function Loot(type, sellValue){
  this.type = type;
  this.sellValue = sellValue; 
}

var inventory = {};
var inventory2 = {};

var stone = new Loot("craft", 20);
var stone1 = new Loot("craft1", 30);
var stone2 = new Loot("craft2", 40);

// Alternatively: 
inventory2['stone'] = stone;
inventory2['stone1'] = stone1;
inventory2['stone2'] = stone2;

console.log(inventory);   // Object {craft: Loot, craft1: Loot, craft2: Loot}
console.log(inventory2);  // Object {stone: Loot, stone1: Loot, stone2: Loot}

http://jsbin.com/aNiXolo/5/edit

Answer 6

It's important to note that the array cannot contain string keys. In this case, using an object is recommended for storing these items.

function Loot(type, sellValue){
  this.type = type;
  this.sellValue = sellValue; 
}

var inventory = {};
var inventory2 = {};

var stone = new Loot("craft", 20);
var stone1 = new Loot("craft1", 30);
var stone2 = new Loot("craft2", 40);

// Alternatively: 
inventory2['stone'] = stone;
inventory2['stone1'] = stone1;
inventory2['stone2'] = stone2;

console.log(inventory);   // Object {craft: Loot, craft1: Loot, craft2: Loot}
console.log(inventory2);  // Object {stone: Loot, stone1: Loot, stone2: Loot}

http://jsbin.com/aNiXolo/5/edit

Using Javascript to generate a fresh object based on another object and then extracting it from an array

Answer №1

Answer №2

Answer №3

Similar questions

determine the k stars that are in closest proximity to our planet

What are the steps to incorporating an Image in a React Native application?

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

Saving the previous component's DOM in a React application

Switch out the icons within a return statement in JavaScript

Encountering issues with formData in nextjs 13 due to incorrect data type

Freezing the OrderBy Directive in AngularJS ng-repeat While Editing

Break down a string with various delimiters into an array with key-value pairs

JQuery hover effect for dynamically added elements

A guide to resolving a sinonJS stub issue

Ways to determine if a dynamically generated script tag has been successfully executed

Understanding the readability of JavaScript arrays.ORDeciphering

Is there a way for me to collaborate on a footer control with a different website?

How can I retrieve XML information from a webpage?

React JS - Breaking down the distinction between PublicTheme and PublicTheme

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

Ways to resolve the issue of a website displaying with extra whitespace at the bottom

Strange behavior observed with Nuxt Js asyncData method returning values

Error message 'Invalid Request' encountered when submitting a POST form

Getting the inner element of a particular child from the parent div using selenium with javascript