Perform a function within an object

Question

Perform a function within an object

I am currently working on a project where I am using an array of objects to display random items on a canvas. The goal is to have each object display with a unique random color. However, the code I have written is causing every object to have the same color.

var arrayOfObjects = [
    {x: 1, y: 5, r: 10, color: pickColor}, //should have a random color
    {x: 2, y: 6, r: 10, color: pickColor}  // should have a different color
    //and so on...
];

I attempted to update the code by replacing the pickColor variable with a function that would be executed within each object to ensure they all receive a different color. However, I am facing difficulty in using this function to select a color from the color array.

Despite my efforts, the following code snippet does not achieve the desired outcome:

{x: 1, y: 5, r: 10, color: colorList[parseInt(Math.random() * colorList.length)]},

UPDATE: I have confirmed that this code is functioning correctly. The issue was unrelated and took some time to diagnose. Thank you for your assistance in troubleshooting.

javascript arrays function object

Answer 1

Answer №1

Transform pickColor into a reusable function that can be invoked multiple times:

var colorList = ["#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB", "#64B5F6", "#DCE775", "#AED581", "#81C784", "#FFD54F"];

function pickColor() {
    var randIndex = parseInt(Math.random() * colorList.length);
    return colorList[randIndex];
}

var arrayOfObjects = [
    {x: 1, y: 5, r: 10, color: pickColor()},
    {x: 2, y: 6, r: 10, color: pickColor()},
    //continue adding objects here...
];

By encapsulating the color picking functionality in a function, you avoid duplicating code for each object, achieving the same outcome as shown in your second code snippet.

Answer 2

Transform pickColor into a reusable function that can be invoked multiple times:

var colorList = ["#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB", "#64B5F6", "#DCE775", "#AED581", "#81C784", "#FFD54F"];

function pickColor() {
    var randIndex = parseInt(Math.random() * colorList.length);
    return colorList[randIndex];
}

var arrayOfObjects = [
    {x: 1, y: 5, r: 10, color: pickColor()},
    {x: 2, y: 6, r: 10, color: pickColor()},
    //continue adding objects here...
];

By encapsulating the color picking functionality in a function, you avoid duplicating code for each object, achieving the same outcome as shown in your second code snippet.

Perform a function within an object

Answer №1

Similar questions

Outputting specific lines from a text document based on their designated line numbers

An Illustration of Basic Nested Controller within Directive Parameters

showing the response message from a post request using Vue.js and Axios

"Converting to Typescript resulted in the absence of a default export in the module

What is the best way to populate a column in a dataframe using a function that requires another dataframe as input?

Executing JavaScript function by clicking on <img>

The Jenkins build on a specific branch is encountering issues with path exporting, causing it to fail

Bringing Vue Components Together in Laravel: A Guide to Component Importation

Creating a new attribute within a JavaScript object by utilizing the properties of its sibling elements

Determine the amount of clicks and retrieve the URL of the clicked link in Selenium using Python

Setting up the Firebase emulator: should you use getFirestore() or getFirestore(firebaseApp)?

Tips for Successfully Capturing Form Data with OnChange Event

Can we include an option to display all pages in one row on a single page?

How can I implement a thumbnail editing feature similar to Facebook's display image uploader in an Asp.net application using c#?

Show a picture without specifying its file location

Refresh the html page periodically by utilizing ajax every X seconds

Confirm the presence of Cookie and save the data

Updating a React event as it changes with each onChange event

Error: The function SomeFunction is not recognized as a valid function (Mongoose library)

Encountering a ReactJS error when retrieving an object assigned from an axios call to an