question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: Update element within nested array

See original GitHub issue

Hello

thanks for that great module. I am in the moment replacing redux with pullstate in our solutions and facing a problem, that not might be a pullstate thing, but I am wondering if there is a specific way to do it using pullstate and update.

In my Store I am having an Array of so called “PlanningElements” which contain PlanningElements as childrens again. So I get like a tree structure. Now I have to update a property of a specific PlanningElement anywhere in the tree and I only have the ID of that planninglement.

Thanks very much for your help!! Pascal


// MY Model for the Tree Structure
export default interface PlanningElement {    
    planningId?:number; // ID of the planned Element
    title?:string;
    children?: PlanningElement[];
}

// MY STORE
interface IPlanningViewStore {    
    meetingsPlanningElements: [{ meetingId: number; planningElements: PlanningElement[] }?];
}

export const PlanningViewStore = new Store<IPlanningViewStore>({    
    meetingsPlanningElements: [],
});



// MY Method, trying to update the element anywhere within the tree structure
// The current implementation only supports elements, at the root level...
// How can I update nested objects
const updatePlanningElementWithinTree = (meetingId: number, updatedPlanningElement: PlanningElement) => {
    PlanningViewStore.update((s) => {
         const elements = s.meetingsPlanningElements.find((m) => m.meetingId == meetingId).planningElements;
         const index = elements.findIndex(e => e.planningId == updatedPlanningElement.planningId);
         s.meetingsPlanningElements.find((m) => m.meetingId == meetingId).planningElements[index] = updatedPlanningElement;
    });
};


Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
hohenpcommented, Mar 9, 2021

Cool, thanks alot @lostpebble . Happy to here, that it is a challange, so braining about that for days was it worth… 😃 Im am closing that and of course we can move the questions to the discussion section. My fault, sorry!!

0reactions
lostpebblecommented, Mar 9, 2021

Yea, it is somewhat of a challenge to do deep updates.

Look at the bottom section of the immer docs for updates (https://immerjs.github.io/immer/docs/update-patterns), they give the same advice I gave earlier: find the ID of the deep updates you need to do, and then apply them. This is somewhat harder given the structure you are using.

Another option would be to do the updates outside of Pullstate itself, and then just calling Store.replace(newState) with the entire new state tree that you’ve edited.

Read more comments on GitHub >

github_iconTop Results From Across the Web

MongoDB - Update an object in nested Array - Stack Overflow
The $ positional operator will identify the correct element in the array to update without explicitly specifying the position of the element in...
Read more >
[Question] How to updated deeply nested array elements? #695
Whenever I update a specific child, I perform a breadth-first search to get the element and then update with an action: updateTally: action(( ......
Read more >
$[<identifier>] — MongoDB Manual
Update Nested Arrays in Conjunction with $[]. The $[<identifier>] filtered positional operator, in conjunction with the $[] all positional operator, can ...
Read more >
Update Array of nested list - Appian Community
I have a array of student details. It has fields like student id, subject id, question paper id. I want to group by...
Read more >
JavaScript Nested Arrays Updating Values Using ... - YouTube
JavaScript Nested Arrays Updating Values Using Arrays in Code with ... and manipulate page elements Learn to Code JavaScript with Coding ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found