We Keep Coding

Edit readonly javascript objects

I have a read-only object that is returned by GraphQL (vue-apollo) query, the result which is read-only looks something like this:
result: {
id: 'yh383hjjf',
regulations: [{ title: 'Test', approved: false}]
})
I want to bind this to a form and be able to edit/update the values in the regulations array and save it back to the database.
at the moment when I try to edit I get the error below:
Uncaught TypeError: "title" is read-only
I tried cloning the result returned by the database using object.assign
//target template
const regulatoryApprovals = {
id: null,
regulations: [{ title: null, approved: null}]
})
regulatoryApprovals = Object.assign(regulatoryApprovals, result, {
regulations: Object.assign(regulatoryApprovals.regulations, result.regulations)
})
but this didn't work.
Does anyone know how I can properly clone the result?

regulatoryApprovals= Object.assign(regulatoryApprovals, ... indicates the problem because regulatoryApprovals is modified with Object.assign, so it would need no assignment.
Read-only regulatoryApprovals object needs to be cloned. regulations is an array and won't be merged correctly with Object.assign, unless it's known that array elements need to be replaced. It should be:
regulatoryApprovals = {
...regulatoryApprovals,
...result,
regulations: [...regulatoryApprovals.regulations, result.regulations]
}
Where { ...regulatoryApprovals, ... } is a shortcut for Object.assign({}, regulatoryApprovals, ...).

Vue Testing - '... .push is not a function'

Im trying to test a method of a component that adds a new entry to an already existing object.
addTag: function () {
this.value[this.field.key].push(this.tag)
this.tag = ''
}
I am just trying to call that method inside my test via
wrapper.setProps({
field: {
key: 'tag'
},
value: {
tag: {}
}
})
...
wrapper.vm.addTag()
but it throws and error
TypeError: this.value[this.field.key].push is not a function
Ive set all needed data and props beforehand (field.key and tag), so that's not the problem. running other methods works completly fine, push seems to be the problem

This is because this.value['tag'] is an object, not an array, so there is no push method.
Defining it as an array instead would change that:
wrapper.setProps({
field: {
key: 'tag'
},
value: {
tag: []
}
})

Access object property that is outside of array

My page object is structured so that I have all of the elements in an object and then an array of objects containing data about the fields that can be looped over to test max char length and error texts.
I would like the locator to reference a property that is outside the array so that the value does not need to be updated twice if the element changed.
Snippet from page object as an example...
module.exports = {
siteName: element(by.id('P662_NAME')),
fields: [
{
name: 'site name',
max: 45,
locator: element(by.id('P662_NAME'))
}
]
}
I have tried using the following with no luck...
this.siteName, this.siteName, module.exports.siteName
Is there a way to do this?

Your exporting looks pretty good. Import it correctly.

What you could do is set siteName as another variable and reference that in your fields object like this:
let siteName = "foo"; // now, updating this variable will also update the one in fields
let fields = [{
// other props
locator: siteName
}];
console.log(fields[0].locator); // expects "foo"
// module.exports = { siteName, fields };

Try this :
Export from a file like this
Sandbox: https://codesandbox.io/s/compassionate-bas-fg1c2
var siteName = "dsdsd";
var fields = [
{
name: "site name",
max: 45,
locator: "dsdsd"
}
];
module.exports = {
siteName,
fields
};;
Get it imported like this:
import { siteName } from "./test.js";
console.log(siteName);

Trying to set a value by referencing separate json

Im trying to separate out the functionality of my model and the data so ive created a separate json file with a basic table
when my model builds it creates an object and i need it to create a value in it based on a value coming in:
{
"1":"apple",
"2":"banana",
"3":"orange",
"4":"grape"
}
async save (xmlOrder) {
let customerOrder = {
ID: xmlOrder.ID,
Name: xmlOrder.Name ,
ItemCode: xmlOrder.ItemCode ,
Fruit: (This set by referencing the json, based on the Item code coming in above)enter code here
}

You can import that json object in file where you're having your model, than based on input to function you can get value out of object.
let obj = {"1":"apple","2":"banana","3":"orange","4":"grape"}
function save (xmlOrder) {
let customerOrder = {
ID: xmlOrder.ID,
Name: xmlOrder.Name ,
ItemCode: xmlOrder.ItemCode ,
Fruit: obj[xmlOrder.ItemCode] || 'Not in list',
}
return customerOrder
}
console.log(save({ID:33,Name:'Name',ItemCode:'2'}))
console.log(save({ID:303,Name:'Name1',ItemCode:'21'}))

Using jQuery removeData() with nested data

I'm using the jQuery data() function to store data on a series of divs in a format similar to:
{
options: {
example: {
option_1: {
value: "example 1"
},
option_2: {
value: "example 2"
}
}
}
}
I can add new keys and update the data, e.g.
$("#mydiv").data('options',{'example':{} }); // the object is already created in the live version
$("#mydiv").data('options')['example']['option_3'] = { value: "example 3" };
But when I come to use removeData(), FireBug tells me that the key is undefined, e.g.
$("#mydiv").removeData('options')['example']['option_2'];
Any help appreciated!

.removeData(name) removes the previously stored data with the given name, and returns a jQuery object. In your scenario, you don't want the remove the entire options object, just a specific property of it, so you should be using delete instead:
delete $("#mydiv").data('options')['example']['option_2'];