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

The messaging feature is not functioning properly within the page tab

Eliminate any undefined data in the popup map of Javascript

Leveraging JSON Data in Highcharts

The event SelectedIndexChanged is not triggering as expected on dropdown lists that are created dynamically

Juggling various perspectives in a Backbone assortment

The ID Token could not be verified due to an invalid jwt.split function

Creating divs that adapt to different screen sizes without relying on flexbox

Import information from a SqlServer Database into a jQuery Full Calendar utilizing the capabilities of Codeigniter3

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Is it possible to implement an automatic clicking function on a bootstrap navigation bar similar to a carousel?

Using Selenium Webdrivers to Browse Pages with Minimal Resource Loading

Updating GridView row only if there are changes, the value remains unchanged in JavaScript. Disappointing

Tips for distinguishing between submit() and other JavaScript functions, and understanding why submit() may not be functioning as expected

Standardize JSON by mapping classes and arrays to individual columns

Trouble arises when attempting to append a class through ng-class upon clicking

Elements found in array but not present in the table

Organizing information in local storage using an array and converting it to a string

When transitioning from another page, the header will cover a portion of the section

What is the best way to assign string values from an array in data() to the src attribute of an image element?

What are some ways to slow down the speed of my animation?