如何在javascript中的返回JSON对象中添加键/值？

Question

I am getting json object as a response. I want to add a new key/value pair in that object. I tried object.assign but its overriding the value. Is there any way to add the new key/value field in response object

{
"0": {
    "createdDate": "2021-11-08T19:51:02.000Z",
    "description": null,
    "id": "0TO7e000000RJMBGA4",
    "images": {
        "coverImageUrl": null,
        "featuredImageUrl": "/customercommunityv4/file-asset/structuresicongoldpng?v=1"
    },
    "isBeingDeleted": false,
    "name": "Structures",
    "nonLocalizedName": "Structures",
    "talkingAbout": 1,
    "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJMBGA4"
    
},
"1": {
    "createdDate": "2021-11-08T19:49:56.000Z",
    "description": null,
    "id": "0TO7e000000RJLrGAO",
    "images": {
        "coverImageUrl": null,
        "featuredImageUrl": "/customercommunityv4/file-asset/X3ddesigniconyellowpng?v=1"
    },
    "isBeingDeleted": false,
    "name": "Class3Error",
    "nonLocalizedName": "Class3Error",
    "talkingAbout": 1,
    "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLrGAO"
},
"2": {
    "createdDate": "2021-11-08T19:50:12.000Z",
    "description": null,
    "id": "0TO7e000000RJLwGAO",
    "images": {
        "coverImageUrl": null,
        "featuredImageUrl": "/customercommunityv4/file-asset/X202101icondigitaltwingold120x120png?v=1"
    },
    "isBeingDeleted": false,
    "name": "Digital Twin",
    "nonLocalizedName": "Digital Twin",
    "talkingAbout": 1,
    "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLwGAO"
},

}

I want to add 'newUrl' key and its corresponding value in this object after "url" field. Like

"0": {
    "createdDate": "2021-11-08T19:51:02.000Z",
    "description": null,
    "id": "0TO7e000000RJMBGA4",
    "images": {
        "coverImageUrl": null,
        "featuredImageUrl": "/customercommunityv4/file-asset/structuresicongoldpng?v=1"
    },
    "isBeingDeleted": false,
    "name": "Structures",
    "nonLocalizedName": "Structures",
    "talkingAbout": 1,
    "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJMBGA4",
   "newUrl": "test/112/testname"    
},

Thanks in advance

Answer 1

You first need to parse your responseData and then manipulate it.

const newObj = JSON.parse(responseData);

Object.entries(newObj).forEach(([key, value]) => newObj[key] = { ...value, newUrl: '...' });

Or if you only want to add newUrl to a specific sub-object:

const newObj = JSON.parse(obj);

newObj[key] = { ...newObj[key], newUrl: '...' };

Then you can JSON.stringify(newObj) if needed.

Answer 2

Following methods will be used ...

• Object.assign
• Object.entries (non mutating approach) Object.values (mutating approach)
• Array#reduce (non mutating approach) Array#forEach (mutating approach)

Creating a new augmented object from the existing response data (non mutating approach) ...

 const responseData = { "0": { "createdDate": "2021-11-08T19:51:02.000Z", "description": null, "id": "0TO7e000000RJMBGA4", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/structuresicongoldpng?v=1" }, "isBeingDeleted": false, "name": "Structures", "nonLocalizedName": "Structures", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJMBGA4" }, "1": { "createdDate": "2021-11-08T19:49:56.000Z", "description": null, "id": "0TO7e000000RJLrGAO", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/X3ddesigniconyellowpng?v=1" }, "isBeingDeleted": false, "name": "Class3Error", "nonLocalizedName": "Class3Error", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLrGAO" }, "2": { "createdDate": "2021-11-08T19:50:12.000Z", "description": null, "id": "0TO7e000000RJLwGAO", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/X202101icondigitaltwingold120x120png?v=1" }, "isBeingDeleted": false, "name": "Digital Twin", "nonLocalizedName": "Digital Twin", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLwGAO" } }; const augmentedCopy = Object .entries(responseData) .reduce((result, [key, value]) => Object.assign(result, { [key]: { ...value, newUrl: `test/${ key }/testname` } }), {} ); console.log({ augmentedCopy, responseData })

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

Altering/mutating the existing response data (mutating approach) ...

 const responseData = { "0": { "createdDate": "2021-11-08T19:51:02.000Z", "description": null, "id": "0TO7e000000RJMBGA4", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/structuresicongoldpng?v=1" }, "isBeingDeleted": false, "name": "Structures", "nonLocalizedName": "Structures", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJMBGA4" }, "1": { "createdDate": "2021-11-08T19:49:56.000Z", "description": null, "id": "0TO7e000000RJLrGAO", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/X3ddesigniconyellowpng?v=1" }, "isBeingDeleted": false, "name": "Class3Error", "nonLocalizedName": "Class3Error", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLrGAO" }, "2": { "createdDate": "2021-11-08T19:50:12.000Z", "description": null, "id": "0TO7e000000RJLwGAO", "images": { "coverImageUrl": null, "featuredImageUrl": "/customercommunityv4/file-asset/X202101icondigitaltwingold120x120png?v=1" }, "isBeingDeleted": false, "name": "Digital Twin", "nonLocalizedName": "Digital Twin", "talkingAbout": 1, "url": "/services/data/v52.0/connect/communities/0DB7e000000GmlRGAS/topics/0TO7e000000RJLwGAO" } }; Object .values(responseData) .forEach((value, idx) => value.newUrl = `test/${ idx }/testname` // ... OR ... // // Object.assign(value, {newUrl: `test/${ idx }/testname` }) ); console.log({ responseData })

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