Convert array of array objects into array of objects - javascript

I've spent the last couple hours going through some very similar answers to the above question but after a few implementations of loops and reduce I still have not gotten the solution I need.
I am getting an array of objects via service calls. I am pushing those controller array objects to another array because I need a single array to load data into a multi select. I.E.
StatesService.getAreaCities().then(function(response) {
controller.cities = response.data.rows;
controller.areaOptions.push(controller.cities);
});
StatesService.getAreaStates().then(function(response) {
controller.states = response.data.rows;
controller.areaOptions.push(controller.states);
});
controller.areaOptions = [];
This is an example of how I expect and need my array object to look.
With no modification this is how my array looks with those array objects pushed in.
How do I get the above data structure like the 1st image, an array of objects? I tried a solution with reduce()
var newCities = controller.cities.reduce(function(city){
return controller.city;
}, {});
controller.areaOptions.push(newCities);
but it wasnt what I was looking for because it returned a single object with all city property and all its values. I need each object to contain city and its value.
EDIT
I figured out the solution! Thanks to Lex.
I looped over each object in the array in each service and pushed the property.
Thanks to all for steering me in the right direction to figure this out, even the person that downvoted me :)
StatesService.getAreaCities().then(function(response) {
controller.cities = response.data.rows;
controller.cities.forEach(function(city){
controller.areaOptions.push(city);
});
});

Looks like response.data.rows is an array. So when you push response.data.rows into controller.areaOptions you are adding the rows array as an array element. (Basically making it a 2-dimensional array)
You should use Array.prototype.concat

Related

How to push data to specific sub-array in an empty 2-dimensional array

I'm trying to setup a 2-d array, which should receive values at specific sub-arrays. I created my array with:
myArray= Array(100).fill([])
Now, let's say I want to push a value to say sub-array number 40
I'm doing this like that:
myArray[40].push("myValue")
I would expect the value to be pushed only to the myArray[40] instead it is pushed as the first element of every of the hundred sub-arrays.
I searched for the solution for quite some time, but I still have no idea what I'm doing wrong. Please help.
fill will push the same value to each element, not a copy of it. That's fine when it's a number or string or something else immutable. But now each copy is a reference to the same object.
There are a number of ways to fix this. Here's one (switched to ten elements for demonstration):
const myArray = [...Array(10)].map((_, i) => [])
myArray[4].push('myValue')
console.log(myArray)

Error when wanting to push array into specific part of another array

I've been trying to push an array into another array in my local database. The first layer of arrays are different tests into which i push arrays of testresaults into which i want to push an array of comments using the following code:
if (Array.isArray(newTest1)) {
user.test1[1].push(newTest1);
}
If I change it so it pushes the array into test1 then it works, like this:
if (Array.isArray(newTest1)) {
user.test1.push(newTest1);
}
How come the first piece of code does not work?
user.test1[1] is most likely not an array.
user.test1.splice(1, 0, newTest1) should work for you.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.push is not sorted correctly when logging it

I receive an object from a REST endpoint which contains some values. I have processed the data correctly and access it, and use array.push to put it into an empty array.
However, the array is never sorted correctly. What gives?
Some sample code:
let high = data.High;
let medium = data.Medium;
let low = data.Low;
let exampleArr = [];
exampleArr.push(
{
high,
medium,
low
}
);
console.log(exampleArr)
The output in the console is consistently:
high: object
low: object
medium: object
The nested information in each is an object, but that shouldn't affect the sorting?
You are only adding one item ( the object with the three keys ) to your array, so at this point nothing can be sorted. If you will add more objects you can use array.sort with a compare function as a parameter to sort your objects based on objects keys.
As others have said, you are adding only one object to the array. In addition, console.log will order the fields of the single object alphabetically, rather than by insertion order. Hence you see high, low, medium.

Cloning and manipulating nested object using forEach, map, or filter without modifying original object

I'm trying to get a handle on using .map, .filter to clone and modify a big nested JSON object based on a deeply nested property. With the below code, the original data and the filtered data both end up getting modified, but I'm trying to leave the original data intact. What I'm hoping to do is have the deeply nested concerns array emptied in the final filtered object for a given id, leaving the original data as the original complete data set.
var data {...};
var dataFilter = function dataBuild(data) {
var newData = data;
newData.service_requests = newData.service_requests.map((request) => {
request.concerns = request.concerns.filter((concern) => {
return concern.building_id == 2
});
return request;
});
return newData;
};
var filtered = dataFilter(data);
Here's a fiddle with what I'm trying to do with the full object in there.
http://jsbin.com/doyoqinoxo/edit?js,console
When you do:
var newData = data;
you are simply making a second reference to the same object, so:
newData.service_requests = ...
overwrites the value in data.service_requests.
It seems you want newData to be a copy of data, not a reference to the same object. There are plenty of posts here on how to copy a nested object (a so–called deep copy), e.g. What is the most efficient way to clone an object?, but please ignore the accepted answer unless you are using jQuery. Use one of the other answers, like this one.
JSIterator .map() creates the new array with the same number of elements or does not change the original array. There might be the problem with referencing if there is object inside the array as it copies the same reference, so, when you are making any changes on the property of the object it will change the original value of the element which holds the same reference.
The solution would be to copy the object, well, array.Splice() and [...array](spread Operator) would not help in this case, you can use JavaScript Utility library like Loadash or just use below mention code:
const newList = JSON.parse(JSON.stringify(orinalArr))

Javascript pushing objects into array changes entire array

I'm using a specific game making framework but I think the question applies to javascript
I was trying to make a narration script so the player can see "The orc hits you." at the bottom of his screen. I wanted to show the last 4 messages at one time and possibly allow the player to look back to see 30-50 messages in a log if they want. To do this I set up and object and an array to push the objects into.
So I set up some variables like this initially...
servermessage: {"color1":"yellow", "color2":"white", "message1":"", "message2":""},
servermessagelist: new Array(),
and when I use this command (below) multiple times with different data called by an event by manipulating servermessage.color1 ... .message1 etc...
servermessagelist.push(servermessage)
it overwrites the entire array with copies of that data... any idea why or what I can do about it.
So if I push color1 "RED" and message1 "Rover".. the data is correct then if I push
color1"yellow" and message1 "Bus" the data is two copies of .color1:"yellow" .message1:"Bus"
When you push servermessage into servermessagelist you're really (more or less) pushing a reference to that object. So any changes made to servermessage are reflected everywhere you have a reference to it. It sounds like what you want to do is push a clone of the object into the list.
Declare a function as follows:
function cloneMessage(servermessage) {
var clone ={};
for( var key in servermessage ){
if(servermessage.hasOwnProperty(key)) //ensure not adding inherited props
clone[key]=servermessage[key];
}
return clone;
}
Then everytime you want to push a message into the list do:
servermessagelist.push( cloneMessage(servermessage) );
When you add the object to the array, it's only a reference to the object that is added. The object is not copied by adding it to the array. So, when you later change the object and add it to the array again, you just have an array with several references to the same object.
Create a new object for each addition to the array:
servermessage = {"color1":"yellow", "color2":"white", "message1":"", "message2":""};
servermessagelist.push(servermessage);
servermessage = {"color1":"green", "color2":"red", "message1":"", "message2":"nice work"};
servermessagelist.push(servermessage);
There are two ways to use deep copy the object before pushing it into the array.
1. create new object by object method and then push it.
servermessagelist = [];
servermessagelist.push(Object.assign({}, servermessage));
Create an new reference of object by JSON stringigy method and push it with parse method.
servermessagelist = [];
servermessagelist.push(JSON.parse(JSON.stringify(servermessage));
This method is useful for nested objects.
servermessagelist: new Array() empties the array every time it's executed. Only execute that code once when you originally initialize the array.
I also had same issue. I had bit complex object that I was pushing in to the array. What I did; I Convert JSON object as String using JSON.stringify() and push in to the Array.
When it is returning from the array I just convert that String to JSON object using JSON.parse().
This is working fine for me though it is bit far more round solution.
Post here If you guys having alternative options
I do not know why a JSON way of doing this has not been suggested yet.
You can first stringify the object and then parse it again to get a copy of the object.
let uniqueArr = [];
let referencesArr = [];
let obj = {a: 1, b:2};
uniqueArr.push(JSON.parse(JSON.stringify(obj)));
referencesArr.push(obj);
obj.a = 3;
obj.c = 5;
uniqueArr.push(JSON.parse(JSON.stringify(obj)));
referencesArr.push(obj);
//You can see the differences in the console logs
console.log(uniqueArr);
console.log(referencesArr);
This solution also work on the object containing nested keys.
Before pushing, stringify the obj by
JSON.stringify(obj)
And when you are using, parse by
JSON.parse(obj);
As mentioned multiple times above, the easiest way of doing this would be making it a string and converting it back to JSON Object.
this.<JSONObjectArray>.push(JSON.parse(JSON.stringify(<JSONObject>)));
Works like a charm.

Categories

Resources