We Keep Coding

Vue loading data with async await I get post.likes is undefined

I am loading data from a back end using axios with async await:
onBeforeMount(async () => {
const feed = await axios.get("api/v1/posts/" + loggedUser + "/home/feed/");
feed.data.sort((a, b) => (a.created_at > b.created_at ? 1 : -1));
homefeed.value = feed.data;
filtered.value = feed.data;
});
I have this function to make a user like a post and unlike a post. It must show the one image if it is liked by a user and another image if it's not yet liked by this user.
I get an error post.likes is undefined if I do not add v-if="post.likes" to the containing div. If I do add it to the containing div then no error and on the posts that do have likes it displays correctly, but on the posts that do not have likes it does not display at all so the user is unable to like the post
Here is the HTML
<div class="postLike flex alignCenter" v-if="post.likes">
<div class="postLikeImg" #click="likePost">
<img
class="functionImg mr5"
alt="Like this post"
src="../assets/img/like.png"
#click="likePost"
v-if="post.likes[0] != true"
/>
<img
class="functionImg mr5"
alt="Like this post"
src="../assets/img/liked.png"
#click="unlikePost"
v-if="post.likes[0] == true"
/>
</div>
<div class="postStatsBtn likeTotal">
{{ post.likes[1] }}
</div>
</div>
The button need to display even if there are no likes for the post so how do I get past the post.likes is undefined please?
Why am I getting the error if I load the data with async await?

Is there a method to implement through data attributes in JavaScript?

I want implement the card content in the card when expanded, I have used the help of JavaScript to implement the title, image, description ,I have used 'data-title' and 'data-type' for displaying title and image respectively which are by the working fine and when I try to implement card description by using data-desc attribute , it is displaying 'undefined'.
Anyone please help me with my code.
My code link: https://codepen.io/Avatar_73/pen/ExyNdMK
const getCardContent = (title, type, desc) => {
return `
<div class="card-content">
<h2>${title}</h2>
<img src="./assets/${type}.png" alt="${title}">
<p>${desc}</p>
</div>
`;
}
<div class="cards">
<div class="card" data-type="html" data-desc="I am HTML">
<h2>HTML5</h2>
</div>
</div>

On line 115, you forgot to pass the desc to your getCardContent function
Change to:
const content = getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

Change your calling method signature from
getCardContent(card.textContent, card.dataset.type)
to
getCardContent(card.textContent, card.dataset.type, card.dataset.desc)
you are not passing the third parameter(card.dataset.desc) in the method thus it is rendering the value as undefined.

Angular - Image appears while loading

I have a problem, I got an HTML element that acts like a loding spinner, and I would like it not to be displayed. I would to use the observables to be able to load that element only once the data is fully loaded. So far, in my component, i made it like that :
const matchTableList$ = this.matchTablesService.list().pipe(
map(matchTables => {
matchTables = matchTables.sort((a, b) => a.name.toLocaleLowerCase() === b.name.toLocaleLowerCase() ? 0 : a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1);
this.matchTables$.next(matchTables);
}),
catchError( (error: HttpErrorResponse) => {
this.loadingError$.next(true);
return EMPTY;
}),
finalize(() => {
this.prettyMessageData = new PrettyMessageContent();
this.prettyMessageData.title = "hello"
this.prettyMessageData.message = " ";
this.prettyMessageData.withMessage(this.prettyMessageData.message);
})
);
and in my HTML i made :
<div *ngIf="!matchTablesLine" class="justify-content-center">
<pretty-message style="width: 100%;" [data]="prettyMessageData">
</pretty-message>
<div class="d-flex justify-content-center mt-5">
<button class="btn--primary" (click)="createMatchTable()"><i class="add-circle-line"></i>add</button>
</div>
</div>
So the problem here is that, when there is no data, the pretty message is not displayed, and when there is data, the html div is loaded before i got the data, so it's weird to see a button while the page load. I think it is possible to use observables and operators here, but i really don't know which one to use to make this work. Thanks.
Edit : I solved the problem using a simple resolver, which is really helpful in that kind of cases.

I believe you are trying to delay the rendering of the button while the prettyMessageData is undefined. You can achieve this by adding a *ngIf=prettyMessageData on the button div.
<div *ngIf="prettyMessageData" class="d-flex justify-content-center mt-5">
<button class="btn--primary" (click)="createMatchTable()"><i class="add-circle-line"></i>add</button>
</div>

Iterating over keys instead of values Vue app

I'm trying to select the values for three keys from my api with axios.
Each time I make a request I'm displaying the values four times for each key. I dropped a key from my data models and I re tested. When I did that my request displayed three times instead of four. Meaning I'm iterating over the keys instead of the values.
How Can I change this code to display only the values of each key? I am using nuxt django and axios.
This is the json data axios returns.
{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}
How do I just get the values only for each paragraph tag instead of the values for each paragraph tag 4 times?
<template>
<div class="container">
<h2>Current Balance</h2>
<ul class="trendings">
<li v-for="result in results" :key="result">
<p>{{ results.balance }} balance</p>
<p>{{ results.free_funds }} free_funds</p>
<p>{{ results.exposure }} exposure</p>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
asyncData() {
return axios.get("http://localhost:8000/api/balance/1").then(res => {
return { results: res.data };
});
}
};
</script>

If the JSON response looks exactly like this:
{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}
Then you don't even need the v-for because there is only one thing to iterate over.
If you want a v-for, force the data to come back as an array by wrapping it so that it would be this:
[ {"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0} ]
So:
return { results: [res.data] };

See the docs
<li v-for="(result, key) in results" :key="result">
<p>{{ result }} {{ key }}</p>
</li>

Meteor helper function exception when retrieving the count of all users

On my website I'm trying to display the number of users registered. The problem is that I get a long exception on render. My question is how do you do this dynamically instead of statically?
The code works on start up but if I switch pages and come back it defaults to a blank. The code follows:
Template.Home.helpers({
UserAmount: function() {
var Count = Meteor.users.find().count();
document.getElementById("UsersSignedUp").innerHTML = Count;
console.log("Users-helper: "+Count);
}
});
the following is now the HTML section on the home page
<section class="home-main">
<div class="container">
<div class="stats">
<div class="row">
<div class="col-md-4">
<label id="UsersSignedUp">{{UserAmount}}</label>
<span>Users</span>
</div>
<div class="col-md-4">
0
<span>Listings</span>
</div>
<div class="col-md-4">
0
<span>Matches</span>
</div>
</div>
</div>
</div>
</section>
I was able to make an onRender function to supplement the error but I'd rather not have to rely on it. I know that listings and Matches are both set to 0 but if I can fix this error the others will follow the same format.
This is the exception:
[Log] Exception in template helper: UserAmount#http://localhost:3000/Nomad.js?1c729a36a6d466ebe12126c301d77cc72299c832:56:47 (meteor.js, line 888)
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2880:21
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1651:21
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2928:71
_withTemplateInstanceFunc#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:3476:16
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2927:52
call#http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:172:23
mustacheImpl#http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:109:30
mustache#http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:113:44
http://localhost:3000/template.Nomad.js?68e12845c8ef55042e39b4867426aab290c3711d:95:30
doRender#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2011:32
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1865:22
_withTemplateInstanceFunc#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:3476:16
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1864:54
_withCurrentView#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2197:16
lookup:UserAmount:materialize#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1863:34
_compute#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:327:36
Computation#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:243:18
autorun#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:566:34
autorun#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1875:29
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2005:17
nonreactive#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:13
_materializeView#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2004:22
materializeDOMInner#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1476:31
_materializeDOM#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1428:26
http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2040:46
nonreactive#http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:13
_materializeView#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2004:22
render#http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2296:25
insert#http://localhost:3000/packages/iron_dynamic-template.js?d425554c9847e4a80567f8ca55719cd6ae3f2722:522:15
insert#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:1632:22
maybeAutoInsertRouter#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:1622:20
If there is any other information I should provide please let me know.

Try using this as the helper instead:
Template.Home.helpers({
UserAmount: function() {
return Meteor.users.find().count();
}
});
The idea is this helper is called UserAmount so the value it returns on the Home template should replace itself into the handlebars expression {{UserAmount}}
You don't have to do the heavy lifting in changing the DOM yourself. Meteor probably gets confused as to why the dom is changing when it tries to change it and it gives up that error.