hope you're okey.
I have a blog component which obtains posts from a DB via http request.
So, what i'm trying is, when the posts are in my component i want to filter them with a function.
I'm calling this function after get the posts in the subscribe method, but it doesn't works.
Function to filter the posts:
filtrarArticles(tipus)
{
var articles = document.getElementsByClassName("article") as HTMLCollectionOf<HTMLElement>;
for (var i = 0; i < articles.length; i++)
{
var tipusArticle = this.articles[i].categoria;
if (tipus == tipusArticle)
{
articles[i].style.display = "";
}
else
{
articles[i].style.display = "none";
}
}
}
HTML code that filters my function:
<div class="articles row w-100 align-self-end d-flex justify-content-center">
<div class="article col-xl-3 mb-md-0 mb-3" *ngFor="let article of articles; index as i" (click)="obrirModalArticle(article)">
<img class="imatgeAllargada d-block w-100" src="https://drive.google.com/uc?id={{article.img}}">
<br>
<h4>{{article.title_article}}</h4>
<p [innerHTML]="article.descripcio1"></p>
</div>
</div>
The articles array have one property which name is "categoria" an it's the key to filter it.
I call the filter function here:
this.articleService.obtenirArticles(this.idioma).subscribe(
res=>
{
this.articles = res;
this.filtrarArticles('generals');
},
error =>
{
alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
});
this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
{
this.idioma = event.lang;
this.articleService.obtenirArticles(this.idioma).subscribe(
res=>
{
this.articles = res;
},
error =>
{
alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
}
)
});
This code is on init method. And I don't know why doesn't works?
It is considered a bad practice to access the DOM directly, one of the reasons being that you should not manipulate the template directly but rather let Angular do it for you. So what you should be doing instead is, create a model and let Angular know about it, bind it to the template and once it changes Angular will update the template for you.
Component
export class YourComponent {
allArticles; // Property to hold the result of the response
filteredArticles; // Property to hold what is going to be rendered on the template
...
ngOnInit() {
this.articleService.obtenirArticles(this.idioma).subscribe(res => {
this.allArticles = res; // Save the original response
this.filteredArticles = this.filtrarArticles('generals'); // Get the articles filtered and show this property on the template
},
error => {
alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
});
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
this.idioma = event.lang;
this.articleService.obtenirArticles(this.idioma).subscribe(res => {
this.allArticles = res; // Save the original response
this.filteredArticles = [...this.allArticles]; // Clone the response array unfiltered
},
error => {
alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
})
});
}
}
Filter function
filtrarArticles(tipus) {
// The filter method will return a copy of the array once it has been iterated over each item.
// If the condition is met, the item is going to be included in the resulting array, otherwise it won't.
return this.allArticles.filter(article => article.categoria === tipus);
}
Then in your template, you iterate over the filterArticles array, once that array change, Angular will update the template.
Template
<div class="articles row w-100 align-self-end d-flex justify-content-center">
<div class="article col-xl-3 mb-md-0 mb-3" *ngFor="let article of filteredArticles; index as i" (click)="obrirModalArticle(article)">
<img class="imatgeAllargada d-block w-100" src="https://drive.google.com/uc?id={{article.img}}">
<br>
<h4>{{article.title_article}}</h4>
<p [innerHTML]="article.descripcio1"></p>
</div>
Related
So, I'm fetching data from an API and using states. At the beginning, I don't get data from API and render the page with using the states with the data I wrote in the file. (I'm trying to say that I'm using static data at the first load). It works well. No problem at all. Then, when I get an input from user I connect with the API, do all the fetching and stuff and update the states. Everything seems normal. Data is received from API, states are updated, no error on console, first map function is rendered etc. but the second map function isn't. But surprisingly, when I change anything in the file and save it (you know that live server updates the page but doesn't reload), it applies the changes that I've done, and it also renders the second map function with using data I received earlier.
My first map function is this:
<div id="hourlyForecast">
{ weatherData.hourly.map((item, index) => {
/* ----- I'm getting a long string from API and these 2 lines are to get the part that i need from that string ------ */
let startFrom = item.dt_txt.length - 8;
let iNeed = item.dt_txt.toString().substr(startFrom, 5);
return (
<div className="hourly" key={index}>
<div className="hour">{iNeed}</div>
<div className="image">
<img
src={`/icons/${item.weather[0].icon}.png`}
alt="weather-icon"
/>
</div>
<div className="degrees">
{Math.round(item.main.temp)}°C
</div>
<div className="wind">
<img
src="wind.png"
alt="wind-icon"
style={{ transform: `rotate(${item.wind.deg}deg)` }}
/>{
{item.wind.speed} m/s
</div>
</div>
)
})
}
</div>
It is working, I guess. After that, I have this second map function:
<div id="daily">
{weatherData.daily.map((item, index) => {
return (
<div className="daily" key={index}>
<div className="day">
/* ------ Api gives me timestamp and this function returns me the day in human words :) ----- */
{giveMeDay(item.dt * 1000)}
</div>
<div className="dailyDegrees">
{Math.round(item.temp)}°C
</div>
<div className="dailyDesc">
{item.desc}
</div>
<div className="img">
<img src={`./icons/${item.icon}.png`} alt="weather-icon" />
</div>
</div>
);
})
}
</div>
It is also working, it should. I mean, they are not that complex.
So, all with that, here are what happens:
At first load I use static data, and it renders the second map function
(IMAGE) Rendered component with static data
When I enter an input it triggers the API Call, and it should re-render, but it does not (IMAGE) Empty Component even though API Call works
But when I change anything in the file after the API Call and save it, live server updates and the second map function is rendered. Let's say I change "°C" in the second map function with "°F" and save it. Then, everything works. (IMAGE) File updated without page being reloaded
I guess that's all I can say. I just don't understand the problem. Surely would appreciate any help.
Here is the part that I do the API stuff: (It can be a mess 'cause gotta do 3 API calls and didn't want to use async function due to my lack of experience with it)
var datam = {};
const work = (e) => {
e.preventDefault();
try {
fetch(
`${ApiUrl}weather?q=${e.target.cityName.value}&appid=${ApiKey}&units=metric&lang=en`
)
.then((data) => {
return data.json();
})
.then((gelen) => {
console.log(gelen);
if (gelen.cod === 200) {
datam = {
degrees: Math.round(gelen.main.temp),
description: gelen.weather[0].description,
feels_like: gelen.main.feels_like,
city: `${e.target.cityName.value}, ${gelen.sys.country}`,
min: gelen.main.temp_min,
max: gelen.main.temp_max,
icon: gelen.weather[0].icon,
lat: gelen.coord.lat,
lon: gelen.coord.lon,
};
} else {
alert("Couldn't get the data");
}
})
.then(() => {
console.log(datam);
fetch(
`${ApiUrl}forecast?lat=${datam.lat}&lon=${datam.lon}&units=metric&appid=${ApiKey}&lang=en`
)
.then((fivedays) => fivedays.json())
.then((veri) => {
console.log(veri);
datam.hourly = [];
if (veri.cod === "200") {
for (let i = 0; i < 8; i++) {
datam.hourly[i] = veri.list[i];
}
console.log(datam);
}
})
.then(() => {
datam.daily = [];
fetch(
`${ApiUrl}onecall?lat=${datam.lat}&lon=${datam.lon}&exclude=current,hourly,minutely,alerts&units=metric&appid=${ApiKey}&lang=en`
)
.then((donus) => donus.json())
.then((yanit) => {
console.log(yanit);
for (let i = 0; i < 6; i++) {
datam.daily[i] = {};
datam.daily[i]["temp"] = yanit.daily[i + 1].temp.day;
console.log("1");
datam.daily[i].desc =
yanit.daily[i + 1].weather[0].description;
datam.daily[i].icon = yanit.daily[i + 1].weather[0].icon;
datam.daily[i].dt = yanit.daily[i + 1].dt;
}
});
})
.then(() => {
console.log(datam);
// ------------ weatherData is the main state I'm using -----------
setWeatherData(datam);
// ------------ searched state is the important for only the first load. If they do the search i change what is being rendered -----------
setSearched(true);
});
//
});
} catch (error) {
alert(error);
}
};
The problem is this here: (VIDEO) Everything Works but doesn't appear until VS Code recompile
I made the code below referring to the pagination document of FIREBASE.
( https://firebase.google.com/docs/firestore/query-data/query-cursors#web-v8_3 )
I know that 'limit(3)' prints 3 documents, but I don't know how to use the 'next' and 'last' variables.
What I want to implement is to show three of my posts per page and move to the next page when the button is pressed.
Since I just started web development, everything is difficult. please help me
var first = db.collection('product').orderBy('date').limit(3);
var paginate = first.get().then((snapshot)=>{
snapshot.forEach((doc) => {
console.log(doc.id);
var summary = doc.data().content.slice(0,50);
var template = `<div class="product">
<div class="thumbnail" style="background-image: url('${doc.data().image}')"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">${doc.data().title}</h5>
<p class="date">${doc.data().date.toDate()}</p>
<p class = "summary">${summary}</p>
</div>
</div>
<hr>`;
$('.container').append(template);
})
You can try this function:
let lastDocSnap = null
async function getNextPage(lastDoc) {
let ref = db.collection('product').orderBy('date')
// Check if there is previos snapshot available
if (lastDoc) ref = ref.startAfter(lastDoc)
const snapshot = await ref.limit(3).get()
// Set new last snapshot
lastDocSnapshot = snapshot.docs[snapshot.size - 1]
// return data
return snapshot.docs.map(d => d.data())
}
While calling this function, pass the lastDocSnap as a param:
getNextPage().then((docs) => {
docs.forEach((doc) => {
// doc itself is the data of document here
// Hence .data() is removed from original code
console.log(doc.id);
var summary = doc.content.slice(0,50);
var template = `<div class="product">
<div class="thumbnail" style="background-image: url('${doc.image}')"></div>
<div class="flex-grow-1 p-4">
<h5 class="title">${doc.title}</h5>
<p class="date">${doc.date.toDate()}</p>
<p class = "summary">${summary}</p>
</div>
</div>
<hr>`;
$('.container').append(template);
})
})
Call this function at page load (as lastDocSnap will be null, it'll fetch first 3 docs). Call the same function when user clicks 'next' but this time as we have lastDocSnap, the startAfter method will be added to the query. This essentially means the query will first order the document by date and then fetch 3 documents after the document you pass in startAfter
I am trying to get the button below with addEventListener. How ever it returns null. The html is rendered from js using template string. So what I am trying to achieve is to addEventListener to delete button inside the template string.
// This is the template string
data.forEach(doc => {
checkin = doc.data();
card = `
<div class="carousel-item fieldId" data-id="${doc.id}">
<div class="col-12">
<div class="card checkCard" style="margin: 0 auto;">
<img src="${checkin.photo}" class="card-img-top" alt="...">
<button type="submit" class="btn center delete">
<i class="material-icons" style="font-size: 1em;">delete_forever</i>
</button>
<div class="card-body">
<h5 class="card-title">${checkin.title}</h5>
<p class="card-text">${checkin.description}</p>
</div>
</div>
</div>
</div>
`;
html += card;
});
checkinList.innerHTML = html;
//This is the delete button
const deleteContent = document.querySelector('.delete');
deleteContent.addEventListener('click', (e) => {
// get current document ID
console.log('hmm')
e.stopPropagation();
let id = $('.carousel-item').attr('data-id')
db.collection("checkin").doc(id).delete().then(() => {
console.log(id + "successfully deleted!");
$('.carousel-item').attr('data-id')
}).catch(function (error) {
console.error("Error removing document: ", error);
});
});
And this is the erro from the console
Uncaught TypeError: Cannot read property 'addEventListener' of null
at index.js:123
(anonymous) # index.js:123
Hopefully I've outlined all the changes I made to get this to work:
As was pointed out in comments, IDs must be unique. Classes are generally better to use as JavaScript (and CSS) hooks. Many people now use a js- prefix for these to help follow the logic from HTML -> JS when maintaining code so I would suggest this.
document.querySelector('.delete') will only get a single element - you need querySelectorAll here, since you will have a delete button for each item.
$('.carousel-item') is (I'm assuming) a jQuery function call. This will get all .carousel-item elements in the document and .attr('data-id') will get the attribute of only the first one. If you wanted to use jQuery here, you would want to go up the DOM from the button element like $(e.target).parent('.carousel-item'). But, since the other code isn't using jQuery, it would be more consistent to use e.target.closest('.js-carousel-item'), imo. Then, to get data-id, we can easily use element.dataset.id.
Don't use globals for this like sao suggested
I'm not sure if data in your example came from a call to db.collection('checkin').get(), but if it was a Promise in your code, instead of the snapshot itself, you would run into problems if your delete button code wasn't nested in the then() callback.
This is more of an optional side-note, but your code could become more readable by refactoring it to use async/await.
I've included a working snippet based on your example below to demonstrate:
;(() => {
// My attempt at a quick mock of Firebase to make this work as a snippet
const db = {
_collections: {
'checkin': [
{
id: 1,
photo: 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80',
title: 'airplane w/ trees',
description: 'airplane on ground surrounded with trees',
}, {
id: 2,
photo: 'https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80',
title: 'head to head',
description: 'minifigure head lot',
},
],
},
collection(key) {
const c = this._collections[key];
const doc = (id) => ({
id,
data() {
return c.find(o => o.id === id);
},
async delete() {
const idx = c.findIndex(o => o.id === id);
c.splice(idx, 1);
},
});
return {
doc,
async get() {
return c.map(o => o.id).map(doc);
},
};
},
}
const render = () => {
db.collection('checkin').get().then(snapshot => {
const cards = snapshot.map(doc => {
const checkin = doc.data();
return `
<div class="js-carousel-item carousel-item fieldId" data-id="${doc.id}">
<div class="col-12">
<div class="card checkCard" style="margin: 0 auto;">
<img src="${checkin.photo}" class="card-img-top" alt="...">
<button class="js-delete" type="submit" class="btn center">
<i class="material-icons" style="font-size: 1em;">delete_forever</i>
</button>
<div class="card-body">
<h5 class="card-title">${checkin.title}</h5>
<p class="card-text">${checkin.description}</p>
</div>
</div>
</div>
</div>`;
});
document.querySelector('.js-checkin-list').innerHTML = cards.join('');
// This is the delete button
const deleteButtons = document.querySelectorAll('.js-delete');
const deleteHandler = (e) => {
e.stopPropagation();
const el = e.target.closest('.js-carousel-item');
const id = +el.dataset.id;
db.collection('checkin').doc(id).delete().then(() => {
console.log(`${id} successfully deleted!`);
}).catch((error) => {
console.error('Error removing document: ', error);
})
render();
}
deleteButtons.forEach(
btn => btn.addEventListener('click', deleteHandler)
);
});
};
render();
})();
<div class="js-checkin-list carousel"></div>
use onclick inline in your string
for example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="parentDiv"></div>
</body>
<script>
let element = `<div id="childDiv" onclick="myFunction()">click here</div>`;
document.getElementById("parentDiv").innerHTML = element;
function myFunction() {
console.log("works every time");
}
</script>
</html>
now the child div gets inserted into the parent and is has an onclick event listener
if you want it to loop, don't loop the addEventListener in JS, loop it in the template literal, in other words, just add this in your string not an extra function.
i just tested it and it works..every...time
have fun!
I have a news bar and I used ngx-newsticker, I need to attach a tooltip for each item in the news bar. However, the plugin takes an array of string as shown below.
I tried to loop throw the array but it doesn't work:
<div class="M_announcementDiv" *ngIf="announcementsArrInTicker && announcementsArrInTicker.length>0">
<div class="container">
<div placement="bottom" [ngbTooltip]="announcementsArrInTicker">
<ngx-newsticker title="{{'ANNOUNCEMENTS'|translate}}" [events]="announcementsArrInTicker" [interval]="interval"></ngx-newsticker>
</div>
</div>
</div>
I need to push the current item to the tooltip in this line instead of pushing
the whole array.
<div placement="bottom" [ngbTooltip]="announcementsArrInTicker">
and this is the ts function that retrieves the data:
getGeneralAnnouncements() {
// this.isAuthenticated = this.authService.isAuthenticated();
this.isAuthenticated =false;
this.newsService.searchGeneralAnnouncements(this.searchModel, this.isAuthenticated).subscribe(res => {
this.announcementArr = res;
res.announcements.map((announcement) => {
if(this.translate.currentLang=="ar"){
this.announcementsArrInTicker.push(announcement.bodyAr);
}else{
this.announcementsArrInTicker.push(announcement.bodyEn);
}
});
}, error => {
// this.businessException = errorsUtility.getBusinessException(error); //this.notificationService.showNotification(this.businessException.message,
NotificationType.Error);
})
}
How do i loop through my data, that i subscribed to as an Observable, push it to an array, and displaying the whole data of the array?
My present code only displays data from each "page", and not all the pages.
The reason why i want to do this, is because i want to make an infinity scroll.
Thank you!
Component:
this.storiesService.getData(this.page, this.hits, this.feed)
.subscribe(
(data) => {
console.log(data);
if (!data || data.hits === 0) {
this.finished = true;
console.log("NO MORE HITS")
} else {
this.finished = false;
for (let story of data.hits) {
this.hitsArray.push(story);
console.log("Hit me!")
console.log(this.hitsArray);
}
}
})
HTML:
<div class="col-4 col-md-4 col-sm-12" *ngFor="let story of hitsArray">
<div class="thumbnail">
<img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" />
<img *ngIf="story.storyMediaType === 'video'" class="img-fluid" src="{{story.storyThumbnailImage}}" width="150" height="94" />
<div class="caption">
<p>{{story.storyCity}}, {{story.storyCountry}}</p>
<h3>{{story.storyHeadline}}</h3>
<p>Uploadet {{story.uploadDate}}</p>
<p>Bruger: {{story.userDisplayName}}</p>
<p>Like Button</p>
</div>
</div>
</div>
Based on your component's template, you are using data which is updated for every newly fetched data from observable here in your subscription
for (let story in data) {
this.data = data; --> here you update regularly
from the above you are saying for every array key update our this.data which seems wrong, because the keys in an array is 0,1,2 which are the index.
Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated. readmore
So instead of the long trip your subscription code that handles the processing of the retrieved data should look like the one below
for (let story of data) { // now of
// this.data = data; not needed else your data is always overriden
// for (let i = 0; i < this.data.length; i++) { no need for this again since the above for..of is handling it
this.hitsArray.push(story);
this.data.hits.push(story);// add the new stories(as last element) to the main data array using this.data here now
console.log(this.hitsArray);
// } for loop of this.data.length
}
So with the above code following the comments should explain what the code is doing and how the irrelevant parts are causing data override.
P.S. your this.data.hits must be an array initialized as [] when the program is loading the component. And your data from your observable must be an array or if object with hits as array then use this code instead for (let story in data.hits) {.
Hope this helps.
So this is the final fix (note: the hitsArray is being loaded as an empty array, every time the params changes):
Component:
this.storiesService.getData(this.page, this.hits, this.feed)
.subscribe(
(data) => {
console.log(data);
if (!data || data.hits == 0) {
this.finished = true;
console.log("No more hits :-(")
} else {
this.finished = false;
for (let story of data.hits) {
this.hitsArray.push(story);
console.log("Hit me!")
console.log(this.hitsArray);
}
}
})
HTML:
<div class="col-4 col-md-4 col-sm-12" *ngFor="let story of hitsArray">
<div class="thumbnail">
<img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" />
<img *ngIf="story.storyMediaType === 'video'" class="img-fluid" src="{{story.storyThumbnailImage}}" width="150" height="94" />
<div class="caption">
<p>{{story.storyCity}}, {{story.storyCountry}}</p>
<h3>{{story.storyHeadline}}</h3>
<p>Uploadet {{story.uploadDate}}</p>
<p>Bruger: {{story.userDisplayName}}</p>
<p>Like Button</p>
</div>
</div>
</div>
Many thanks to #Theophilus for the suggestion! His example may work in most situations other than mine!