Transform Object in Array Angular 2 - arrays

I have an Object:
Object{
"field1":"fill this field!",
"field1":"fill this field!",
"field1":"fill this field!"
}
I need to access the key and value of this Object.
How can I transform this Object in Array to use forEach.

No need to "transform" it, you can loop on the keys directly.
Object.keys(yourObject).forEach( key => {
console.log(yourObject[key]); //value
console.log(key); //key
});

You can list the object's keys and place the values in a new array.
const _versions = [];
Object.keys(versions).forEach(v => _versions.push(versions[v]));
this.versions = _versions;

Related

Angular Firestore - Map data from nested array of references

I have a collection A and those documents have an array of references to documents in collection B.
In my service I get all my A's but with an array of unusable objects. I but I want to view them too.
getAs() {
this.aService.getAs().subscribe((data) => {
this.aArray = data.map((e) => {
return {
id: e.payload.doc.id,
...(e.payload.doc.data() as {}),
} as A;
});
//TODO some magic to get a nice array of B's inside every A
});
}
It's important to get the array of A objects with arrays of B object inside and not two separate arrays of A's and B's.
I hope I have expressed myself clearly to some extent.
Thanks in advance
As outlined in the Firestore documentation here Firestore Reference a document reference refers to a document location within Firestore and can be used to read, write, or listen to said document. This means that the reference type does not store the document data, and therefore you must query for it.
What you'll have to do is loop over each reference in array_of_bs and use its path to query for the corresponding document. Then, add the document data to a temporary array and combine it with the array being returned by the map() function like so:
async getAs() {
this.aService.getAs().subscribe(async (data) => {
const promises = await data.map(async (e) => {
// temp array to hold b document data
let array_of_bs = [];
// loop over each reference in array_of_bs
for (const path of (e.payload.doc.data() as any).array_of_bs) {
const bObj = await this.afs.doc(path).get().toPromise();
array_of_bs.push(bObj.data());
}
return {
id: e.payload.doc.id,
...(e.payload.doc.data() as {}),
array_of_bs: array_of_bs // this will overwrite the array_of_bs returned in the above line with the document data
} as A;
});
const docValues = await Promise.all(promises);
console.log(docValues);
});
}

Storing an array of elements using Cypress

I want to store an array of strings taken from a page using cypress.
so far I have:
cy.get(".product-name").each(($el) => {
let text = $el.text();
cy.request("POST", "http://localhost:3000/sale-items", {
text
});
cy.wait(1000);
});
As you can see I am having to make separate requests for every item. But I want to store the entire array somehow, and then make one request.
I have read this page on variables and aliases but feel no closer to achieving what I want.
How to store an array of items generated from using Cypress commands?
You can use .then() instead of .each() to retrieve all elements classed 'product-name'. The parameter is an iterable collection that can be converted to an array.
Ref Array.from
cy.get(".product-name").then(($els) => {
const texts = Array.from($els, el => el.innerText);
cy.request("POST", "http://localhost:3000/sale-items", {
texts
});
cy.wait(1000);
});
cypress provide .each($elem, index, $list) method to iterate each
element of the array.
cy.get(".product-name").each(($els, index, $list) => {
// $list itself is collection of element
// $elem is each element of array
// index is postion of element in array
});
function getProductName() {
let countProducts
cy.get('.product-name')
.then((elements) => {
countProducts = elements;
})
return countProducts
}
Cypress.Commands.add('getProductName', getProductName)
To invoke the method from any test:
cy.getProductName().then(element => {
cy.log(`Product names are: ${element.text()} `)
})

How can i pop a value with key from local state?

I have a local state as object:
selectedDates = {};
When i click on icons I am getting ID´s in my local state as object key, value pair.
// We "open" the value to extract the relevant informations
const [key, value] = calendarIconId.split("=");
// Add the new value inside of the object
this.state.selectedDatesTemp[key] = value;
// Turn the object into an array, we gotta rebuild the values
const date = Object.keys(this.state.selectedDatesTemp).map(
x => `${x}=${this.state.selectedDatesTemp[x]}`
);
How can i delete an object from the local state?
You can use delete to achieve it:
const { selectedDatesTemp } = this.state;
delete selectedDatesTemp[key];

Get a value from an object using a variable as a key

I have an Object like;
players: {
'1': {id:1, name:'', ....},
'2': {id:2, name:'', ....},
...
}
I want to desctruct an object by its key as currentPlayer. (playernumber is passed as props).
const currentPlayer = Object.keys(players).filter(
obj => obj.id === playerNumber
);
this did not work, also I do not want to use id attribute.
The easiest way to get a specific player is with bracket notation:
const currentPlayer = players[playerNumber];
This assumes that playerNumber is a valid key in the players object.
Could you not just use Object.values() to achieve this?
The Object.values() will return the values of your players object ({id:1, name:'', ....}, etc) as an array. You can then use the .filter() method to select the player value by playerNumber.
So for instance, something like this:
const currentPlayer = Object.values(players).filter(
obj => obj.id === playerNumber
);
You will find that this works in most browsers
Alternativly, if you have your players object organised so that the keys are player id's, you can access a player in this way:
const currentPlayer = players[playerNumber];
Object.keys() will give you an array of keys rather than the object stored under those keys (i.e. Object.keys(players) returns ['1', '2', ...]).
If you want to get the objects, you can map the result array like so:
// Use map to turn the array of keys into the array of objects
const currentPlayer = Object.keys(players).map(id => players[id])
// be careful: filter returns an array, but you probably just want the one object
.filter(obj => obj.id === playerNumber)[0]
Depending on what you're targeting, you may also have access to Object.values() which does the same thing (i.e. you'd replace the first line with just Object.values(players)), just be aware that browser support is a little more limited.

Update a field of an object in a list

I have a prop that is a list of objects. My reducer is meant to update a certain field of the object and append it to the list, the value to update is provided via action.payload (which is another prop of the store).
I know that for simply adding the object in the list I can use the spread operator like this
function myReducer(state=[],action){
case something:
return [...state,action.payload];
case default:
return state;
}
but say I have a change action.payload.aCertainField and then append this to the list of objects. When I did something like this:
action.payload.aCertainField = aCertainValue;
return [...state,action.payload];
But it actually changed the other prop's aCertainField as well. I do not want that. Is there a solution to this ?
You can do it as following, using ES6:
let { aCertainField, id } = action.payload.obj;
//find the index of object in that array hoping the id is unique for the object
let indexOfObject = state.findIndex( (item) => item.id === id );
let actualObject = Object.assign({}, state[indexOfObject], { aCertainField });
return [
...state.slice(0, indexOfObject),
actualObject,
...state.slice(indexOfObject+1)
]
NOTE: Thinks that id is the unique key for the object structure and aCertainField is the value to update

Resources