Create object array javascript - javascript

I have inherited a project and need to recreate an object in this format (dynamically) but have not sure how to do it. This is what I tried and it's almost there:
//this creates [{ "Country": ["Canada", "United States of America"] }]
filters = [];
var object = {};
object.Country = [];
object.Country.push('Canada', 'United States of America');
filters.push(object);
//alert(JSON.stringify(filters));
console.log(JSON.stringify(filters));
//currently getting this
//filters = [{ "Country": ["Canada", "United States of America"] }]
//need this
//filters = { 'Country': ['Canada', 'United States of America'] };
I have a form where the user will select the column in a table (Country) and then enter one or more countries. Currently the filter works based on the hard coded object above. I need to now change the object on the fly for other columns.
Any help would be much appreciated.

Related

Updating the values in map in javascript

Trying to update the values in a map in javascript. Below is how my map looks like.
Data in Map :[{…}]
[{
accId: "001",
lineOfBusiness: "Protection",
name: "Ins",
plannedValue: 1200.18,
SellOutValue: 4115.85,
productGroup: "INS",
sesnId: "a2s",
subGroups: [{
accountId: "001",
brandName: "INS",
isLocked: true,
lineOfBusiness: "Ction",
name: "Ins",
portfolioId: "a34",
productGroup: "IDES",
recordId: "006",
seasonId: "a2s",
territoryId: "0MI",
unitOfMeasurement: "MXN"
}]
}]
Here i am trying to update the map values plannedValue and SellOutValue with the updated values in a new map. when i am executing the below code i am getting the error
set is not a function.
//Cloning the map and formatting the values
let map1 = {};
for(var i in incoming){
map1[i] = incoming[i]
map1[i].set('plannedValue',map1[i].plannedValue.toLocaleString())
map1[i].set('SellOutValue',map1[i].SellOutValue.toLocaleString())
}
console.log(map1);
can someone please help me on this

map[i] is an object (an element of the incoming Map), not a Map. So use ordinary property access.
map[i].plannedValue = map1[i].plannedValue.toLocaleString();
map[i]. SellOutValue = map1[i].SellOutValue.toLocaleString();
Note that you're not making clones of the objects in the Map, so this will modify the original objects as well.

localStorage Array of Objects: Only push new object into array if unique

I have read through a number of Stack Overflow questions but none appear to be relevant to the problem I'm trying to solve.
I have an array of objects that I'm saving in localStorage which looks like this (this example includes just two):
[
{
"image": "http://example-image.jpg",
"restaurantName": "Elena's L'Etoile",
"parentLocation": "London",
"areaLocation": "West End of London",
"pageLink": "http://example-address1"
},
{
"image": "http://example-image2.jpg",
"restaurantName": "Pied a Terre",
"parentLocation": "London",
"areaLocation": "West End of London",
"pageLink": "http://example-address2"
}
]
Each time a user visits a page, data is pulled from the page, and a restaurant object is created which looks like this:
var restaurant = {"image": $image, "restaurantName": $restaurantName, "parentLocation": $parentLocation, "areaLocation": $areaLocation, "pageLink": $pageLink};
This is then stored pushed into the existing array of objects (above) with:
existingRestaurants.push(restaurant);
The problem is that if the user visits the same page twice, duplicate objects are pushed in the array. How can I ensure that only unique objects are pushed into the array?
Approaches I've looked into: using $.each, $.inArray, $.grep. I thought that the simplest way would be to loop through all the objects in the existingRestaurants array and compare the value of the "restaurantName" key with the corresponding value in the new restaurant object.
But I haven't been able to find anything else similar on Stack Overflow.

There's a few solutions you could use here. The first is to keep your current array of objects and scan them all for a duplicate restaurant name before inserting a new one. This would look something like this:
// assuming 'arr' is the variable holding your data
var matches = $.grep(arr, function(obj) {
return obj.restaurantName == $restaurantName;
});
if (matches.length) {
console.log('Duplicate found, item not added');
} else {
var restaurant = {
"image": $image,
"restaurantName": $restaurantName,
"parentLocation": $parentLocation,
"areaLocation": $areaLocation,
"pageLink": $pageLink
};
arr.push(restaurant);
}
Working example
Alternatively, and preferably, you could amend your data structure to be an object with the keys being the value which cannot be duplicated; in this case the restaurant names:
var arr = {
"Elena's L'Etoile": {
"image": "http://example-image.jpg",
"parentLocation": "London",
"areaLocation": "West End of London",
"pageLink": "http://example-address1"
},
"Pied a Terre": {
"image": "http://example-image2.jpg",
"parentLocation": "London",
"areaLocation": "West End of London",
"pageLink": "http://example-address2"
}
};
if (arr[$restaurantName]) {
console.log('Duplicate found, item not added');
} else {
var restaurant = {
"image": $image,
"parentLocation": $parentLocation,
"areaLocation": $areaLocation,
"pageLink": $pageLink
};
arr[$restaurantName] = restaurant;
}
Working example

How about an associative array? You'll have to select a key though:
var restaurant0 = {"image": "http://example-image.jpg", "restaurantName": "Elena's L'Etoile", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address1" };
var restaurant1 = {"image": "http://example-image2.jpg", "restaurantName": "Pied a Terre", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address2"};
var existingRestaurants = {};
existingRestaurants["id0"] = restaurant0;
existingRestaurants["id1"] = restaurant1;

Nested JSON Objects with Dimple.js

I'm attempting to create a stacked bar chart with Dimple.JS and D3. However, the JSON file I wish to use with this particular visualization involves nested JSON objects (below). The stacked bar chart I wish to create has the channel category as its x-axis, with the y axis to be the aggregate count of the different locations (with each location as a 'stack'). Here is the original data:
[{
"channel": "politics",
"locations":
[{
"name":"usa",
"count" : 1454
},
{
"name":"mexico",
"count":3543
},
{
"name":"antarctica",
"count":4352
}]
},
{
"channel": "economics",
"locations":
[{
"name":"usa",
"count" : 12431
},
{
"name":"mexico",
"count":314
},
{
"name":"china",
"count":2321
}]
}]
I've flattened the above into the JSON below, but I am having trouble using Dimple's .addSeries() method to create the stack.
[
{
"channel": "politics",
"locations[0].name": "usa",
"locations[0].count": 1454,
"locations[1].name": "mexico",
"locations[1].count": 3543,
"locations[2].name": "antarctica",
"locations[2].count": 4352
},
{
"channel": "economics",
"locations[0].name": "usa",
"locations[0].count": 12431,
"locations[1].name": "mexico",
"locations[1].count": 314,
"locations[2].name": "china",
"locations[2].count": 2321
}
]
My question is this: how can Dimple support either this data encoded in this particular JSON file? Most samples use CSV and TSV files, but I unfortunately have the limit of using only JSON files.

Dimple can't use nested data. You'll have to flatten it on the client side so there's a single JSON object for each intersection of channel/location. Here's an example of how to do that with Underscore.js :
var chartData = _.chain(data)
.map(function(row, index){
// for each original row, return a new row for each location
return _.map(row.locations, function(location){
return {
'channel' : row.channel,
'name' : location.name,
'count' : location.count
};
});
})
.flatten()
.value();
(For every row in the original data set, it will return three rows, one for each location. This will return an array of nested arrays, so it calls flatten to make the whole array 1 level deep.)
Here's a jsBin showing that in action : http://jsbin.com/nuvihu/edit?html,js,output
(output):
If this helps, here is what the data ended up looking like :
[{"channel":"politics","name":"usa","count":1454},{"channel":"politics","name":"mexico","count":3543},{"channel":"politics","name":"antarctica","count":4352},{"channel":"economics","name":"usa","count":12431},{"channel":"economics","name":"mexico","count":314},{"channel":"economics","name":"china","count":2321}]

JSON - Accessing JSON Array and assigning variables

I have the following JSON in a file called census.json:
{
"areas": [
"UnitedStates", [{
"STATEORREGION": "United States",
"1910POPULATION": 92228531,
"1920POPULATION": 106021568,
"1930POPULATION": 123202660,
"1940POPULATION": 132165129,
"1950POPULATION": 151325798,
"1960POPULATION": 179323175,
"1970POPULATION": 203211926,
"1980POPULATION": 226545805,
"1990POPULATION": 248709873,
"2000POPULATION": 281421906,
"2010POPULATION": 308745538,
"1910CHANGE": 21,
"1920CHANGE": 15,
"1930CHANGE": 16.2,
"1940CHANGE": 7.3,
"1950CHANGE": 14.5,
"1960CHANGE": 18.5,
"1970CHANGE": 13.3,
"1980CHANGE": 11.5,
"1990CHANGE": 9.8,
"2000CHANGE": 13.2,
"2010CHANGE": 9.7
}],
"Alabama", [{
"STATEORREGION": "Alabama",
"1910POPULATION": 2138093,
"1920POPULATION": 2348174,
"1930POPULATION": 2646248,
"1940POPULATION": 2832961,
"1950POPULATION": 3061743,
"1960POPULATION": 3266740,
"1970POPULATION": 3444165,
"1980POPULATION": 3893888,
"1990POPULATION": 4040587,
"2000POPULATION": 4447100,
"2010POPULATION": 4779736,
"1910CHANGE": 16.9,
"1920CHANGE": 9.8,
"1930CHANGE": 12.7,
"1940CHANGE": 7.1,
"1950CHANGE": 8.1,
"1960CHANGE": 6.7,
"1970CHANGE": 5.4,
"1980CHANGE": 13.1,
"1990CHANGE": 3.8,
"2000CHANGE": 10.1,
"2010CHANGE": 7.5
}],
"Alaska", [{
"STATEORREGION": "Alaska",
"1910POPULATION": 64356,
"1920POPULATION": 55036,
"1930POPULATION": 59278,
"1940POPULATION": 72524,
"1950POPULATION": 128643,
"1960POPULATION": 226167,
"1970POPULATION": 300382,
"1980POPULATION": 401851,
"1990POPULATION": 550043,
"2000POPULATION": 626932,
"2010POPULATION": 710231,
"1910CHANGE": 1.2,
"1920CHANGE": -14.5,
"1930CHANGE": 7.7,
"1940CHANGE": 22.3,
"1950CHANGE": 77.4,
"1960CHANGE": 75.8,
"1970CHANGE": 32.8,
"1980CHANGE": 33.8,
"1990CHANGE": 36.9,
"2000CHANGE": 14,
"2010CHANGE": 13.3
}], ]
}
I am trying to access the different values stored in the array using the following:
$.getJSON("../data/census.json", function (json) {
var censusData = json;
console.log(censusData.areas);
});
This logs all the states to the console as an object, so I then tried to go down another level with:
$.getJSON("../data/census.json", function (json) {
var censusData = json;
console.log(censusData.areas.UnitedStates);
});
but this returns "undefined". How can I drill down another level? Ideally I would like to access each states population for a specific year and then assign it to a variable that I can use later.

the pattern here is after each string name we have an array of related information:
so you can convert it to an object like
var _result = {};
for ( var i=0;i<arr.length/2;i++){
_result[arr[i]] = arr[i+1];
}
then you can directly access those information by their string names
like this
censusData.areas.UnitedStates
will return an array after this transformation

There is currently no second level as there are commas instead of colons between the state names and their properties:
"Alaska", [{
"STATEORREGION":"Alaska",
"1910POPULATION":64356,
...
This makes the values "Alaska" and the dictionary of properties adjacent elements in a list. It seems what you want is:
"Alaska": [{
"STATEORREGION":"Alaska",
"1910POPULATION":64356,
...

your json data is invalid try this,
{"areas" : [
"UnitedStates", [{
"STATEORREGION":"United States",
"1910POPULATION":92228531,
"1920POPULATION":106021568,
"1930POPULATION":123202660,
"1940POPULATION":132165129,
"1950POPULATION":151325798,
"1960POPULATION":179323175,
"1970POPULATION":203211926,
"1980POPULATION":226545805,
"1990POPULATION":248709873,
"2000POPULATION":281421906,
"2010POPULATION":308745538,
"1910CHANGE":21,
"1920CHANGE":15,
"1930CHANGE":16.2,
"1940CHANGE":7.3,
"1950CHANGE":14.5,
"1960CHANGE":18.5,
"1970CHANGE":13.3,
"1980CHANGE":11.5,
"1990CHANGE":9.8,
"2000CHANGE":13.2,
"2010CHANGE":9.7
}],
"Alabama", [{
"STATEORREGION":"Alabama",
"1910POPULATION":2138093,
"1920POPULATION":2348174,
"1930POPULATION":2646248,
"1940POPULATION":2832961,
"1950POPULATION":3061743,
"1960POPULATION":3266740,
"1970POPULATION":3444165,
"1980POPULATION":3893888,
"1990POPULATION":4040587,
"2000POPULATION":4447100,
"2010POPULATION":4779736,
"1910CHANGE":16.9,
"1920CHANGE":9.8,
"1930CHANGE":12.7,
"1940CHANGE":7.1,
"1950CHANGE":8.1,
"1960CHANGE":6.7,
"1970CHANGE":5.4,
"1980CHANGE":13.1,
"1990CHANGE":3.8,
"2000CHANGE":10.1,
"2010CHANGE":7.5
}],
"Alaska", [{
"STATEORREGION":"Alaska",
"1910POPULATION":64356,
"1920POPULATION":55036,
"1930POPULATION":59278,
"1940POPULATION":72524,
"1950POPULATION":128643,
"1960POPULATION":226167,
"1970POPULATION":300382,
"1980POPULATION":401851,
"1990POPULATION":550043,
"2000POPULATION":626932,
"2010POPULATION":710231,
"1910CHANGE":1.2,
"1920CHANGE":-14.5,
"1930CHANGE":7.7,
"1940CHANGE":22.3,
"1950CHANGE":77.4,
"1960CHANGE":75.8,
"1970CHANGE":32.8,
"1980CHANGE":33.8,
"1990CHANGE":36.9,
"2000CHANGE":14,
"2010CHANGE":13.3
}]
]
}

So I was able to access the data by changing the structure of the JSON to the following:
{"areas" : [
[{
"STATEORREGION":"United States",
"POPULATION1910":92228531,
"1920POPULATION":106021568,
"1930POPULATION":123202660,
"1940POPULATION":132165129,
"1950POPULATION":151325798,
"1960POPULATION":179323175,
"1970POPULATION":203211926,
"1980POPULATION":226545805,
"1990POPULATION":248709873,
"2000POPULATION":281421906,
"2010POPULATION":308745538,
"1910CHANGE":21,
"1920CHANGE":15,
"1930CHANGE":16.2,
"1940CHANGE":7.3,
"1950CHANGE":14.5,
"1960CHANGE":18.5,
"1970CHANGE":13.3,
"1980CHANGE":11.5,
"1990CHANGE":9.8,
"2000CHANGE":13.2,
"2010CHANGE":9.7
}],
[{
"STATEORREGION":"Alabama",
"1910POPULATION":2138093,
"1920POPULATION":2348174,
"1930POPULATION":2646248,
"1940POPULATION":2832961,
"1950POPULATION":3061743,
"1960POPULATION":3266740,
"1970POPULATION":3444165,
"1980POPULATION":3893888,
"1990POPULATION":4040587,
"2000POPULATION":4447100,
"2010POPULATION":4779736,
"1910CHANGE":16.9,
"1920CHANGE":9.8,
"1930CHANGE":12.7,
"1940CHANGE":7.1,
"1950CHANGE":8.1,
"1960CHANGE":6.7,
"1970CHANGE":5.4,
"1980CHANGE":13.1,
"1990CHANGE":3.8,
"2000CHANGE":10.1,
"2010CHANGE":7.5
}],
[{
"STATEORREGION":"Alaska",
"1910POPULATION":64356,
"1920POPULATION":55036,
"1930POPULATION":59278,
"1940POPULATION":72524,
"1950POPULATION":128643,
"1960POPULATION":226167,
"1970POPULATION":300382,
"1980POPULATION":401851,
"1990POPULATION":550043,
"2000POPULATION":626932,
"2010POPULATION":710231,
"1910CHANGE":1.2,
"1920CHANGE":-14.5,
"1930CHANGE":7.7,
"1940CHANGE":22.3,
"1950CHANGE":77.4,
"1960CHANGE":75.8,
"1970CHANGE":32.8,
"1980CHANGE":33.8,
"1990CHANGE":36.9,
"2000CHANGE":14,
"2010CHANGE":13.3
}]
]
}
Then I used:
$.getJSON( "../data/census.json", function( json ) {
var censusData = json;
console.log(censusData.areas[0][0].POPULATION1910);
});
Also note that I had to change 1910POPULATION to POPULATION1910 in order to access it without getting an error. There may be a better way to do this than changing every key name for every state.
When I want to access the next state I just changed censusData[0][0] to censusData[1][0] and so on and so forth.

The string "United States" is the first element in a list.
The data for The United States is in censusData.areas[1]. The structure of the JSON looks a bit strange.

Use value of variable in javascript?

I'm trying to do a WEB based power management system and I'm using PLC Siemens S7-1200. I want to use some tags from PLC in javascript to build a chart. When I use:
var chartData = [{
country: "USA",
visits: 230
}, ];
In chart code this works fine.
Now I want to use instead of the fixed numeric value "230" a variable value with the label "Voltage" as tag in the PLC. How can I do this?

If you have the value in the variable voltage, just use that variable in the object:
var chartData = [{
country: "USA",
visits: voltage
} ];
DEMO

Categories

Resources