Develop Reference

Comparing original form data to edited data

I have a form that is built in with React with react-hook-form that allows users to add dynamic steps using the useFieldArray method which comes with react-hook-form.
My problem is that how can I compare the original data that was passed into the form with the new edited data so I can make the corresponding changes to my backend? Here is an example of the original data:
{
"id": "1",
"name": "Recipe Name",
"method": [ {id:1, method: "method 1", recipesId: 1} , {id:2, method: "method 2", recipesId: 1}],
"ingredients": [{id:1, ingredient: "ingredient 1", recipesId: 1} , {id:2, ingredient: "ingredient 2", recipesId: 1}]
}
Then the user makes the following changes:
{
"id": "1",
"name": "Recipe Name Example",
"method": [ {id:1, method: "method 1 example", recipesId: 1} , {id:3, method: "method 3", recipesId: 1}],
"ingredients": [{id:2, ingredient: "ingredient 2 change", recipesId: 1}]
}
So the following has been done:
UPDATE - The name has been changed.
The method array:
UPDATE - The method of id 1 has been changed from "method 1" to "method 1 example"
DELETE - The method with id 2 has been deleted
INSERT - Method 3 has now been added.
The ingredients array:
DELETE - The first ingredient with id 1 has been deleted
UPDATE - The ingredient with id 2 has updated the ingredient from "ingredient 2" to "ingredient 2 change"
Should the changes be in a new object to show changes or individual Insert, Update and Delete arrays/objects?
Thankyou.

Always keep selected data in new Array (React Native)

I need help because I'm losing my mind haha ...
I have the main array products with this (it's just a sample) :
[
{
"from": "country",
"maker": "name of maker",
"id": "1969",
"image": "image.jpg",
"label": "355",
"name": "name of product",
"price": "12.90",
"subscriber_price": "8.90",
"url_path": "url",
"occasion": null,
"colour": "31",
"origin": "397",
},
{
"from": "country",
"maker": "name of maker",
"id": "2043",
"image": "image.jpg",
"label": "362",
"name": "name of product",
"price": "24.90",
"subscriber_price": "24.90",
"url_path": "url",
"occasion": "51,376,155,39",
"colour": "31",
"origin": "395"
}
]
I'm working this the Picker Component. So, what I'm doing is :
I have a Picker to select products with their "colour".. then I have another one to filter the selected products (only with colour:31 for example) with their "origin" and finally I want to filter them through their "label" ...
The fact is I have 3 Pickers, 3 functions to select them and it's working but the problem is I'm erasing with a setState my render of "displayProducts". So, when I have selected the 3 options, I can't go back..
For example, I choose "colour:31" with "origin:397" and "label:355" .. I can't go back and tell : finally I want "origin:395" because it doesn't exist anymore, etc... and one "colour" can have different "label, origin, ..."
I'm doing something like this but it's only available for ONE option and not multiple options and without keeping a solution to find again my filtered products :
onChangeGetOrigin(originValue) {
this.setState(() => ({
activeOrigin: originValue,
displayProducts: this.state.displayProducts.filter(product => product.origin == originValue)
}));
}
Do anyone can understand what I'm saying ? :-D

You can maintain two arrays. One contains the complete list of products and the other one is a derived array after applying the filters. You can use the derived list for display and original array for selection.

JSON data filtering using javaScript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have assigned a task to group data in angular js using underscore js.
My JSON :
data = [
{
"Building*": "Building A",
"Wing*": "Wing C",
"Floor*": "Floor 3",
"Room Name*": "Room 3",
"Room Type*": "AC",
"Location*": "Location 1",
"Device ID*": 27,
"Category*": "Soap Hygene",
"Dispenser Name*": "Dispenser 34",
"Type*": "Manual",
"Cartridge Type*": "Type 1",
"Date of installation": "2016-04-11T06:06:22 -06:-30",
"Contact Last Name": "Maynard",
"Email Address": "thomas.boscher#gmail.com",
"Mobile Number with country code": "+1 (949) 590-3465",
"Description": "Description of device",
"Model": 37
},
{
"Building*": "Building B",
"Wing*": "Wing B",
"Floor*": "Floor 3",
"Room Name*": "Room 1",
"Room Type*": "AC",
"Location*": "Location 3",
"Device ID*": 26,
"Category*": "Soap Hygene",
"Dispenser Name*": "Dispenser 33",
"Type*": "Manual",
"Cartridge Type*": "Type 2",
"Date of installation": "2015-07-24T12:42:24 -06:-30",
"Contact Last Name": "Holland",
"Email Address": "thomas.boscher#gmail.com",
"Mobile Number with country code": "+1 (947) 491-2353",
"Description": "Description of device",
"Model": 32
}
]
I need data in below format, where it has each building details containing the wing and floor data
updateData = [{
building: 'Building A' ,
buildingData:[ {
wing: "Wing A",
wingData: [{
floor:'Floor 2',
floorData:[{
room:'Room 3',
roomData:[]
}]
}]
}]
}];
I tried :
js fiddle
But it fails. Need help. Thanks in advance.

From my understanding you want to groupBy in the following nested order:
Building ->> Wing ->> Floor ->> Room
You can try calling groupBy recursively (or looping through, up to you) by passing an array of the order of nested attribute you want to groupBy. Try this snippet below:
const nestedOrder = ['Building*', 'Wing*', 'Floor*', 'Room Name*']
function groupFilter (rawData, attrList) {
if (attrList.length == 0) return rawData
var currentAttr = _(attrList).first()
return _(rawData)
.chain()
.groupBy(currentAttr)
.map((list, attrName) => Object({
[currentAttr]: attrName,
[`${currentAttr}Data`]: groupFilter(list, _(attrList).rest())
}))
.value()
}
console.log(groupFilter(data, nestedOrder))
The raw data will then be compacted to the deepest nested attribute, in this case 'Room Name*', you can then write your custom filter to output what you want RoomData to hold.
Not sure if its the right way to do it, but if runtime isnt a big issue for you then I think you can make it work fine.
Hopefully this helps/works out for you.

Dynamically creating an array from another array in Javascript

I have a dynamic array as input.
From this array I need to create another array.
For example I have an array like below :
var InputArr = [{
"IM_Id": "1",
"IM_Description": "XXX5",
"IM_FirstProcessDate": "10-19-2016",
"IM_Alias": "test",
"IM_MasterPrice": "$33.00",
"IM_ProductId": "22001204",
"IM_ProductDescription": "TEST EP PRODUCT FOR DEVELOPMENT",
"IM_EPProduct": "yes",
"ItemMasterNumber": "290015",
"FS_Id": "2002",
"FS_Code": "XXX5",
"FS_Name": "XXX5",
"FS_Description": "XXX5",
"FS_EnablementType": "",
"FS_EPProduct": "yes",
"CH_Id": "4787",
"CH_ChargeId": "23004746",
"CH_Name": "XXX5",
"CH_Description": "",
"CH_Type": "One Time",
"CH_EPProduct": "yes",
"CA_Id": "1628",
"CA_ListPrice": "99",
"CA_FairValueBasis": "BESP",
"CA_FairValueLow": "99",
"CA_FairValueHigh": "99",
"CA_EffectiveStartDate": "04-18-2017",
"CA_EPProduct": "yes",
"OF_Id": "3881",
"OF_OfferId": "20003880",
"OF_Name": "XXX5",
"OF_Description": "XXX5",
"OF_Level": "BASE",
"OF_Type": "19-APR-2017",
"OF_EffectiveStartDate": "04-18-2017",
"OF_EPProduct": "yes"
}]
I need to iterate through this array and push the values to a new array but dynamically.
I cant take the parameters again like pushing the values as
"IM_Id":val['IM_Id']
My code should dynamically consider the keys and their values. This is because the initial input array is dynamically created and might have some additional keys values too.
How should I push these values dynamically to resulting array?
I tried Something like
resultingArray.push({InputArrKey1 :
InputArrayValue2,InputArrKey2:InputArrayValue2});

Addition of named array breaks Kendo dataSource bind to JSON

I'm binding a JS KendoUI dropdownlist to JSON (not using a model) which recently has been changed by adding a named array to the object (in efforts to format the JSON for a Kendo TreeView control). This broke a few things of course. The original JSON format looked like this (an array of objects):
[
{
"COLUMN_NAME": "OBJECTID",
"DATA_TYPE": "esriFieldTypeOID",
"CATEGORY": "Feature Data"
},
{
"COLUMN_NAME": "Brand",
"DATA_TYPE": "esriFieldTypeString",
"CATEGORY": "Feature Data"
},...
]
now it looks like this (an object with a named array, with objects):
{
"Hydrant": [
{
"COLUMN_NAME": "OBJECTID",
"DATA_TYPE": "esriFieldTypeOID",
"CATEGORY": "Feature Data"
},
{
"COLUMN_NAME": "Brand",
"DATA_TYPE": "esriFieldTypeString",
"CATEGORY": "Feature Data"
},...
],
"DisplayField": "Description",
"DefaultField" : "HydrantID"
}
I assumed I could simply define the schema to "Hydrant" or set the dataText/ValueFields to "Hydrant.COLUMN_NAME" but no luck. What am I overlooking? I am binding this JSON format response to a dropdownlist using the "COLUMN_NAME" to populate it.
bonus: how could I use the "DefaultField" to set the default selection in the dropdownlist?
Thanks in advance!

You can use the schema.data field of the DataSource configuration to identify the field from the response to use for its data:
schema: { data: 'Hydrant' }