Develop Reference

Merging some values in Javascript Object

I'm wondering if it is possible to merge certain values in an object to an array/object. I'm currently developing a module to create a quotation and everytime a value is changed in the form I want to send the form data to the server (async ajax call) to auto save the quotation. I'm getting the form data (by react hook form's getValues() function) as shown on the screenshot below:
As seen on the screenshot there are multiple lines[0] and lines[1 ] entries that are all seperate entries. To send it to the server I need the data as following:
client_id: "686",
condition: "7",
...
lines: {
0: {
amount: 1,
description: 'Test line 1',
price: 100,
},
1: {
amount: 1,
description: 'Test line 2',
price: 200,
}
},
...
Anyone here who knows how I can accomplish to convert my data into something like the example above? Thanks in advance!

Here is a solution for any key with dots.
Expanded the solution for the square brackets:
var source = {
id:12,
cond:"true",
'lines[0].amount':"1",
'lines[0].description':"a1",
'lines[1].amount':"1",
'lines[1].description':"a1",
};
var target = {};
for (var key in source) {
if (source.hasOwnProperty(key)) {
set(target, key, source[key])
}
}
function set(obj, path, value) {
obj = typeof obj === 'object' ? obj : {};
path = path.replace("[",".").replace("]","")
var keys = Array.isArray(path) ? path : path.split('.');
var curStep = obj;
for (var i = 0; i < keys.length - 1; i++) {
var key = keys[i];
if (!curStep[key] && !Object.prototype.hasOwnProperty.call(curStep, key)){
var nextKey = keys[i+1];
var useArray = /^\+?(0|[1-9]\d*)$/.test(nextKey);
curStep[key] = useArray ? [] : {};
}
curStep = curStep[key];
}
var finalStep = keys[keys.length - 1];
curStep[finalStep] = value;
};

In general for merging values, folks should check out Object.assign().
In this particular case, to go from the second screenshot to the first, you might have used a loop, something like:
let newObject = {};
for (let lineIndex=0; lineIndex<lines.length; lineIndex++) {
for (let fieldIndex=0; fieldIndex<Object.keys(lines[lineIndex]).length; fieldIndex++) {
let newKey = "lines["+lineIndex+"]."+fieldIndex<Object.keys(lines[lineIndex])[fieldIndex];
newObject[newKey] = lines[lineIndex][Object.keys(lines[lineIndex])[fieldIndex]]
}
}
To go the other way, you would basically do the inverse. The details of the best way to do this would depend on how predictable your set of fields are and if you know the length. Otherwise you could make guesses by iterating over the keys in the flatter object and doing tests like if(Object.keys(flatterObject)[index].startsWith("lines[")).

Yes, there is a way to do what you want, but before any of that I'd suggest a deeper dive on the library you're using. Here's how to handle arrays in React Hook Form: https://react-hook-form.com/advanced-usage#FieldArrays
After "fixing" that, if you still want lines: {} to be an object, not an array, then a simple array reduce can build that up for you.

storing key value pairs in an array in javascript

I have 2 arrays namely,
configdata = ["assignee", "shortDesc"];
ticketarray = ["Tom","testDesc"];
I want to store the values as a key value pair in another array, something like this:
ticketData = ["assignee":"Tom","shortDesc":"testDesc"];
Kindly note that the array values are dynamic, so I cannot hardcode them.
Is there a way to do so? I am able to achieve the above said requirement but the length always shows 0. This is the code that I am using:
configdata.Incident_Field.forEach(function (k, i) {
this[k] = ticketarray[i];
}, ticketData);

Other people have explained why your code did not work. I am providing another solution using reduce.
const configdata = ["assignee", "shortDesc"];
const ticketarray = ["Tom", "testDesc"];
let ticketData = configdata.reduce((result, value, index) => {
result[value] = ticketarray[index];
return result;
}, {});
console.log(ticketData);
Output:
{
assignee: "Tom",
shortDesc: "testDesc"
}

The below is not a valid structure in JavaScript:
ticketData = ["assignee":"Tom","shortDesc":"testDesc"];
What you need is a JavaScript object. The best you can do is:
Make sure both the array lengths are same.
Associate the key and value by creating a new object.
Use Object.keys(obj).length to determine the length.
Start with the following code:
configdata = ["assignee", "shortDesc"];
ticketarray = ["Tom", "testDesc"];
if (configdata.length == ticketarray.length) {
var obj = {};
for (var i = 0; i < configdata.length; i++)
obj[configdata[i]] = ticketarray[i];
}
console.log("Final Object");
console.log(obj);
console.log("Object's Length: " + Object.keys(obj).length);
The above will give you an object of what you liked, a single variable with all the values:
{
"assignee": "Tom",
"shortDesc": "testDesc"
}

Javascript: how to dynamically create nested objects INCLUDING ARRAYS using object names given by an array

Very similar to this question:
Javascript: how to dynamically create nested objects using object names given by an array
Instead of calling
assign(obj, keyPath, value)
example of usage of the previously answer:
var accountinfo = {}
assign(accountinfo, ["name", "addressinfo", "zipcode"], "90210");
That will output:
accountinfo = {name: "", addressinfo: {zipcode:"90210"}};
Now, I'd like to support arrays... in the above example, I'd like to support multiple addressinfo per account. I'd like to say:
assign(accountinfo, ["name", "addressinfo[1]", "zipcode"], "90210");
The result would be:
accountinfo = {name: "", addressinfo: [{},{zipcode:"90210"}]}
var regex = /\[([0-9]+)\]/ will show me the # inside the brackets, but I'm not sure how I'd have to iterate through each element in the array to make sure it exists (and create it if it doesn't).. and the difficult part, support this for each array element submitted as part of the function (I'd like to say :
assign(accountinfo, ["family", "name[3]", "addressinfo[1]", "zipcode"], "90210");
Edit:
Figured it out.
function assign(obj, keyPath, value) {
keyPath = keyPath.split(‘.’);
lastKeyIndex = keyPath.length - 1;
var re = /^(.+?)\[*(\d+)*\]*$/;
for (var i = 0; i < lastKeyIndex; i++) {
key = keyPath[i];
var ind;
var middle = re.exec(key);
key = middle[1];
ind = middle[2];
if (ind) {
if (!(obj[key]))
obj[key] = [];
if (!(obj[key][ind]))
obj[key][ind] = {};
}
if (!(key in obj))
obj[key] = {};
if (ind)
obj = obj[key][ind];
else
obj = obj[key];
}
obj[keyPath[lastKeyIndex]] = value;
}

Declaring array of objects

I have a variable which is an array and I want every element of the array to act as an object by default. To achieve this, I can do something like this in my code.
var sample = new Array();
sample[0] = new Object();
sample[1] = new Object();
This works fine, but I don't want to mention any index number. I want all elements of my array to be an object. How do I declare or initialize it?
var sample = new Array();
sample[] = new Object();
I tried the above code but it doesn't work. How do I initialize an array of objects without using an index number?

Use array.push() to add an item to the end of the array.
var sample = new Array();
sample.push(new Object());
To do this n times use a for loop.
var n = 100;
var sample = new Array();
for (var i = 0; i < n; i++)
sample.push(new Object());
Note that you can also substitute new Array() with [] and new Object() with {} so it becomes:
var n = 100;
var sample = [];
for (var i = 0; i < n; i++)
sample.push({});

Depending on what you mean by declaring, you can try using object literals in an array literal:
var sample = [{}, {}, {} /*, ... */];
EDIT: If your goal is an array whose undefined items are empty object literals by default, you can write a small utility function:
function getDefaultObjectAt(array, index)
{
return array[index] = array[index] || {};
}
Then use it like this:
var sample = [];
var obj = getDefaultObjectAt(sample, 0); // {} returned and stored at index 0.
Or even:
getDefaultObjectAt(sample, 1).prop = "val"; // { prop: "val" } stored at index 1.
Of course, direct assignment to the return value of getDefaultObjectAt() will not work, so you cannot write:
getDefaultObjectAt(sample, 2) = { prop: "val" };

You can use fill().
let arr = new Array(5).fill('lol');
let arr2 = new Array(5).fill({ test: 'a' });
// or if you want different objects
let arr3 = new Array(5).fill().map((_, i) => ({ id: i }));
Will create an array of 5 items. Then you can use forEach for example.
arr.forEach(str => console.log(str));
Note that when doing new Array(5) it's just an object with length 5 and the array is empty. When you use fill() you fill each individual spot with whatever you want.

After seeing how you responded in the comments. It seems like it would be best to use push as others have suggested. This way you don't need to know the indices, but you can still add to the array.
var arr = [];
function funcInJsFile() {
// Do Stuff
var obj = {x: 54, y: 10};
arr.push(obj);
}
In this case, every time you use that function, it will push a new object into the array.

You don't really need to create blank Objects ever. You can't do anything with them. Just add your working objects to the sample as needed. Use push as Daniel Imms suggested, and use literals as Frédéric Hamidi suggested. You seem to want to program Javascript like C.
var samples = []; /* If you have no data to put in yet. */
/* Later, probably in a callback method with computed data */
/* replacing the constants. */
samples.push(new Sample(1, 2, 3)); /* Assuming Sample is an object. */
/* or */
samples.push({id: 23, chemical: "NO2", ppm: 1.4}); /* Object literal. */
I believe using new Array(10) creates an array with 10 undefined elements.

You can instantiate an array of "object type" in one line like this (just replace new Object() with your object):
var elements = 1000;
var MyArray = Array.apply(null, Array(elements)).map(function () { return new Object(); });

Well array.length should do the trick or not? something like, i mean you don't need to know the index range if you just read it..
var arrayContainingObjects = [];
for (var i = 0; i < arrayContainingYourItems.length; i++){
arrayContainingObjects.push {(property: arrayContainingYourItems[i])};
}
Maybe i didn't understand your Question correctly, but you should be able to get the length of your Array this way and transforming them into objects. Daniel kind of gave the same answer to be honest. You could just save your array-length in to his variable and it would be done.
IF and this should not happen in my opinion you can't get your Array-length. As you said w/o getting the index number you could do it like this:
var arrayContainingObjects = [];
for (;;){
try{
arrayContainingObjects.push {(property: arrayContainingYourItems[i])};
}
}
catch(err){
break;
}
It is the not-nice version of the one above but the loop would execute until you "run" out of the index range.

//making array of book object
var books = [];
var new_book = {id: "book1", name: "twilight", category: "Movies", price: 10};
books.push(new_book);
new_book = {id: "book2", name: "The_call", category: "Movies", price: 17};
books.push(new_book);
console.log(books[0].id);
console.log(books[0].name);
console.log(books[0].category);
console.log(books[0].price);
// also we have array of albums
var albums = []
var new_album = {id: "album1", name: "Ahla w Ahla", category: "Music", price: 15};
albums.push(new_album);
new_album = {id: "album2", name: "El-leila", category: "Music", price: 29};
albums.push(new_album);
//Now, content [0] contains all books & content[1] contains all albums
var content = [];
content.push(books);
content.push(albums);
var my_books = content[0];
var my_albums = content[1];
console.log(my_books[0].name);
console.log(my_books[1].name);
console.log(my_albums[0].name);
console.log(my_albums[1].name);
This Example Works with me.
Snapshot for the Output on Browser Console

Try this-
var arr = [];
arr.push({});

const sample = [];
list.forEach(element => {
const item = {} as { name: string, description: string };
item.name= element.name;
item.description= element.description;
sample.push(item);
});
return sample;
Anyone try this.. and suggest something.

Use array.push() to add an item to the end of the array.
var sample = new Array();
sample.push(new Object());
you can use it
var x = 100;
var sample = [];
for(let i=0; i<x ;i++){
sample.push({})
OR
sample.push(new Object())
}

Using forEach we can store data in case we have already data we want to do some business login on data.
var sample = new Array();
var x = 10;
var sample = [1,2,3,4,5,6,7,8,9];
var data = [];
sample.forEach(function(item){
data.push(item);
})
document.write(data);
Example by using simple for loop
var data = [];
for(var i = 0 ; i < 10 ; i++){
data.push(i);
}
document.write(data);

If you want all elements inside an array to be objects, you can use of JavaScript Proxy to apply a validation on objects before you insert them in an array. It's quite simple,
const arr = new Proxy(new Array(), {
set(target, key, value) {
if ((value !== null && typeof value === 'object') || key === 'length') {
return Reflect.set(...arguments);
} else {
throw new Error('Only objects are allowed');
}
}
});
Now if you try to do something like this:
arr[0] = 'Hello World'; // Error
It will throw an error. However if you insert an object, it will be allowed:
arr[0] = {}; // Allowed
For more details on Proxies please refer to this link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
If you are looking for a polyfill implementation you can checkout this link:
https://github.com/GoogleChrome/proxy-polyfill

The below code from my project maybe it good for you
reCalculateDetailSummary(updateMode: boolean) {
var summaryList: any = [];
var list: any;
if (updateMode) { list = this.state.pageParams.data.chargeDefinitionList }
else {
list = this.state.chargeDefinitionList;
}
list.forEach((item: any) => {
if (summaryList == null || summaryList.length == 0) {
var obj = {
chargeClassification: item.classfication,
totalChargeAmount: item.chargeAmount
};
summaryList.push(obj);
} else {
if (summaryList.find((x: any) => x.chargeClassification == item.classfication)) {
summaryList.find((x: any) => x.chargeClassification == item.classfication)
.totalChargeAmount += item.chargeAmount;
}
}
});
if (summaryList != null && summaryList.length != 0) {
summaryList.push({
chargeClassification: 'Total',
totalChargeAmount: summaryList.reduce((a: any, b: any) => a + b).totalChargeAmount
})
}
this.setState({ detailSummaryList: summaryList });
}

var ArrayofObjects = [{}]; //An empty array of objects.

How can I add javascript object to another object in dynamic

Suppose I have several javascript object
{"type":"gotopage","target":"undefined"}
{"type":"press","target":"a"}
{"type":"rotate","target":"long"}
How can I add this objects to another object like
config={}
I know how to if each inserted object have a id I can added as:
config["id"]={}
But in this case how can I add objects without id?

var obj1 = {"type":"gotopage","target":"undefined"};
var config = {};
config.obj1 = obj1;
You can always add them later.
var obj1 = {"type":"gotopage","target":"undefined"};
var config = {};
config.obj1 = obj1;
var obj2 = {"key":"data"};
config.obj2 = obj2;

I think you are mixing up objects and arrays. Objects have named keys, arrays have numeric keys. You can easily append to an array using .push():
var arr = [];
arr.push("something");
However, for a configuration object as your variable name suggests this is not really useful. You should rather use meaningful names for your options, e.g.:
var config = {
something: 'blah',
foo: 'bar'
};
You can also store an array in your object:
config.manyStuff = [];
for(...) {
manyStuff.push(...);
}

If you want to add object you can easily add using use spread operator.
Example ->
object1 = { property1: 1, property2: 2}
finalObject = [{...object1}]
finalObject = {...object1}
and as per your question solution use array object here
finalObject = [{...object1}]
object1 = { property1: 1, property2: 2}
finalObject = [{...object1}]
document.getElementById("demo").innerHTML = JSON.stringify(finalObject);
<div id = "demo"></div>

If these data you have are of the same type, then use an array instead:
var some_data = {"type":"gotopage","target":"undefined"}
var config = [];
var config.push(some_data); //and do this for the rest
And you can access the config items like this:
var someVariable = config[index]; //where index is a number starting from 0

I'm using this utility function:
module.exports.combine = function() {
var rv = {};
for (i = 0; i < arguments.length; i++) {
for (thing in arguments[i]) {
rv[thing]=arguments[i][thing];
}
}
return rv;
}
Properties with the same name will be overwritten by properties in later arguments
var util = require('lib/util.js');
console.log(util.combine(
{"1":"one","two":function(){;},
{"four":{"four.5":"four.5-b"}, "5":"foo"}});
result:
{ '1': 'one',
'5': 'foo',
two: [Function],
four: { 'four.5': 'four.5-b' } }

If you are looking to add them during intialization, this might help you out:
var config = [
{"type":"gotopage","target":"undefined"},
{"type":"press","target":"a"},
{"type":"rotate","target":"long"}
]