/    Sign up×
Community /Pin to ProfileBookmark

How to update array elem index position and specific array of obj prop in JS?

How to update the specific array element index position and specific array of object property in Javascript?. I have below mock data based on object property need to update their respective value using spread operator. I am not able to do that because it is nested.

I am able to achieve using below approach but as you can see code line is getting increased. But we can definitely reduce use spread operator. Because in “title” property i am only updating 0 index and in left column only updating the label value rest of the thing is same.

const mockData = {
title: [“Javascript”, “Selected Topic”],
leftColumn: [
{
key: “name”,
label: “Javascript Topic Name”,
type: “string”,
},
{
key: “id”,
label: “Javasctipt Topic Id”,
type: “string”,
},
],
};

const handleType = (val) => {
switch (val.type) {
case “Javascript”:
return {
…mockData,
};
case “Angular”:
return {
…mockData,
title: [“Angular”, “Selected Topic”],
leftColumn: [
{
key: “name”,
label: “Angular Topic Name”,
type: “string”,
},
{
key: “id”,
label: “Angular Topic Id”,
type: “string”,
},
],
};
case “React”:
return {
…mockData,
title: [“React”, “Selected Topic”],
leftColumn: [
{
key: “name”,
label: “React Topic Name”,
type: “string”,
},
{
key: “id”,
label: “Reacr Topic Id”,
type: “string”,
},
],
};
}
};

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@rpg2009Jan 22.2021 — Not particularly pretty. Needs work.

``<i>
</i>const mockData = {
title: ["Javascript", "Selected Topic"],
leftColumn: [
{
key: "name",
label: "Javascript Topic Name",
type: "string",
},
{
key: "id",
label: "Javasctipt Topic Id",
type: "string",
},
],
};

const ucFirst = ([first, ...rest]) =&gt;
${first.toUpperCase()}${rest.join('').toLowerCase()}

const leftColumnMap = type =&gt; ({key, label, ...leftColumnProps}) =&gt; ({
...leftColumnProps,
key,
label:
${ucFirst(type)} Topic ${ucFirst(key)}
})

const handleType = (type, {title, leftColumn, ...mockData}) =&gt; {
const [, ...titleRest] = title

return {
...mockData,
title: [ucFirst(type), ...titleRest],
leftColumn: leftColumn.map(leftColumnMap(type))
}
}

console.dir(handleType('react', mockData))
console.dir(handleType('angular', mockData))<i>
</i>
`</CODE>
Output
<CODE>
`<i>
</i>{
title: [ 'React', 'Selected Topic' ], 
leftColumn:  
[
{ type: 'string', key: 'name', label: 'React Topic Name' }, 
{ type: 'string', key: 'id', label: 'React Topic Id' }
]
} 

{
title: [ 'Angular', 'Selected Topic' ], 
leftColumn:  
[
{ type: 'string', key: 'name', label: 'Angular Topic Name' }, 
{ type: 'string', key: 'id', label: 'Angular Topic Id' }
]
} <i>
</i>
``
×

Success!

Help @vishalvickram1991 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...