Generate a collection of items through replication

Question

Generate a collection of items through replication

Develop a function that takes specific input and generates an array of objects with a length of 10 by incrementing the ID of each duplicate object.

The first object in the output array should have "visible" set to true, while all others should have it set to false.


    Input:
    {
        id: 0,
        visible: true,
        width: 200;
        height: 200;
    }

    Output:
    [
        {
            id: 0,
            visible: true,
            width: 200;
            height: 200;
        },
        {
            id: 1,
            visible: false,
            width: 200;
            height: 200;
        },
        {
            id: 2,
            visible: false,
            width: 200;
            height: 200;
        },
        {
            id: 3,
            visible: false,
            width: 200;
            height: 200;
        },
        .
        .
        .
        {
            id: 9,
            visible: false,
            width: 200;
            height: 200;
        }
    ]

javascript arrays typescript redux

Answer 1

Answer №1

Create a 10 element array, fill it with 0 (or any value for iteration), then use the map function to iterate over it and return a copy of the input with the desired id on each loop:

Note: The code snippet has been updated to include logic for the visible property which was missed in the original post.

const input = { id: 0, visible: true, width: 200, height: 200 };

const output = Array(10).fill(0).map((x, id) => ({...input, visible: id === 0, id}));

console.log(output)

Answer 2

Create a 10 element array, fill it with 0 (or any value for iteration), then use the map function to iterate over it and return a copy of the input with the desired id on each loop:

Note: The code snippet has been updated to include logic for the visible property which was missed in the original post.

const input = { id: 0, visible: true, width: 200, height: 200 };

const output = Array(10).fill(0).map((x, id) => ({...input, visible: id === 0, id}));

console.log(output)

Answer 3

Answer №2

If you're looking for assistance, it's important to share your efforts and where you encountered difficulties before asking others to do the work for you.

const example = {
    key: 0,
    display: true,
    length: 200,
    width: 200
}

let examplesArray = [];

for (j = 0; j <= 10; j++) {
    examplesArray.push({
        ...example,
        display: j === 0,
        key: j
    })
}
console.log(examplesArray)

Answer 4

If you're looking for assistance, it's important to share your efforts and where you encountered difficulties before asking others to do the work for you.

const example = {
    key: 0,
    display: true,
    length: 200,
    width: 200
}

let examplesArray = [];

for (j = 0; j <= 10; j++) {
    examplesArray.push({
        ...example,
        display: j === 0,
        key: j
    })
}
console.log(examplesArray)

Answer 5

Answer №3

Here is my proposal...

const data = { name: 'John', age: 30, gender: 'male' }

const newData = [];

for (let i=0; i<5; i++) {
  newData.push( Object.assign({}, data, { id: i, age: (data.age + i) }) )
}

console.log(newData);

Answer 6

Here is my proposal...

const data = { name: 'John', age: 30, gender: 'male' }

const newData = [];

for (let i=0; i<5; i++) {
  newData.push( Object.assign({}, data, { id: i, age: (data.age + i) }) )
}

console.log(newData);

Generate a collection of items through replication

Answer №1

Answer №2

Answer №3

Similar questions

What is the purpose of making a "deep copy" when adding this HTML content?

Using Javascript to dynamically add rows to a table, however they mysteriously appear and disappear soon

Activate the b-form-file function by selecting the b-button

Leveraging the "dialogclose" event within jQuery Mobile

Data is persisted in the database even when an error occurs

What steps can I take to trigger a 404 error instead of a cast error?

Eliminate the unnecessary code repetition in my functions using Typescript

Generating a collection of items using a pre-existing array of items

issues with jquery functionality on mobile devices

Display current weather conditions with the Open Weather API (featuring weather icons)

Consolidate various arrays of objects while eliminating duplicate items based on an optional property

Concerns regarding the set-up of the latest React application

Struggling with a peer requirement for grunt@~0.4.0 during the installation of grunt plugins? Here's how to resolve

Utilizing a variable string name for a method in Typescript Vue

Display or conceal nested divs within ng-repeat loop

Issue encountered while submitting form on JQuery Mobile framework

Using Rails to render a partial containing a form object

Limiting Firebase communication to Electron Application

Utilizing ReactJS for Web Development with Enhanced Data Insights from Google

Some design elements are present in the interface. The functionality of the data tables is working properly, however, upon reloading the page, the table header shrinks. Interestingly