Develop Reference

How to dynamically get a list of objects from an array using an array of values

I have a list of objects (called this.listOfDesserts):
Each object (this.listOfDesserts) containing the following:
I also have a variable called this.relevantColumns which is dynamically generated though a line of code like so:
this.relevantColumns = this.listOfCakes.summaryCakes.numberOfUsers;
The end result is always an array. As an example it could equal something like ['1305','1306']
How can I generate a list from this.listOfDesserts of all objects where the index (In the 2nd image I believe it's represented by the purple e.g. 1304,1305,1306,1307,1308,header,id) is equal to the values of an array (this.relevantColumns)?
In this example how would I be able to get a list of all objects in this.listOfDessert with indexes 1305 and 1306 without hardcoding?
Everything is written dynamically so I can't really use hardcoded lines like this.variableName[1304].

There are two stages.
One, obtain a complete dictionary of all the values
listOfDesserts = [{ 1: {obj: 1}, 2: {obj: 2}} , {3: {obj: 3}}]
listOfDessertsFlattened = Object.assign({}, ...listOfDesserts) // { '1': { obj: 1 }, '2': { obj: 2 }, '3': { obj: 3 } }
Two, map over the relevant columns and get the result from the array:
listOfDessertsFlattened = { 1: {obj: 1}, 2: {obj: 2}, 3: {obj: 3}};
relevantColumns = [1, 3];
result = relevantColumns.map((columnName) => listOfDessertsFlattened[columnName]) //[ { obj: 1 }, { obj: 3 } ]

How to insert a object in an array (as a element )

I am from C++ background.
I am trying to translate a C++ code to JavaScript.
in C++ we have vector < pair < int,int > > to store pairs.
in JS i have a situation. i want to store 2D coordinates. i actually want to push new coordinates to the array.
i did like
first I created a Object
const coordinate = {
x= 9,
y= 10
}
Then i tried to push that object into the array CoordinateStorage that i want this object to get stored
CoordinatesStorage.unshift({X : coordinate.x, Y : coordinates.y});
I know this code shown above is absolutely wrong to store an object into the array. I searched out for sources but i got nothing useful.
Please recommend some sources that i can refer for such translation related problems if possible.

Generally speaking, we should use the .push method for an array.
There are other methods available you can find them here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array but the .push method for your case is more suitable.
Basically, as a result, we want to have something like this:
[ {x: 2, y: 4 }, { x: 2, y: 4 } ] We have an array of objects.
Or we could also have an array of arrays:
[[1, 2], [3, 4], [4, 6]] Not sure if it okay for your case, but maybe as an option.
Also, we could create a class Vector and we might have something like
[ Vector { x: 1, y: 2 }, Vector { x: 3, y: 4 }, Vector { x: 4, y: 6 } ]
Let's take a look at the examples:
Using the plain object for the vector:
const coordinate1 = {
x: 2,
y: 4
};
const coordinate2 = {
x: 3,
y: 4
};
const coordinatesStorage = [];
coordinatesStorage.push(coordinate1);
coordinatesStorage.push(coordinate2);
If you will do console.log(coordinatesStorage) you will see [ { x: 2, y: 4 }, { x: 3, y: 4 } ]
Using the array to store a vector:
const coordinate1 = [1, 2];
const coordinate2 = [3, 4];
const coordinatesStorage = [];
coordinatesStorage.push(coordinate1);
coordinatesStorage.push(coordinate2);
The coordinatesStorage will be [ [ 1, 2 ], [ 3, 4 ] ]
Using the Vector class:
Maybe in your case, it would be more helpful to operate with a class Vector:
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
const coordinatesStorage = [];
coordinatesStorage.push(new Vector(1, 2));
coordinatesStorage.push(new Vector(3, 4));
coordinatesStorage.push(new Vector(4, 6));
And here in the console you will see [ Vector { x: 1, y: 2 }, Vector { x: 3, y: 4}, Vector { x: 4, y: 6 } ]
Take a look at the Vector implementations in JS:
https://gist.github.com/jjgrainger/808640fcb5764cf92c3cad960682c677
https://github.com/maxkueng/victor/blob/master/index.js
I hope this helps. Good luck!

First initialize the array
var CoordinatesStorage = [];
//create object
const coordinate = {
x: 9, // Note - the operator is colon : not = as in the question
y: 10
}
// push to array
CoordinatesStorage.push(coordinate);
Now your array will be like this [{x:9, y:10}] if you push again the array will be [{x:9, y:10}, {x:9, y:10}]
Tip: Arrays are denoted by square brackets eg: ['math', 'science', 'english']
Objects are denoted by key-value pairs wrapped in curly brackets
eg: var student = {
name: "John", // string value
age: 6, // integer value
sex: "M",
phone: [123456789 , 564654654] // value is of array of 2 items
}

Better way to convert JSON to arrays for graphing timeseries in C3?

I'm working on converting some JSON data into a format that will work for graphing a timeseries in C3, which takes an array of arrays as column input. I have my unique x values array, but I can't figure out a great way to get my y values. Once I get this done, I need to add y2 with numSold, but I think if I can solve this, I'll be able to figure that part out.
This is the final format I need for the data:
[
["x", "9-2-17", "9-4-17", "10-2-17"],
['item1-cost', 100, 150, 10],
['item3-cost', 200, null, 20],
...
]
There isn't a set number of dates or set number of items. It's whatever I read from the database. The item numbers aren't necessarily consecutive. We only care about graphing the data for items we have data for. But there won't be data for every date-item combination. When that happens, I need to insert a null to indicate that the item didn't have data for that date. Item numbers are 1-indexed.
I'm fine with using anything from lo-dash or D3 in addition to the plain JavaScript functions to solve this, but I'm trying to avoid hard to read code and inefficient code. I feel like others must have had a need for this and that there must be some sort of function like maybe a filter function that I should be using instead.
My current implementation is not as efficient as I'd like and is a bit hard to read. I'm using the item number as an index and making a sparse array that I'll have to condense later. Here's the psudocode:
For every d object in data
For the i index of d.date in uniqueDates
If values[d.item] is undefined
Fill values[d.item]] with null for uniqueDates.length
Set values[d.item][i] to d.cost
Convert values to dense format for graphing
Here's a link to the Fiddle I'm playing with:
https://jsfiddle.net/dbkidd/q3r3moqu/
var data = [
{date: '9-2-17', item: 1, cost: 100},
{date: '9-2-17', item: 3, cost: 200},
{date: '9-4-17', item: 1, cost: 150},
/* '9-4-17' does not have an entry for item 3 so cost should be counted as null */
{date: '10-2-17', item: 1, cost: 10},
{date: '10-2-17', item: 3, cost: 20}
]
var uniqueDates = _.uniq(_.flatMap(data, 'date'));
uniqueDates.unshift('x');
var values = [];
values.push(uniqueDates);
function getLabel(index) {
return 'item' + index + '-' + 'cost';
}
for (var d = 0; d < data.length; d++) {
var i = _.indexOf(uniqueDates, data[d].date);
if (data[d].item !== undefined) {
var item = data[d].item;
if (values[item] === undefined) {
values[item] = _.fill(Array(uniqueDates.length), null);
values[item][0] = getLabel(item);
}
values[item][i] = data[d].cost;
}
}
function checkIfUndefined(x) {
return (x !== undefined);
}
function sparseToDense(data) {
return data.filter(checkIfUndefined);
}
values = sparseToDense(values);

I was intrigued by this problem and came up with a first version. It's a little different than yours but here it is. I will note that I didn't try to sort the dates or rename the items to something useful but those can be added.
var data = [
{date: '9-2-17', item: 1, cost: 100},
{date: '9-2-17', item: 3, cost: 200},
{date: '9-4-17', item: 1, cost: 150},
/* '9-4-17' does not have an entry for item 3 so cost should be counted as null */
{date: '10-2-17', item: 1, cost: 10},
{date: '10-2-17', item: 3, cost: 20},
{date: '10-3-17', item: 2, cost: 2000}
]
// utility functions
const product = (...sets) =>
sets.reduce((acc, set) =>
_.flatten(acc.map(x => set.map(y => [ ...x, y ]))),
[[]]);
// the meat and potatoes
const builder = lookup => pairs => pairs.reduce((agg, [item, date]) => {
const out = _.cloneDeep(agg);
const value = _.get(lookup, [date, item, 'cost'], null);
const evalue = _.get(out, date, []);
evalue.push(value);
_.set(out, date, evalue);
return out;
}, {})
// setup data structures for searching
const byDateByItem = _.mapValues(_.groupBy(data, 'date'), x => _.keyBy(x, 'item'));
const items = _.uniq(data.map(x=>x.item));
const dates = _.uniq(data.map(x=>x.date));
// create all posibilities
const pairs = product(items, dates);
// populate possibilities with values
const hash = builder(byDateByItem)(pairs);
// put keys with values in their respective lists
const p = _.toPairs(hash).map(_.flatten);
// smash data into a matrix type thing
const table = [['x',...items], ...p];
// flip the table on it's side (╯°□°）╯︵ ┻━┻
const out = _.zip(...table);
console.log('out', out);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

I am getting extra x value in array object using javascript

I am actually trying to display canvas.js chart using this json dynamically.
I have this result:
[{"s":40,"ProductName":"yoga pants"},
{"s":20,"ProductName":"trousers"},{"s":16,"ProductName":"shirts"},
{"s":10,"ProductName":"pants"},{"s":7,"ProductName":"RED"},
{"s":5,"ProductName":"Tank Top"}]
…which is a json string
I am getting this:
[{40: "yoga pants", x: 0},
{20: "trousers", x: 1},
{16: "shirts", x: 2},
{10: "pants", x: 3},
{7: "RED", x: 4},
{5: "Tank Top", x: 5}]
But i do not want this extra x: value. I am using this code:
var result1 = JSON.parse(result);
var reformattedArray = result1.map(function (o)
{
var obj = {};
obj[o.s] = o.ProductName;
return obj;
});
Thanks in advance

It appears to me that what is really happening is that your reformattedArray is fine, but you are subsequently piping it through charting software that is assigning the x: property, effectively indexing your data for the x axis of a chart.
Is it possible that the result you are reporting is not the result of your map, but rather the result of an additional step?

Convert Js Array to JSON object with keys

I want to use the same object for jQplot and a library built on jQtable.
jQplot is fine with arrays but jQtable's library needs an named object (dictionary).
vals =
[
[1, 2],
[3,5.12],
[5,13.1],
[7,33.6],
[9,85.9],
[12,54],
[11,219.9]
];
This is my js array
I want it to be like
{
data: [{
X: 1,
Y: 2
},
{
X: 3,
Y: 5.12
},
{
X: 5,
Y: 13.1
}]
}
How to convert js array into named JSON array of objects? Are there any built in methods or I define my own method to read up that array and create a String for JSON?

var array = vals.map(function(val) {
return {
X : val[0],
Y : val[1]
};
});

var data = Object.keys(vals).map(function(key) {
return {X : vals[key][0], Y : vals[key][1]};
});