What is the best way to trim a string property of an object within an array?

Question

What is the best way to trim a string property of an object within an array?

I am seeking a solution to access the "description" property of objects within an array and utilize a string cutting method, such as slice, in order to return an array of modified objects. I have attempted using for loops but have been unsuccessful.

Here is the code:

let cars = [
  {
    "status": "disabled"
  },
  
  {
    "status": "active",
    "store": true,
    "models": [
        {
          "description": "4 doors, 0km/h, no breakdowns",
          "color": "black",
          "price": 100.000,
        },
        {
          "description": "2 doors, 30.000km/h, some breakdowns",
          "color": "black",
          "price": 20.000,
        },
      
        {
          "description": "4 doors, 120.000km/h, no breakdowns",
          "color": "red",
          "price": 50.000,
        }
    ]
  }
]

I can extract the desired property and use slice() within a loop to modify it, however I am struggling with returning this updated array of objects when calling "carsTwo". Here is what I have tried:

let carsTwo= cars[1].models;

//remove unwanted properties from new array
for(let i=0; i<carsTwo.length; i++) {
    delete carsTwo[i].color;
    delete carsTwo[i].price;
}

//apply slice() to every "description" property value, successfully displayed in console.log...
for(let i=0; i<carsTwo.length; i++) {
    carsTwo[i].description.slice(3)
}

My objective is to return the array of objects containing only the description property, with slice applied.

Note: I am a beginner in programming.

javascript arrays typescript object slice

Answer 1

Answer №1

.slice() will return a new string instead of modifying the existing string. To update the .description property in the object, you need to assign it to the new string returned by slice():

carsTwo[i].description = carsTwo[i].description.slice(3);

const cars = [
  {
    "status": "disabled"
  },
  
  {
    "status": "active",
    "store": true,
    "models": [
        {
          "description": "4 doors, 0km/h, no breakdowns",
          "color": "black",
          "price": 100.000,
        },
        {
          "description": "2 doors, 30.000km/h, some breakdowns",
          "color": "black",
          "price": 20.000,
        },
      
        {
          "description": "4 doors, 120.000km/h, no breakdowns",
          "color": "red",
          "price": 50.000,
        }
    ]
  }
];

const carsTwo = cars[1].models;

for(let i=0; i<carsTwo.length; i++) {
    delete carsTwo[i].color;
    delete carsTwo[i].price;
}

for(let i=0; i < carsTwo.length; i++) {
    carsTwo[i].description = carsTwo[i].description.slice(3);
}

console.log(carsTwo);

Take note of the following regarding your current code:

You have two consecutive for loops that iterate over the same items. It is recommended to combine them into one loop to avoid unnecessary iterations:

for(let i=0; i<carsTwo.length; i++) {
  delete carsTwo[i].color;
  delete carsTwo[i].price;
  carsTwo[i].description = carsTwo[i].description.slice(3);
}

When using delete and reassigning .description, you are modifying the original objects in the array. This may not be desired if you wish to keep the original array intact.

To prevent altering the original array, consider creating a new array and adding new objects with the description property without modifying the existing objects. This can be achieved by utilizing .map() to transform each object in the models array into a new array of objects, preserving the original cars array:

const cars = [ { "status": "disabled" }, { "status": "active", "store": true, "models": [ { "description": "4 doors, 0km/h, no breakdowns", "color": "black", "price": 100.000, }, { "description": "2 doors, 30.000km/h, some breakdowns", "color": "black", "price": 20.000, }, { "description": "4 doors, 120.000km/h, no breakdowns", "color": "red", "price": 50.000, } ] } ];

// Using destructuring assignment to extract the models array from the second object in your array
// Alternatively, you can use: `const models = cars[1].models` to achieve the same result as the line below.
const [, { models }] = cars;

const res = models.map((model) => ({description: model.description.slice(3)}));
console.log(res);

Answer 2

.slice() will return a new string instead of modifying the existing string. To update the .description property in the object, you need to assign it to the new string returned by slice():

carsTwo[i].description = carsTwo[i].description.slice(3);

const cars = [
  {
    "status": "disabled"
  },
  
  {
    "status": "active",
    "store": true,
    "models": [
        {
          "description": "4 doors, 0km/h, no breakdowns",
          "color": "black",
          "price": 100.000,
        },
        {
          "description": "2 doors, 30.000km/h, some breakdowns",
          "color": "black",
          "price": 20.000,
        },
      
        {
          "description": "4 doors, 120.000km/h, no breakdowns",
          "color": "red",
          "price": 50.000,
        }
    ]
  }
];

const carsTwo = cars[1].models;

for(let i=0; i<carsTwo.length; i++) {
    delete carsTwo[i].color;
    delete carsTwo[i].price;
}

for(let i=0; i < carsTwo.length; i++) {
    carsTwo[i].description = carsTwo[i].description.slice(3);
}

console.log(carsTwo);

Take note of the following regarding your current code:

You have two consecutive for loops that iterate over the same items. It is recommended to combine them into one loop to avoid unnecessary iterations:

for(let i=0; i<carsTwo.length; i++) {
  delete carsTwo[i].color;
  delete carsTwo[i].price;
  carsTwo[i].description = carsTwo[i].description.slice(3);
}

When using delete and reassigning .description, you are modifying the original objects in the array. This may not be desired if you wish to keep the original array intact.

To prevent altering the original array, consider creating a new array and adding new objects with the description property without modifying the existing objects. This can be achieved by utilizing .map() to transform each object in the models array into a new array of objects, preserving the original cars array:

const cars = [ { "status": "disabled" }, { "status": "active", "store": true, "models": [ { "description": "4 doors, 0km/h, no breakdowns", "color": "black", "price": 100.000, }, { "description": "2 doors, 30.000km/h, some breakdowns", "color": "black", "price": 20.000, }, { "description": "4 doors, 120.000km/h, no breakdowns", "color": "red", "price": 50.000, } ] } ];

// Using destructuring assignment to extract the models array from the second object in your array
// Alternatively, you can use: `const models = cars[1].models` to achieve the same result as the line below.
const [, { models }] = cars;

const res = models.map((model) => ({description: model.description.slice(3)}));
console.log(res);

Answer 3

Answer №2

Here's a function I believe suits your needs:

const truncateCarDescription = (cars, index) => {
    for(let i = 0; i < cars.length; i++) {
        const car = cars[i]
        if(car.models) {
            for(let j = 0; j < car.models.length; j++) {
                const model = car.models[j]

                model.description = model.description.slice(0, index)
            }
        }
    }
}

Simply pass in the cars array as the first argument and the desired index of slicing as the second.

This function will directly modify the cars array without needing to return anything.

Answer 4

Here's a function I believe suits your needs:

const truncateCarDescription = (cars, index) => {
    for(let i = 0; i < cars.length; i++) {
        const car = cars[i]
        if(car.models) {
            for(let j = 0; j < car.models.length; j++) {
                const model = car.models[j]

                model.description = model.description.slice(0, index)
            }
        }
    }
}

Simply pass in the cars array as the first argument and the desired index of slicing as the second.

This function will directly modify the cars array without needing to return anything.

Answer 5

Answer №3

One way to achieve this efficiently is by utilizing the Array.map() method:

const cars = [ { "status": "disabled" }, { "status": "active", "store": true, "models": [ { "description": "4 doors, 0km/h, no breakdowns", "color": "black", "price": 100.000, }, { "description": "2 doors, 30.000km/h, some breakdowns", "color": "black", "price": 20.000, }, { "description": "4 doors, 120.000km/h, no breakdowns", "color": "red", "price": 50.000, } ] } ];
const carsTwoModified = cars[1].models.map((model) => ({ description: model.description.slice(3) }));

console.log(carsTwoModified);

Answer 6

One way to achieve this efficiently is by utilizing the Array.map() method:

const cars = [ { "status": "disabled" }, { "status": "active", "store": true, "models": [ { "description": "4 doors, 0km/h, no breakdowns", "color": "black", "price": 100.000, }, { "description": "2 doors, 30.000km/h, some breakdowns", "color": "black", "price": 20.000, }, { "description": "4 doors, 120.000km/h, no breakdowns", "color": "red", "price": 50.000, } ] } ];
const carsTwoModified = cars[1].models.map((model) => ({ description: model.description.slice(3) }));

console.log(carsTwoModified);

What is the best way to trim a string property of an object within an array?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing AJAX in jQuery Mobile for Collapsible Content

Generate and save a document

Divide a list Observable into two parts

When the user signs in with Next-auth, they will be redirected to /signin with

Angular 2- Unable to bind to 'ngSwitchCase' as it is not recognized as a native property

Finding All Initial Table Cells in jQuery

Operating a React application in the background

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

Determine the variance between two strings using Jquery

Utilizing JavaScript regex to remove substrings that contain parentheses

Definition file for Typescript d.ts that includes optional properties in a function

What is the trick to accessing an object's key and value when you are unsure of the object's

Refresh cloned element after making changes to the original element

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

What is the approach of Angular 2 in managing attributes formatted in camelCase?

Node.js does not allow the extension of the Promise object due to the absence of a base constructor with the required number of type

Error: Azure AD B2C user login redirect URI is not valid

Creating a custom theme in MUI v5 by modifying ColorPartial members

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

What could be causing the npm install command to not save packages in the /node_modules directory?