Implement a new list field to an object using javascript

Question

Implement a new list field to an object using javascript

I am facing a challenge in converting a JSON object to a list of JSON objects and then adding it back to JSON. Here is an example:

config = {
  existing_value: 'sample'
}


addToListing = (field, value, index=0) => {
  config = {
    ...config,
    listing: {   
      ...config.listing,
      [field]: value
    }   
  }
}

addToListing('first', 1, 0)
addToListing('second', 2, 0)
addToListing('first', 3, 1)


console.log(config)

Result:

{
  existing_value: 'sample', 
  listing: 
  { 
    first: 3, 
    second: 2 
  } 
}

Desired outcome:

{ 
  existing_variable: 'example', 
  listing: 
  [
    {first: 1, second: 2}, 
    {first: 3}
  ] 
}

I have attempted various methods but I couldn't achieve the expected result (like using nested values or initializing at the beginning).

Can anyone provide assistance?

javascript arrays json list

Answer 1

Answer №1

To enhance the functionality, consider implementing additional checks and resetting the array.

const addToListing = (field, value, index=0) => {
    config = {
        ...config,
        listing: Object.assign(
            [],
            (config.listing || []), 
            { [index]: { ...(config.listing?.[index] || []), [field]: value } }
        )    
    }
};

var config = { existing_variable: 'example' };

addToListing('first', 1, 0);
addToListing('second', 2, 0);
addToListing('first', 3, 1);

console.log(config)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Eliminate the use of the optional chaining operator ?. by introducing more default values.

const addToListing = (field, value, index=0) => {
    config = {
        ...config,
        listing: Object.assign(
            [],
            (config.listing || []), 
            { [index]: { ...((config.listing || [])[index] || []), [field]: value } }
        )    
    }
};

var config = { existing_variable: 'example' };

addToListing('first', 1, 0);
addToListing('second', 2, 0);
addToListing('first', 3, 1);

console.log(config)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To enhance the functionality, consider implementing additional checks and resetting the array.

const addToListing = (field, value, index=0) => {
    config = {
        ...config,
        listing: Object.assign(
            [],
            (config.listing || []), 
            { [index]: { ...(config.listing?.[index] || []), [field]: value } }
        )    
    }
};

var config = { existing_variable: 'example' };

addToListing('first', 1, 0);
addToListing('second', 2, 0);
addToListing('first', 3, 1);

console.log(config)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Eliminate the use of the optional chaining operator ?. by introducing more default values.

const addToListing = (field, value, index=0) => {
    config = {
        ...config,
        listing: Object.assign(
            [],
            (config.listing || []), 
            { [index]: { ...((config.listing || [])[index] || []), [field]: value } }
        )    
    }
};

var config = { existing_variable: 'example' };

addToListing('first', 1, 0);
addToListing('second', 2, 0);
addToListing('first', 3, 1);

console.log(config)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Here is a different approach I suggest using the Array.prototype.splice() method.

let data = {
  current_value: 'sample'
}


const addToDataList = (property, val, idx = 0) => {
// Check if dataList property does not exist then initialize it with an empty array
data.dataList || (data.dataList = [])

data.dataList.splice(idx, 1, (data.dataList[idx] ? {...data.dataList[idx], [property]: val} : {[property]: val}));
}

addToDataList('itemA', 1, 0)
addToDataList('itemB', 2, 0)
addToDataList('itemA', 3, 1)


console.log(data);

.as-console-wrapper {min-height: 100% !important; top: 0;}

Answer 4

Here is a different approach I suggest using the Array.prototype.splice() method.

let data = {
  current_value: 'sample'
}


const addToDataList = (property, val, idx = 0) => {
// Check if dataList property does not exist then initialize it with an empty array
data.dataList || (data.dataList = [])

data.dataList.splice(idx, 1, (data.dataList[idx] ? {...data.dataList[idx], [property]: val} : {[property]: val}));
}

addToDataList('itemA', 1, 0)
addToDataList('itemB', 2, 0)
addToDataList('itemA', 3, 1)


console.log(data);

.as-console-wrapper {min-height: 100% !important; top: 0;}

Implement a new list field to an object using javascript

Answer №1

Answer №2

Similar questions

Leveraging a single Axios request across various components

What methods can be used to accurately display the data type with TypeOf()?

I'm having trouble getting rid of this stubborn loader on the website

The switch statement within Angular returns null when using getElementById()

Malfunction detected in Json autocomplete function

conceal elements using the <option> class隐藏

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)

Eliminate nested object properties using an attribute in JavaScript

The previous successful execution of req.body is now yielding an undefined value

Creating chained fetch API calls with dependencies in Next.js

What kind of registration does React Hook Form use?

Running a Redux Thunk action from within a TypeScript environment, beyond the confines of a React component

When attempting to use the .split method, an error is thrown stating that addEventListener is not

Having trouble troubleshooting C++ code in Visual Studio Code

Adjust picture dimensions when the window changes (using jQuery)

Manipulating JSON data by replacing values with other JSON data in Python

The error message being displayed states that 'null' cannot be used as an object when evaluating 'response.productType'

Angular Directives in Error

Associate text with a color from a predetermined list (JavaScript)

TypeScript Error: The Object prototype must be an Object or null, it cannot be undefined