We Keep Coding

Object won't append to field array with react-hook-form

I'm trying to set up a form with react-hook-form (which is amazing by the way) to input a TV series where the series has an arbitrary number of seasons and each season has an arbitrary number of episodes. I know I need to have seasons as a field array, but since it doesn't seem possible to create a new field array for each season, I've created a separate episodes field array which will hold an array of objects including a "season" key so I can identify and filter which episodes belong to which season. It's possible theres a better way to set this up altogether and that might be the real problem here.
With what I have set up though, I'm running into an issue where I need to keep values in the react-hook-form hook that won't be shown on the page as part of the form like the index of the episode (so I can update it in the field array without mapping through all episodes) and the season number it belongs to. When I try to append an episode to the episodes field array though, it doesn't update properly and episodes is undefined after the first episode is appended or only keeps the value of registered fields after any subsequent appends. Definitely seems to me that this has something to do with fields in episodes not being registered as part of the form, but in my case not all fields can be part of the form. Wondering if anyone has an idea for how to work with this problem or get around out, maybe with using actual react state while keeping renders at a minimum.
Code sandbox here
https://codesandbox.io/s/determined-browser-7ppf1
Expected behavior of above: after adding a season, add multiple episodes and see "episode number" move up incrementally in the UI and see all episode information in the console after submit.
EDIT:
I'm porting over code from React where the state was like
seriesState = {
seriesTitle: "New TV Series"
seasons: [
{
seasonTitle: "Season 1",
seasonNumber: 1,
episodes: [
{
episodeNumber: 1,
title: "Season 1 Episode 1"
},
{
episodeNumber: 2
title: "Season 1 Episode 2"
}
]
},
{
seasonTitle: "Season 2",
seasonNumber: 2,
episodes: [
{
episodeNumber: 1,
title: "Season 2 Episode 1"
},
{
episodeNumber: 2,
title: "Season 2 Episode 2"
}
]
}
]
}
and trying to rewrite it for react-hook-form by rewriting it like below
seriesState = {
seriesTitle: "New TV Series"
seasons: [
{
number: 1,
seasonTitle: "Season 1"
},
{
number: 2,
seasonTitle: "Season 2"
}
],
episodes: [
{
seasonNumber: 1,
episodeNumber: 1
episodeTitle: "season 1 episode 1"
},
{
seasonNumber: 1,
episodeNumber: 2
episodeTitle: "season 1 episode 2"
},
{
seasonNumber: 2,
episodeNumber: 1
episodeTitle: "season 2 episode 1"
},
{
seasonNumber: 2,
episodeNumber: 2
episodeTitle: "season 2 episode 2"
}
]
}
and now I'm changing it to

Using ng-options with JSON data

I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select

This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>

How to create following type of json that will usefull in type ahead with angular js

I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!

I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.

How to properly compile html form data into JSON object

I have a form which collects some information (asset cost, asset description, shareholders, and how much each of the shareholders own). I want to compile all this information in a JSON object and post it. When I collect the data and JSON.stringify() it, it looks like this:
[ { name: '1', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' },
{ name: '3', value: '50' },
{ name: 'asset_desc', value: 'boat' },
{ name: 'asset_cost', value: '100' },
{ name: 'org_id', value: '2' } ]
I want to clean this data up before posting so it looks like this:
{
"asset_desc": "boat",
"asset_cost": "100",
"org_id": 2,
"share_holders": {
"1": "50",
"2": "50"
}
}
I am running jQuery. Does jQuery have some built-in helpers that would make the cleaning up of this data simple? The function I'm using to get the data like this in the first place is:
formdata = $('#addpurchaseform');
data = JSON.stringify(formdata.serializeArray());
Is there a better way to do this so that my data is in a cleaner state? Am I even thinking about this correctly (I am new to web development)?
Not sure if this matters, but the receiving end of this is Python / Django so I figured it would be better if I sent a clean JSON object rather than trying to parse / clean the mess after it was received.

If you're looking for a jQuery plugin, then try this:
https://github.com/marioizquierdo/jquery.serializeJSON

GetOrgChart: Nodes whose parent haven't been defined

I'm using the GetOrgChart JQuery plugin and running into a JavaScript error of:
Uncaught Type Error: Cannot read property '_ap' of null
I was able to determine that this is occurring in the case from my dataset where a user occurs earlier in the list than their manager does. My hierarchy is based around NTLogins, so the NTLogin of a given user is the id and the parentId is their manager's NTLogin.
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: "bobeans125",
parentId: null,
Name: "Bob Beans"
}, {
id: "franklin884",
parentId: "tdawl756",
Name: "Frank Lin"
}, {
id: "tdawl756",
parentId: "bobeans125",
Name: "Tim Dawl"
}]
});
JSFIDDLE Demo
I have no good way that I can think of to order the data so that this doesn't occur other than finding all of the many root nodes and drilling down into the hierarchy manually so that the dataset being sent to GetOrgChart is ordered. However, the assumption of not having to do so was the primary driver for choosing GetOrgChart.

I ended up just recursively walking the tree and building the object in the right order. I was able to get it to load without error, however, the tree is too large to be displayed and requires being zoomed out too far to be useful.

Id : and ParentId: is integer value but you gave string value so your output is Error: Cannot read property '_ap' of null.
Correct Example:
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: 1,
parentId: null,
Name: "Bob Beans"
}, {
id: 2,
parentId: 1,
Name: "Frank Lin"
}, {
id: "3",
parentId: "1",
Name: "Tim Dawl"
}]
});