Creating multiple arrays of objects - javascript

For an experiment I'm writing, I have to make six of the kind of list below.
var list1 = [];
var enc_len_1 = pregenerated_faces[1].encoding_faces.length;
var rec_len_1 = pregenerated_faces[1].recall_faces.length;
for (var i = 0; i < enc_len_1; i++){
var obj_encode = {
'encode': pregenerated_faces[1].encoding_faces[i]
};
list1.push(obj_encode);
};
for (var i = 0; i < rec_len_1; i++){
var obj_recall = {
'reacall': pregenerated_faces[1].recall_faces[i]
};
list1.push(obj_recall);
};
Each list will look like this:
list = [{encode: ...jpg}, {encode: ...jpg}..., {recall: ...jpg}, {recall:...jpg}...]
What is a smarter way to make six of these without writing six-fold redundant code?
Oh, also, pregenerated_faces is an array of .json objects containing all the encoding and recall faces image strings.

var lists = [];
for (var face of pregenerated_faces) { //should loop 6 time
var list = [];
face .encoding_faces.forEach( e => list.push({'encode': e}));
face .recall_faces.forEach( e => list.push({'recall': e}));
list.push(list);
}

Check this, I have created a function that will give you N lists depending upon the input size of your pregenerated_faces, and your list renderer is also out of the implementation so that it can be used anywhere... and can be changed too
function getNObjects(N, keyCallback) {
const output = []
for (var i = 0; i < N; i++) {
output.push(keyCallback(i));
}
return output
}
// your code
function createList(index) {
var list = [];
var enc_len = pregenerated_faces[index].encoding_faces.length;
var rec_len = pregenerated_faces[index].recall_faces.length;
for (var i = 0; i < enc_len; i++) {
var obj_encode = {
'encode': pregenerated_faces[index].encoding_faces[i]
};
list.push(obj_encode);
};
for (var i = 0; i < rec_len; i++) {
var obj_recall = {
'reacall': pregenerated_faces[index].recall_faces[i]
};
list.push(obj_recall);
};
return list
}
// Test case
const pregenerated_faces = [{
name: "Ardis Pool",
gender: "male"
},
{
name: "Barbra Panganiban",
gender: "female"
},
{
name: "Ralph Sales",
gender: "male"
},
]
// Test Function
function testFunction(index) {
var list = [];
var enc_len = pregenerated_faces[index].name
var rec_len = pregenerated_faces[index].gender
var obj_encode = {
'encode': enc_len
};
list.push(obj_encode);
obj_recall = {
'reacall': rec_len
};
list.push(obj_recall);
return list
}
const [one, two, three] = getNObjects(3, testFunction);
console.log(one, two, three)

Related

Calling all possible arrays from the length of another array

What I'm working on is a menu that auto updates its entries based on an array length. It adds groups of 10 objects' properties (in this case "IDnumbers") to the menu if a new object is added to the array.
var arraysOfObject = [], obj = {"IDNumber": ""};
for(i = 0; i<42; i++){
arraysOfObject.push({"IDNumber": "Number " + i});}
Above is the array holding 42 objects with a specific property.
var array2 = [];
var leftOver = arraysOfObject.length % 10;
var groupsOfTen = (arraysOfObject.length - leftOver)/10;
for (var i = 0; i < groupsOfTen; i++) {
array2.push([]);
for (var j = i*10; j < i*10 + 10; j++)
array2[i].push(arraysOfObject[j]["IDNumber"]);
}
//now the leftover
if (leftOver > 0) {
array2.push([]);
for (var i = groupsOfTen*10; i < arraysOfObject.length; i++)
array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]);
}
The array2 above is the array that stores all the possible arrays that can be grouped by 10 from arraysOfObject. In this case there are 5 inside of it, because 4 arrays holds 40 objects, and 1 array holds the 2 remainders.
That all works fine, but placing the array2 inside the menu displays all possible IDnumbers grouped together, but not grouped individually. I have to declare each possible array inside of it like so sets = [array2[0], array2[1], array2[2], array2[3], array2[4]]; If there's a 6th possible array because object #51 has been added to arraysOfObject, I have to input it with array2[5].
I don't want it to depend on my input, but that it knows the number of possible arrays and that it displays it automatically in sets. How do I do that?
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
sets = [array2[0], array2[1], array2[2], array2[3], array2[4], array2[5]];
gui.add(data, 'message', 'Dat.Gui Menu!');
gui.add(data, 'system', {
"1": 0,
"2": 1,
"3": 2,
"4": 3,
"5": 4,
"6": 5,
}).name('system #').onChange(function(value) {
updateSets(value);
});
gui.add(data, 'Sets', sets[0]).onChange();
function updateSets(id) {
var controller = gui.__controllers[2];
controller.remove();
gui.add(data, 'Sets', sets[id]).onChange();
data.Sets = 0;
gui.__controllers[2].updateDisplay();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>
<script>
var arraysOfObject = [], obj = {"IDNumber": ""};
for(i = 0; i<42; i++){
arraysOfObject.push({"IDNumber": "Number " + i});}
var array2 = [];
var leftOver = arraysOfObject.length % 10;
var groupsOfTen = (arraysOfObject.length - leftOver)/10;
for (var i = 0; i < groupsOfTen; i++) {
array2.push([]);
for (var j = i*10; j < i*10 + 10; j++)
array2[i].push(arraysOfObject[j]["IDNumber"]);
}
//now take care of the leftover
if (leftOver > 0) {
array2.push([]);
for (var i = groupsOfTen*10; i < arraysOfObject.length; i++)
array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]);
}
</script>
Not the issue at hand, but I was playing around with the dat.gui as you posted it and was wondering if the dropdown could be refilled without removing/adding/etc. It seems to work with .options. (NB The initialization code makes heavy use of ES6, but can work without. The system menu is created dynamically from the sets array)
let arraysOfObject =Array.from({length:42}, (o,i) => "Number " + i),
ch =10, sets = Array.from({length:Math.ceil(arraysOfObject.length/ch)}, (a,i) => arraysOfObject.slice(i*=ch, i+ch));
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
gui.add(data, 'message', 'Dat.Gui Menu!');
gui.add(data, 'system', sets.reduce((obj,s,i) => (obj[i+1] = i, obj), {})).name('system #').onChange(updateSets);
let controller = gui.add(data, 'Sets');
updateSets(0);
function updateSets(id) {
controller = controller.options(sets[data.Sets = id]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>
I think the easiest solution would be to use ES2015's spread operator which I don't know if you would want to use yet...
ES2015 method (demo)
sets = [...array2];
There are a few other changes in the demo to set the system variable
But after taking a closer look, you can optimize the code by using the method from this SO answer to chunk your array using slice(). Also, I'm not sure why an object was used to create array entries when it just ends up as a string... demo
var arraysOfObject = [],
system = {},
chunk = 10,
size = 92;
for (var i = 0; i < size; i++) {
arraysOfObject.push("Number " + i);
}
var sets = [];
var index = 0;
for (i = 0; i < size; i += chunk) {
sets.push(arraysOfObject.slice(i, i + chunk));
system[index + 1] = index++;
}
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
gui.add(data, 'message', 'Dat.Gui Menu!');
gui
.add(data, 'system', system)
.name('system #')
.onChange(function(value) {
updateSets(value);
});
gui.add(data, 'Sets', sets[0]).onChange();
function updateSets(id) {
var controller = gui.__controllers[2];
controller.remove();
gui.add(data, 'Sets', sets[id]).onChange();
data.Sets = 0;
gui.__controllers[2].updateDisplay();
}

How could I iterate with a for loop to create many objects with Object.create on the fly in javascript?

I am trying to create a function that will dynamically create objects on the fly based on the input number arguments, but I'm running into an issue with iterating over the Object.create() part. I don't know where to play my i in the for loop, but ideally I would have all the sportsCar objects stored in the sportArray. That is the target at least.
function car(doors, capacity, storage) {
this.doors = doors;
this.capacity = capacity;
this.storage = storage;
};
var van = Object.create(car);
van.doors = 4;
van.storage = "rear storage";
var miniVan = Object.create(van);
miniVan.capacity = "200 LB";
var cargoVan = Object.create(van);
cargoVan.capacity = "800 LB";
var truck = Object.create(car);
truck.doors = 2;
truck.storage = "bed";
truck.capacity = "1500 LB";
var familyCar = Object.create(car);
familyCar.doors = 4;
familyCar.storage = "large trunk";
familyCar.capacity = "300 LB";
var sportsCar = Object.create(car);
sportsCar.doors = 2;
sportsCar.storage = "small trunk";
sportsCar.capacity = '100 LB';
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
sportsObjs = for(var i = 0; i < n1; i++){
Object.create(sportsCar);
}
sportArray.push(sportsObjs);
for (var i = 0; i < n2; i++){
Object.create(familyCar);
}
for(var i = 0; i < n3; i++){
Object.create(truck)
}
for(var i = 0; i < n4; i++){
Object.create(miniVan)
}
for(var i = 0; i < n5; i++){
Object.create(cargoVan)
}
return console.log(sportsArray);
}
sportsObjs = for(var i = 0; i < n1; i++){
Object.create(sportsCar);
}
sportArray.push(sportsObjs);
That's a plain syntax error. A loop is a statement in JavaScript, not an expression - it doesn't yield a value. You can't assign it to a variable. What you actually want is to assign each newly created object to the variable, and then push that particular new object to the array:
for (var i = 0; i < n1; i++){
var sportsObj = Object.create(sportsCar);
sportArray.push(sportsObj);
}
You need only to push objects in the array inside the loop:
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
for(var i = 0; i < n1; i++){
sportArray.push(Object.create(sportsCar)); // To create a generic Object sportArray.push({});
}
.... // And so on for all the arrays
}
The problem is that you declared the different arrays as var so they are not visible outside the body of the function.
You need to return an object containg all the arrays, something like that:
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
...
return {
sportArray: sportArray,
familyArray : familyArray,
truckArray: truckArray,
miniArray: miniArray,
cargoArray: cargoArray
}
}
So you can do something like:
var result = tally(3, 4, 5, 6, 7);
console.log(result.sportArray.length);
To be more succint with parameters:
function tally(parameters) {
...
for (var i = 0; i < parameters.n1; i++) {
...
}
...
}
Calling tally in this manner:
var result = tally({n1: 3, n2:4, n3:5, n4:6, n5:7});

JavaScript making an array of key value object from a string

I have a string like this
var information = 'name:ozil,age:22,gender:male,location:123 street';
I want to make an array of key value object like this
var informationList=[
{
'key':'name',
'value':'ozil'
},
{
'key':'gender',
'value':'male'
},
{
'key':'location',
'value':'123 street'
},
]
Using split and map:
var information = 'name:ozil,age:22,gender:male,location:123 street',
result = information.split(',').map(function(item){
var arr = item.split(':');
return {
key: arr[0],
value: arr[1]
}
});
document.write(JSON.stringify(result));
You can try this:
var list = [];
var pairs = information.split(',');
for (var i = 0; i < pairs.length; i++) {
var p = pairs[i].split(':');
list.push({
key: p[0],
value: p[1]
});
}
This should do it:
var input = "name:ozil,age:22,gender:male,location:123 street";
var temp = input.split(",");
var result = [];
for(var i=0; i < temp.length; i++) {
var temp2 = temp[i].split(":");
result.push({key:temp2[0], value:temp2[1]});
}
console.log(result);
result now contains what you specified.

Merge objects in arrays in Javascript

I have three objects in two arrays:
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
My goal is merge that arrays like this:
var tab3 = [ {"foo":"bar", "2foo":"2bar"}, {"foo2":"bar2",
"2foo2":"2bar2"}, {"foo3":"bar3", "2foo3":"2bar3"} ];
How can I do this?
If you're using jQuery, you can use jQuery.extend().
It does exactly what you want.
Example:
for (var i = 0; i < tab1.length; i++) {
tab1[i] = $.extend(tab1[i], tab2[i]);
}
Here's a fiddle: http://jsfiddle.net/fCx9C/2/
If you don't want to use jQuery, you can see how they implement jQuery.extend() here.
If you do want to use jQuery, here's the jQuerified loop:
$.each(tab1, function (i, t) {
t = $.extend(t, tab2[i]);
});
Demo
function merge(obj1, obj2) {
var tmp = {};
for (var key in obj1) {
tmp[key] = obj1[key];
};
for (key in obj2) {
tmp[key] = obj2[key];
};
return tmp;
};
function zip(arr1, arr2) {
var tmp = [];
for (var i = 0, len = arr1.length; i < len; i++) {
tmp[i] = merge(arr1[i], arr2[i]);
};
return tmp;
};
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
console.log(zip(tab1, tab2));
This should do what you want:
var merge = function(t1, t2) {
var arr = [];
for(i=0; i<t1.length; i++) {
for(var prop in t2[i]) {
arr.push(t1[i]);
arr[i][prop] = t2[i][prop];
}
}
return arr;
}
var tab3 = merge(tab1, tab2);
This can be done in vanilla JavaScript quite nicely:
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
var tab3 = [];
for(var i = 0; i < 3; i++) {
for(var j in tab2[i]) {
tab1[i][j] = tab2[i][j];
}
tab3.push(tab1[i]);
}
console.log(tab3);
However, you don't even have to create a tab3 array as it puts everything nicely into tab1 already.

Regrouping javascript array

I have the below javascript array with me
var test =[{
Maths:{
ST1:10,
ST2:2,
ST3:15}
},
{
Science:{
ST1:50,
ST3:40}
}
]
I want to generate the array shown below out of this
var t = [{ST1:{
Maths:10,
Science:50
},
ST2:{
Maths:2,
Science:0
},
ST3:{
Maths:15,
Science:40
}
}]
I tried using the code shown below
for (var key in test) {
if (test.hasOwnProperty(key)) {
for (var key1 in test[key]){
//console.log(key1)}
var abc = test[key][key1];
for(var x in abc)
{
console.log(x+key1+abc[x])
}
}
}
}
I am new to this help me doing this.
This does mostly what you want...
var t = {};
for (var i = 0; i < test.length; i++) {
for (var name in test[i]) {
for (var level in test[i][name]) {
if (!t[level])
t[level] = {}
t[level][name] = test[i][name][level]
}
}
}
Only thing missing is to get the Science:0 for when a STx value is missing under a section.
DEMO: http://jsfiddle.net/eHwBC/
Result:
{
"ST1": {
"Maths": 10,
"Science": 50
},
"ST2": {
"Maths": 2
},
"ST3": {
"Maths": 15,
"Science": 40
}
}
Keep in mind that there's no guaranteed order when using for-in for enumeration.
If the labels (Math, Science, etc) are known in advance, then you can ensure that each object gets all labels.
If not, a separate loop can be done. Depending on the approach, it could be done before or after this main loop.
Do you know about JSON.stringify(t)?
It will convert an object literal to JSON.
Mozilla's documentation of this function is available at https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringify.
You can also read this blog article for further explanation
Try this:
var test =[{
Maths:{
ST1:10,
ST2:2,
ST3:15
}
},
{
Science:{
ST1:50,
ST3:40}
}
];
var result = [];
for(i = 0; i <= test.length; i++){
var resultRow = {};
for(key in test[i]){
for(subKey in test[i][key]){
if(resultRow[subKey] == undefined){
resultRow[subKey] = {};
}
resultRow[subKey][key] = test[i][key][subKey];
}
}
result.push(resultRow);
}
Try like below,
/* Iterator start */
var t = {};
for (var i = 0; i < test.length; i++) { //Iterate Maths, Science,..
for (var key in test[i]) { //Iterate Math
for (var iKey in test[i][key]) { //Iterate ST1, ST2, ST3
var s = (t.hasOwnProperty(iKey))?t[iKey]:createObject();
s[key] = test[i][key][iKey];
t[iKey] = s;
}
}
}
/* Iterator End */
p = [];
p.push(t);
//^- p is what you want
// Separate function so you can add more items later without changing logic
function createObject () {
return {'Maths' : 0, 'Science': 0};
}
DEMO and Proof below,

Categories