d2jsp
d2jsp Forums > Off-Topic > Programmer's Haven > Web Languages > Need Javascript Help > Loops / Classes Not D2 Related
Add Reply New Topic New Poll
zeriel1
#1 Jun 19 2020 07:06am
Group: Member
Posts: 650
Joined: Oct 14 2016
Gold: 127.00
Warn: 10%
iam on a project with typescript at the moment which compiles into javascript anyway

just stuck with a sort problem at a for loop

if someone can help i would appreciate
Stefbef
#2 Jun 19 2020 07:07am
Group: Member
Posts: 62,593
Joined: Jun 24 2007
Gold: 25,295.46
wrong section buddy

try here

https://forums.d2jsp.org/forum.php?f=120
anabolic_mf
#3 Jul 2 2020 04:30pm
Group: Member
Posts: 449
Joined: Sep 29 2006
Gold: 209.00
Quote (zeriel1 @ Jun 19 2020 09:06am)
iam on a project with typescript at the moment which compiles into javascript anyway

just stuck with a sort problem at a for loop

if someone can help i would appreciate


you got some code or a jsfiddle link?
zeriel1
#4 Jul 3 2020 01:30am
Group: Member
Posts: 650
Joined: Oct 14 2016
Gold: 127.00
Warn: 10%
thank you so much for your message!

I managed to fix the problem and also color the drawn lines :) its a visualisation of the bubble sort technique

https://codepen.io/CodeLegend27/pen/YzwYajy

also i managed to do the loop sorting :)

Code

function sortDate(rec1,rec2){
return new Date(rec1.dates) > new Date(rec2.dates) ? -1 : 1
}

ultraarr.sort(sortDate)

for (let i = 0; i < ultraarr.length; i++) {

$(".row").append(ultraarr[i].display())
}




sort an array (its the ultraarr) ,which was created thru typescript class constructor, by their date . in the end it looks so easy and understandable but man did i crushed my head against the wall ^^

and in the class i had a function which iam calling after the sorting which looks like that

Code
display() {
let content = `

<div class="col-sm-12 col-md-6 col-lg-3 mb-5 p-4 p-0 m-0 animate__animated animate__backInLeft">
<div class="card"><h5 class="text-center bg-info p-0 m-0 text-light rounded">LOCATION</h5>
<img class="card-img-top hidden-sm d-sm-none d-md-block rounded" src="img/${this.img}" alt="${this.name}">
<div class="card-body d-flex justify-content-between flex-column" style="min-height: 200px;">
<h5 class="card-title">${this.name}</h5>
<p class="card-text"><b>City</b>: ${this.city}<br> <b>Zip-Code</b> ${this.zip}
<br>
<p><b>Created:</b> ${this.dates.toLocaleString('de-AT')}
</p>
</div>
</div>
</div>

` ;
return content;
}


and thats how a class looks like:

Code
class locations {
name: string;
city: String;
zip: number;
img: string;
dates: Date;

constructor(name, city, zip, img, dates) {
this.name = name;
this.city = city;
this.zip = zip;
this.img = img;
this.dates = dates;
ultraarr.push(this);
};


and just for example 1 variable i pushed in the empty array (since the constructor automatically pushes it )
Code

let tower = new locations(
"Burj Khalifa",
"Dubai",
2333,
"1.jpg",
new Date(2015, 1, 1, 5, 40)
)
Go Back To Web Languages Topic List
Add Reply New Topic New Poll