Return relative Firebase key from ngFor loop
I have data that I'm displaying in cards via an *ngFor loop. I'm having trouble returning the pushId for any individual record in the loop, on click. The goal is to return the pushId so I can load that item's data into its own "More Info" type page. What I have now returns only the last key in the array, not the one I clicked on. What am I missing?
code:
const snapshotToArray = snapshot => {
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
console.log(childSnapshot.key);
})
}
this.ref = firebase.database().ref('users/' + user.uid + '/Posts');
this.ref.on('value', resp => {
this.infos = ;
this.infos = snapshotToArray(resp);
});
logKey(snapshot){
console.log(item.key);
}
<ion-card *ngFor="let info of infos" >
<ion-item detail lines="full" (click)="logKey()">
<div class="row">Key - {{info.key}}</div>
</ion-item>
</ion-card>
Any help would be appreciated. Thanks in advance..
javascript
angular ionic-framework firebase-realtime-database asked Jan 2 at 3:47
MacDMacD
2021516
add a comment |
I have data that I'm displaying in cards via an *ngFor loop. I'm having trouble returning the pushId for any individual record in the loop, on click. The goal is to return the pushId so I can load that item's data into its own "More Info" type page. What I have now returns only the last key in the array, not the one I clicked on. What am I missing?
code:
const snapshotToArray = snapshot => {
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
console.log(childSnapshot.key);
})
}
this.ref = firebase.database().ref('users/' + user.uid + '/Posts');
this.ref.on('value', resp => {
this.infos = ;
this.infos = snapshotToArray(resp);
});
logKey(snapshot){
console.log(item.key);
}
<ion-card *ngFor="let info of infos" >
<ion-item detail lines="full" (click)="logKey()">
<div class="row">Key - {{info.key}}</div>
</ion-item>
</ion-card>
Any help would be appreciated. Thanks in advance..
javascript
angular ionic-framework firebase-realtime-database asked Jan 2 at 3:47
MacDMacD
2021516
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12
add a comment |
I have data that I'm displaying in cards via an *ngFor loop. I'm having trouble returning the pushId for any individual record in the loop, on click. The goal is to return the pushId so I can load that item's data into its own "More Info" type page. What I have now returns only the last key in the array, not the one I clicked on. What am I missing?
code:
const snapshotToArray = snapshot => {
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
console.log(childSnapshot.key);
})
}
this.ref = firebase.database().ref('users/' + user.uid + '/Posts');
this.ref.on('value', resp => {
this.infos = ;
this.infos = snapshotToArray(resp);
});
logKey(snapshot){
console.log(item.key);
}
<ion-card *ngFor="let info of infos" >
<ion-item detail lines="full" (click)="logKey()">
<div class="row">Key - {{info.key}}</div>
</ion-item>
</ion-card>
Any help would be appreciated. Thanks in advance..
javascript
angular ionic-framework firebase-realtime-database asked Jan 2 at 3:47
MacDMacD
2021516
I have data that I'm displaying in cards via an *ngFor loop. I'm having trouble returning the pushId for any individual record in the loop, on click. The goal is to return the pushId so I can load that item's data into its own "More Info" type page. What I have now returns only the last key in the array, not the one I clicked on. What am I missing?
code:
const snapshotToArray = snapshot => {
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
console.log(childSnapshot.key);
})
}
this.ref = firebase.database().ref('users/' + user.uid + '/Posts');
this.ref.on('value', resp => {
this.infos = ;
this.infos = snapshotToArray(resp);
});
logKey(snapshot){
console.log(item.key);
}
<ion-card *ngFor="let info of infos" >
<ion-item detail lines="full" (click)="logKey()">
<div class="row">Key - {{info.key}}</div>
</ion-item>
</ion-card>
Any help would be appreciated. Thanks in advance..
javascript
angular ionic-framework firebase-realtime-database javascript
angular ionic-framework firebase-realtime-database asked Jan 2 at 3:47
MacDMacD
2021516
asked Jan 2 at 3:47
MacDMacD
2021516
asked Jan 2 at 3:47
MacDMacD
2021516
asked Jan 2 at 3:47
MacDMacD
2021516
asked Jan 2 at 3:47
MacDMacD
2021516
2021516
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12
add a comment |
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000988%2freturn-relative-firebase-key-from-ngfor-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000988%2freturn-relative-firebase-key-from-ngfor-loop%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
on the click you need to pass key or index from where you can filter and get the results
– Just code
Jan 2 at 4:12