Add new list field to object in javascript

Question

I'm struggling to add(convert json to list of jsons) list to json. Here is the example:

config = {
  existing_variable: 'example'
}


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_variable: 'example', 
  listing: 
  { 
    first: 3, 
    second: 2 
  } 
}

Expected result:

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

I've tried different approaches, but what I did wasn't suitable(e.g nested values or complete initialization at beggining).

Could you please help?

I'm new to JS, you are both right this is object, not JSON. Do you have any idea how to solve this? — R4dziu
– R4dziu, Commented Apr 17, 2020 at 8:44

Nina Scholz · Accepted Answer · 2020-04-17 09:00:36Z

1

You could add some checks and rewind 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; }

Without optional chaining operator ?. but with 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; }

edited Apr 17, 2020 at 9:00

answered Apr 17, 2020 at 8:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R4dziu Over a year ago

It works, but unfortunately I cannot use optional chaining :/

Sajeeb Ahamed · Accepted Answer · 2020-04-17 10:13:10Z

0

I am proposing an alternative approach using Array.prototype.splice().

let config = {
  existing_variable: 'example'
}


const addToListing = (field, value, index = 0) => {
	// If listing property not exists then init it with an empty array
	config.listing || (config.listing = [])
	
	config.listing.splice(index, 1, (config.listing[index] ? {...config.listing[index], [field]: value} : {[field]: value}));
}

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


console.log(config);

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

edited Apr 17, 2020 at 10:13

answered Apr 17, 2020 at 8:45

Sajeeb Ahamed

6,4482 gold badges23 silver badges36 bronze badges

2 Comments

R4dziu Over a year ago

Actually there should be 2 objects(first two values in first object, and third value in second object) in this array instead of 3.

Sajeeb Ahamed Over a year ago

Sorry for the inconvinience. I've updated my answer. Please have a look.

Collectives™ on Stack Overflow

Add new list field to object in javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related