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

What prevents variables defined in outer blocks from being accessed by nested describe() blocks?

Using JavaScript to enhance and highlight specific items in a dropdown menu

Adding a nested data structure in a Meteor application

Type in "Date" and select a date using your mobile device

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Dealing with JavaScript errors within an Express application

Converting a Class Component to a Functional Component in React: A Step-by-Step

What is the best way to focus on a particular version of TypeScript?

Ways to protect Ajax link requests

Error: Morris.js is unable to access the property 'x' because it is undefined

Executing a JavaScript function to trigger a PHP script that saves data into a MySQL database

Changing an array in PHP to a variable in JavaScript

The curious behavior of JavaScript object fields in Chrome

The Angular service encounters issues when interacting with REST API

I possess a list of unique identifiers and require the ability to either update an existing object within an array contained in a MongoDB document, if it exists,

What is the best way to calculate the sum of table data with a specific class using jQuery?

Tips for concealing overlay when the cursor hovers

Is the Inline Partial<T> object still throwing errors about a missing field?

What might be causing the issue in the build process of my next.js project?

Selenium: The function moveToElement is not valid for the driver.actions() method