Creating a fresh array by applying a filter and assigning keys

I am facing an issue with my array structure, it looks like this,

[
    [
        "Show/Hide",
        "P000",
        "MAX-CT05 FVM2-",
        "S",
        1532,
        -9.5929406005,
        null,
        null,
        null,
        "Open",
        null,
        "",
        null
    ],
    [
        "",
        "P000-000",
        "MAX-CT05 FVM2-",
        "S",
        22,
        -9.985,
        null,
        null,
        null,
        "Open",
        null,
        null,
        "P000"
    ],
    ...
]

Another array I have is structured differently, like so,

[
    {
        "header": true
    },
    {
        "pk": "P000",
        "nest": 0
    },
    {
        "pk": "P000-000",
        "nest": 1
    },
    ...
]

The second array defines parent-child relationships based on the value of nest. If nest is zero, it's a parent; if it's one, it's a child. My goal is to create a new grouped array of children indexed by their parent's index. Here's what I'm trying to achieve,

[
    0: [
        [
        "",
        "P000-000",
        "MAX-CT05 FVM2-",
        "S",
        22,
        -9.985,
        null,
        null,
        null,
        "Open",
        null,
        null,
        "P000"
    ],
    ...
    ],
    1: [
       [
        "",
        "P001-000",
        "MAX-CT07 TYM2-",
        "S",
        99,
        -1.865,
        null,
        null,
        null,
        "Open",
        null,
        "98.8mm JPM PB",
        "P001"
    ],
    ...
  ]
]

I attempted to implement this logic in my code but encountered this error:

Cannot set properties of undefined (setting 'parent_1]')

Answer №1

I am unsure about the specific variables in your scenario, but have you considered including this.current.childRows in both if conditions? For instance:

if (row.nest == 0 && this.current.childRows)

and similarly for the second condition.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubles with retrieving API search results using Vue computed properties

I've recently developed an Anime Search App using Vue.js and the new script setup. I'm currently struggling to access the search results in order to display the number of titles found. The app is fetching data from an external API, but it's ...

Importing images with relative paths from a JSON file does not work as expected in Next.js

JSON file data portion: { "categories": [ { "id": 1, "category_slug": "food_supplements", "title": "Food Supplements", "image": "/../../public/images/foodSupplements.png", } ] } Component data portion that displays the ...

Enhancing Material-UI component [TreeView] with drag and drop functionality using react-dnd

I have encountered an issue with my TreeView implementation. Whenever I try to drag and drop a TreeItem, all of its child TreeItems move along with it. Is there a way to enable drag'n'drop functionality for just one TreeItem without affecting its ...

Angular, a Self-sufficient Module of Cascading Style Sheets

I have developed a factory that generates HTML content. I want to showcase this generated HTML within a specific section of my application, without its CSS affecting the rest of the site, and vice versa. While using an iframe is one option, I believe there ...

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

What is the process of compiling HTML code?

In controller, I bind the same data like $scope.name = "<div>geetha teko</div>", this name will now be bound to the HTML like {{name}}. When I view it in the browser, it prints as "<div>geetha tek0</div>". Is there a way to only di ...

Customize MUI 5 input label background color for your own component

Struggling with overriding the background color for a MUI 5 input label on focus in a specific component? I successfully changed it to blue globally in my _theme.js file, but now need to make it red for my KeywordSearchTextField in index.js following MUI ...

What is the reason that I have to submit my mapped function twice in order for the updated state to show after modifying the array content?

When I try to display an image for the current value in the array item, the image does not display when I submit my value. I have to submit twice to display the value. Additionally, when changing the value and pressing submit, the content in the div does ...

How to Make a Zigzag Formation in three.js?

I have been working on developing a 3D tool and was in need of a zigzag structure. I managed to create it by iterating a function that produces 'V' multiple times, but now I am looking for a way to achieve the same effect using a single geometry ...

Replicate a click using jQuery to retrieve a filtered multigallery based on the URL

I have a website that was built using Elementor for a photographer. The site features an Elementor Multigallery with a filter at the top. I am looking to create external links that will direct users to specific subpages showing only filtered items. For ex ...

Exploring the Dev Tools Console feature in Excel for Windows

I have developed an Excel add-in using AngularJS. I utilize <div ng-show="isLoggedIn">...</div> and <div ng-show="!isLoggedIn">...</div> to manage different content based on the value of $scope.isLoggedIn. While it functions well i ...

Puppeteer causes Express to stop listening to incoming requests

As I work on developing a straightforward API that utilizes Puppeteer to execute actions, I encounter an issue where my Express app stops listening once Puppeteer is launched. Below is the script in question: const Apify = require('apify'); cons ...

Tips for transforming a UTF16 document into a UTF8 format using node.js

My dilemma involves an xml file that is encoded in UTF16, and I need to convert it to UTF8 for processing purposes. When I use the following command: iconv -f UTF-16 -t UTF-8 file.xml > converted_file.xml The conversion process goes smoothly with the ...

Is there a method to adjust the styling of my <header> once the page hits a specific #anchor point?

Seeking some assistance with a website design challenge I am facing. I am currently working on a one-page portfolio site with four #anchor points that serve as "pages". Each div has a height of 100% to fill the entire browser height. The header, which co ...

Bigcommerce encounters a 401 error during the payment processing, triggered by API with error code 10001

I recently started working on integrating the Bigcommerce payment API and I am facing issues with solving the 401 unauthorized error. Below is a sample of the data that I have tried: { "payment": { "instrument": {}, "payment_method_id": "cod", "amoun ...

Error message indicating that the function is not defined within a custom class method

I successfully transformed an array of type A into an object with instances of the Person class. However, I'm facing an issue where I can't invoke methods of the Person class using the transformed array. Despite all console.log checks showing tha ...

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

I would like to give the option for file uploads, but the form refuses to submit unless a file is uploaded

I've recently developed a form in React and React Bootstrap, and I've encountered an issue with the file upload feature. I want the file upload to be optional, but when I try to submit the form without uploading a file, it doesn't work as ex ...

Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

I've been attempting to display a loading gif while an ajax call is in progress. However, I encountered an error at the show statement and the console displayed: TypeError {stack: (...), message: "undefined is not a function"} Here's my code sn ...

Creating Interactive Labels with React-Three-Renderer (Example code provided)

Currently, I am utilizing react-three-renderer (npm, github) to construct a scene using three.js. In my project, my objective is to create a label that consistently faces the camera by using <sprite> and <spriteMaterial>, inspired by stemkoski ...