We Keep Coding

Flatten inner array but assign outer properties

I have an input like this:
var input = [
{
"inner_array": [
{
"inner_data": "inner_data1"
},
{
"inner_data": "inner_data2"
}
],
"outer_data": "outer_data",
}
];
And I'd like to process it so it becomes this.
var output = [
{
"inner_data": "inner_data1",
"outer_data": "outer_data",
},
{
"inner_data": "inner_data2",
"outer_data": "outer_data",
}
];
In words: I'd like to flatten an inner array, while still keeping the outer array's properties. Does this have an easy solution (with built in lambda array functions), or should I write a function myself which handles this?

You could use .flatMap() on your input array to loop over each object, along with an inner .map() to map each inner_array to a new object. The new object can be a combination of the outer_data value along with the inner_data value. The .flatMap() method will then merge all returned objects from the inner .map() calls for each object within input into one resulting array:
const input = [{ "inner_array": [{ "inner_data": "inner_data1" }, { "inner_data": "inner_data2" } ], "outer_data": "outer_data", }];
const res = input.flatMap(obj => obj.inner_array.map(inner => ({
...inner,
outer_data: obj.outer_data
})));
console.log(res);

How to get property of an object

I'm creating an empty array and fill it with object.
export const model = [
{isMine: false},
]
const newArr = Array(25);
newArr.fill(model);
newArr.forEach((item) => {
console.log(item);
})
This logs out all objects with the array. But I don't know how to log out the isMine property... I always get undefined

I hope this is what you need. If you spread (...) the model it will get stored as objects. But if you don't spread it will be stored as an array inside an array which contain an object
const model = [
{isMine: false},
]
const newArr = Array(25).fill(...model);
newArr.forEach((item) => {
console.log(item.isMine);
})

I hope this helps, you need to access array inside array
const model = [
{isMine: false},
];
console.log(model[0].isMine);
const newArr = Array(25);
newArr.fill(model);
console.log(newArr);
newArr.forEach(x => x.forEach(y => console.log(y.isMine)));

newArr is a 2 dimensional array, since model is an array.
So to access the property isMine in your forEach loop you'd do:
newArr.forEach((item) => {
// item is an array, so get the value at the first index
console.log(item[0].isMine);
})

Vue changes array in data after making a copy of it

So I have this code in vue:
export default {
name: 'Test',
data() {
return {
test1: ['1', '2', '3'],
test2: [{
name: 'Hello'
}, {
name: 'Number two'
}, {
name: 'What ever'
}],
};
},
created() {
const first = [...this.test1];
first.forEach((elm, index) => first[index] = 'New');
console.log('first: ', first);
console.log('test1 in data', this.test1);
const second = [...this.test2];
second.forEach(elm => elm.name = 'New');
console.log('second: ', second);
console.log('test2 in data', this.test2);
},
}
After setting the value of each item of the array 'first' (that should be a copy without reference to the data 'test1' array) each item is equal to 'new'. The value of this.test1 doesn't change.
I did the same with test2. Copied and changed the value of each item to 'New'. But now the value of the data array 'test2' also has 'New' in every item.
I have no clue why this is like that. Any ideas?

Spread syntax creates a shallow copy. If your array has primitive types like numbers or strings, it won't update the original array. That's the case with test1. In the second case, only a new array is created. If you push or pop from the array, original array won't be updated. But, the objects are still pointing to their same place in memory. Updating them will update original array's objects as well.
You can use the spread syntax on the individual object to create a copy of the objects:
const second = this.test2.map(o => ({...o}))
You can also use JSON.parse and JSON.stringify. But, if the objects have any function properties, they'll be removed.
const second = JSON.parse(JSON.stringify(this.test2))

The reason it is like that is because you are having an array of Vue data values. So even though you are cloning the Array, you are also copying over each values 'getters' and 'setters' which have a reference to the original array. In order to remove the getters and setters you should do what d-h-e has suggested.
You could also do this.
const second = this.test2.map(() => { name: 'New' } );
console.log('second: ', second);
console.log('test2 in data', this.test2);

Try it with:
const second = JSON.parse(JSON.stringify(this.test2));
The copy method with spreadoperator or Array.from works only with simple arrays.
For deep copy use the method with JSON.parse and JSON.stringify.

Creating a JavaScript function that filters out duplicate in-memory objects?

Okay, so I am trying to create a function that allows you to input an array of Objects and it will return an array that removed any duplicate objects that reference the same object in memory. There can be objects with the same properties, but they must be different in-memory objects. I know that objects are stored by reference in JS and this is what I have so far:
const unique = array => {
let set = new Set();
return array.map((v, index) => {
if(set.has(v.id)) {
return false
} else {
set.add(v.id);
return index;
}
}).filter(e=>e).map(e=>array[e]);
}
Any advice is appreciated, I am trying to make this with a very efficient Big-O. Cheers!
EDIT: So many awesome responses. Right now when I run the script with arbitrary object properties (similar to the answers) and I get an empty array. I am still trying to wrap my head around filtering everything out but on for objects that are referenced in memory. I am not positive how JS handles objects with the same exact key/values. Thanks again!

Simple Set will do the trick
let a = {'a':1}
let b = {'a': 1,'b': 2, }
let c = {'a':1}
let arr = [a,b,c,a,a,b,b,c];
function filterSameMemoryObject(input){
return new Set([...input])
}
console.log(...filterSameMemoryObject(arr))
I don't think you need so much of code as you're just comparing memory references you can use === --> equality and sameness .
let a = {'a':1}
console.log(a === a ) // return true for same reference
console.log( {} === {}) // return false for not same reference

I don't see a good reason to do this map-filter-map combination. You can use only filter right away:
const unique = array => {
const set = new Set();
return array.filter(v => {
if (set.has(v.id)) {
return false
} else {
set.add(v.id);
return true;
}
});
};
Also if your array contains the objects that you want to compare by reference, not by their .id, you don't even need to the filtering yourself. You could just write:
const unique = array => Array.from(new Set(array));

The idea of using a Set is nice, but a Map will work even better as then you can do it all in the constructor callback:
const unique = array => [...new Map(array.map(v => [v.id, v])).values()]
// Demo:
var data = [
{ id: 1, name: "obj1" },
{ id: 3, name: "obj3" },
{ id: 1, name: "obj1" }, // dupe
{ id: 2, name: "obj2" },
{ id: 3, name: "obj3" }, // another dupe
];
console.log(unique(data));
Addendum
You speak of items that reference the same object in memory. Such a thing does not happen when your array is initialised as a plain literal, but if you assign the same object to several array entries, then you get duplicate references, like so:
const obj = { id: 1, name: "" };
const data = [obj, obj];
This is not the same thing as:
const data = [{ id: 1, name: "" }, { id: 1, name: "" }];
In the second version you have two different references in your array.
I have assumed that you want to "catch" such duplicates as well. If you only consider duplicate what is presented in the first version (shared references), then this was asked before.

rxjs5 - filtering array of objects by observable that each object contains

I have an array that looks like this
[
{
name: 'foo'
filter: Observable.of(true)
},
{
name: 'bar'
filter: Observable.of(false)
}
]
and I want to return only items whose filter resolves in true, how would I do that in the most efficient and reactive way? I'm using rxjs5 beta2.
Note that it's a pseudocode for simplicity sake, in my real case filter is actually an object, that is passed to a validation function, which returns an observable that resolves in true or false.

You can flatMap each item in the array to an Observable stream that will emit a version of the item that replaced the filter property of type Observable<bool> with a bool property.
const data$ = Rx.Observable.from(arr)
// Convert each item's filter property to type bool
.flatMap(x => x.filter.map(condition => Object.assign({}, x, { filter: condition })))
// Now we can just filter over the filter property, which is of type bool.
.filter(x => x.filter)
// Each item emitted will have a filter value of true
.subscribe(x => console.log(x));

There are two things in RxJS 4 that make this easy: map and Rx.helpers.defaultComparer. first map sends each item from the iterable separately and the defaultComparer will do the deep check for you.
var comparer = Rx.helpers.defaultComparer;
const Observable = Rx.Observable;
const arr = [
{
name: 'foo',
filter: Observable.of(true)
},
{
name: 'bar',
filter: Observable.of(false)
}
];
const data$ = Observable.from(arr)
.map(each => each)
.filter(each => comparer(each.filter, Observable.of(true)))
.subscribe(x => console.log(x));
// prints Object {name: "foo", filter: FromArrayObservable} to my console
For some reason this defaultComparer is not in five at this time. Maybe there is a new name for the helper because it is not said to be deprecated in 4 or maybe it has not be migrated over yet or is not at .helpers.