We Keep Coding

Changing certain object properties without overwriting the entire object

I am trying to overwrite an object given specific changes to that object. The problem is that there are other nested objects that get overwritten as well. How would I prevent this?
const deviceChanges = {
"a": 5,
"card": {
"back": [
{
"key": "iphoneText",
"label": "IPHONE",
"value": "UPDATED VALUE FOR IPHONE"
},
]
}
};
let newBody = {
"a": 3,
"card": {
"back": [
{
"key": "androidText",
"label": "ANDROID",
"value": "androidOS"
},
{
"key": "samsungText",
"label": "SAMSUNG",
"value": "samsungOS"
},
{
"key": "iphoneText",
"label": "IPHONE",
"value": "iphone"
},
{
"key": "macbookText",
"label": "MACBOOK",
"value": "macbookOS"
}
]
},
"c": 8
};
const expected = {
"object": {
"a": 5,
"card": {
"back": [
{
"key": "androidText",
"label": "ANDROID",
"value": "androidOS"
},
{
"key": "samsungText",
"label": "SAMSUNG",
"value": "samsungOS"
},
{
"key": "iphoneText",
"label": "IPHONE",
"value": "UPDATED VALUE FOR IPHONE"
},
{
"key": "macbookText",
"label": "MACBOOK",
"value": "macbookOS"
}
]
},
"c": 8
}
};
Here is a Unit Test example of what I am trying to do. I want to take the changes object, and basically replace b.x in newBody, but I also want to preserve the other fields like b.y, a, and C. I want to make it as dynamic as possible, so if there is another object for newBody.b.x or another value for A, I want the code to be able to notice that and adequately change that. Does anyone have an idea on what to do here?
for (let [key, value] of Object.entries(changes)) {
for(let [key1, value1] of Object.entries(value)) {
newBody[key][key1] = value1;
}
}
This is what I have so far in terms of Code. But it only takes into account the fact that it only needs to traverse through two objects to replace. If I had something like:
const changes = {
"b": {
"x": "new",
"y": {
"n": "iphone"
}
}
};
The code would not work. How do I make it as dynamic as possible to realize how many objects it needs to replace?

Here's a function that assigns values for matching keys from a source object into a target. It does so recursively.
Lodash _merge() does something like this, probably handling many more edge cases than I've anticipated here (which is approximately none).
const changes = {
"b": {
"x": "changed",
"Z": "new key/value pair"
}
};
let newBody = {
"a": 3,
"b": {
"x": "old",
"y": "fields"
},
"c": 8
};
// overwrite values in target with matching keys in source
// side-effects target, also returns it
function merge(target, source) {
for (const [key, value] of Object.entries(source)) {
if (key in target) {
if (typeof value === 'object' && typeof target[key] === 'object') {
merge(target[key], value);
} else {
target[key] = value;
}
} else {
// the key in source isn't in the target. add it
target[key] = value;
}
}
return target;
}
const r = merge(newBody, changes)
console.log(r)

If you don't know how deep an object/array is nested you often need to make use of recursive functions (functions that call themselves)
The function I wrote below is that.
I'll try to explain how it works:
For simplicities sake we're gonna assume there is only 1 property per "layer" (the function can actually handle multiple - since we loop, but to explain the recursive part we're just gonna simplify the whole thing)
So you start by checking if the property of the changes object is itself an object or not. If it not an object, this means we are at the deepest level of this particular nesting, so we can replace the property of our actual object with the property of the changes object. If the property is however an object we need to go deeper. So what we do in this case is call the function again but pass only the property object (in our case we would pass {x: "new"} and {x: "old", y: "fields"} - we do this until we don't find an object as our property in which case we'll replace.
This way we can go however deep we need and replace only properties that are primitives.
const changes = {
"b": {
"x": "new",
}
};
let newBody = {
"a": 3,
"b": {
"x": "old",
"y": "fields"
},
"c": 8
};
function doTheThing(theObject, changes) {
const keys = Object.keys(changes)
keys.forEach(key => {
if (typeof changes[key] === "object" && changes[key] !== null) {
//this will also be true if changes[key] is an array
doTheThing(theObject[key], changes[key])
} else {
theObject[key] = changes[key]
}
})
return theObject
}
console.log(doTheThing(newBody, changes))
So we solved that problem with recursion (there are tons of resources about that if you need more information)

get field and value from json using javascript

Now my json is like this
{
"1": "a",
"2": "b",
"3": "c",
}
And from this, I am going to get value like this
[
{
"id": 1,
"value": "a"
},
{
"id": 2,
"value": "b"
},
{
"id": 3,
"value": "c"
},
]
I tried to use JSON.parse() but I got unexpected token error.
How can I make this?

var data = '{ "1": "a", "2": "b", "3": "c"}';
var parsedData = JSON.parse(data);
var arr = [];
for(item in parsedData) {
arr.push({
"id": parseInt(item),
"value": parsedData[item]
});
};
console.log(arr);
Here we can create a random JSON object, and if you notice, the last value doesn't have a trailing comma. In JSON, you cannot have a trailing comma or else you will get an error. You also do not have to put numbers in double quotes in JSON. I'm not sure if that's just how your data is formatted, but you don't need to do that. After you get rid of the trailing comma, you should be able to call JSON.parse() and store the data in a JavaScript object. After that we can iterate through the valid object and push the values to the array. Since you have double quotes around the numbers in your JSON object I parsed them to integers sense that's what you look like you are trying to achieve in your final output. I'd also highlight that your data is not JSON, but it simply looks like a JSON object. We don't know if you're getting this data from a JSON file, or if you're adding it manually, but if you are adding it manually, you will need to make it a valid JSON string like I have above.

I'm guessing the problem is the last comma:
{
"1": "a",
"2": "b",
"3": "c",//<===
}
JSON doesn't allow trailing commas.

let a =
{
"1": "a",
"2": "b",
"3": "c",
}
console.log(typeof a)
When I print the type of the JSON object, it displays "object".
The JSON.parse() only using on the string type.
I tried the following code.
let a = '{"1": "a", "2": "b", "3": "c"}'
let b = JSON.parse(a)
console.log(JSON.stringify(b))
It okey to parse.

Access Variable in JS Array

I have the following object
var object = ["{
"a": "foo",
"b": "bar",
"c": "baz"
}
"]
I am interested in getting value a, but everything I have tried comes up undefined. I have tried object.a, object[0].a and object[a], I know it's something silly I am simply forgetting. Any help is greatly appreciated.

var object = ['{ "a": "foo", "b": "bar", "c": "baz" }'];
console.log(JSON.parse(object[0]).a);

your array should look like this
var object = [{
"a": "foo",
"b": "bar",
"c": "baz"
}];
remove the double quotes so that you can access the object inside the array or else you can use the JSON.parse() just like #Daniel did

Can anyone explain the following Javascript code behaviour?

Here is my Javascript code:
var subRow = [];
var rowarr = [];
subRow.push({ v: "Jay" });
subRow.push({ v: "Ram" });
rowarr.push({ c: subRow });
subRow.length = 0;
subRow.push({ v: "Jay1" });
subRow.push({ v: "Ram1" });
rowarr.push({ c: subRow });
console.log(JSON.stringify(rowarr));
The output is:
[{
"c": [{
"v": "Jay1"
}, {
"v": "Ram1"
}]
}, {
"c": [{
"v": "Jay1"
}, {
"v": "Ram1"
}]
}]
The expected output is:
[{
"c": [{
"v": "Jay"
}, {
"v": "Ram"
}]
}, {
"c": [{
"v": "Jay1"
}, {
"v": "Ram1"
}]
}]
Can anyone explain why it so?

Arrays are handled by reference.
subRow.length = 0; erases the contents of the array.
rowarr then contains two pointers to the same array (which only has the content in it that you put there after emptying it)
Change subRow.length = 0; to subRow = [] to work on a new array instead of modifying the existing one.

subRow points to an object. When you push it onto rowArr you create a reference to that object. You push it twice, that's two references to one object. When you edit subRow both references to the object see the changes, so you've trampled all over the old contents of the object - they are not stored anywhere else, so they are completely lost. You need to create a brand new object instead of editing the old object.

Accessing values inside single array of JSON objects

I have wasted two days on this and I can't take it anymore. I am getting well formed JSON data from my $.ajax call. Sample below...
"results":[
"{"a":"data","b":"data","c":"data","d":"data"}",
"{"a":"data","b":"data","c":"data","d":"data"}",
"{"a":"data","b":"data","c":"data","d":"data"}",
"{"a":"data","b":"data","c":"data","d":"data"}"
]
I have attempted to access the values in this single array of JSON objects and just can't figure it out. Here's my code below...
success:function (data) {
/*
$.each(data.results, function(i, val) {
console.log(i, val);
});
*/
$('a.previewUrl').each(function (i) {
var res = jQuery.parseJSON(data.results[0]);
var previewUrl = $(this);
if(previewUrl.attr("href") == '') {
previewUrl.attr("href", res[i].d);
}
});
} // end success
The console.log iteration over each JSON object in the array prints out fine but I think I have tried a dozen different ways to grab these values in the $.each() loop. What I am missing?

Your Json isn't valid. Try putting it through jsonlint and see what happens.
I think this could be what you were aiming for:
{
"results": [
{
"a": "data",
"b": "data",
"c": "data"
},
{
"a": "data",
"b": "data",
"c": "data"
},
{
"a": "data",
"b": "data",
"c": "data"
},
{
"a": "data",
"b": "data",
"c": "data"
}
]}
and if you're using jQuery's $.getJSON function, you don't need to parse your data or if you're using the $.ajax function, set the datatype to json so it wil parse the data for you.