We Keep Coding

How to dynamically query a for-loop using url paramaters with axios and vuejs

I recently started to experiment with the WordPress Rest API and VueJs. I am trying to accomplish the following:
I use Axios to fetch an API URL (my WP REST API website) to build a list of posts. This works perfectly using the code(s) below.
Next (this is what I can't manage to make it work), I need to be able to 'filter' the for loop using url parameter queries. The parameter is 'country'. Thus, when clicking on a button 'France', e.g. the parameter: ?country=france should be added to the base URL.
Basically I tried to add simple functions on button clicks to these buttons (france & portugal). Please check my code to see what I tried so far.
HTML Code
<div class="row">
<button v-on:click="getFrance" id="france" class="m-2">France</button>
<button v-on:click="getPortugal" id="portugal" class="m-2">Portugal</button>
<form class="form-inline" v-on:submit.prevent="searchCountry">
<input type="text" id="nameInput" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Frankrijk" v-model="country">
<input type="submit" class="btn btn-primary"></input>
</form>
{{country}}
</div>
<div class="row">
<template>
<div class="col-6" v-for="post of posts" :key="post.id">
<div class="card">
<img v-bind:src="post.acf.header_picture.url" class="card-img-top" alt="Card image cap">
<div class="card-body v-html">
<h5>{{ post.title.rendered }}</h5>
</div>
<div class="card-footer">
<a><button class="btn-sm btn-warning">Read more</button></a>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
JS Code
var app = new Vue({
el: '#app',
data () {
return {
country : '',
posts : [] }
},
mounted () {
axios
.get('<<WP REST API URL>>', {
params: {
country: this.country
}
})
.then(response => {
this.posts = response.data
})
},
methods : {
getFrance: function(){
this.country = 'france'
},
getPortugal: function(){
this.country = 'portugal'
}
}
})
EDIT: I added the Response Data of the URL as requested. However, it's quite a big chunk of data, so let me know if this is not what you're looking for.
acf: Object
about_accommodation: "<ul>↵<li><strong>Tent</strong>: de tenten zijn voor 4 personen en bestaan uit 2 delen die beide geschikt zijn voor 2 personen. Naast het slaapdeel is er een plek waar de bagage kan liggen, wel zo fijn dus. Er is hier geen slaapmateriaal aanwezig, dus je dient zelf een matje, slaapzak en kussen mee te nemen. Het is mogelijk om zo’n ‘compartiment’ privé te boeken.</li>↵<li><strong>Sheddie</strong>: deze gezellige houten huisjes zijn een stuk comfortabeler dan de tenten en zijn geschikt voor 2 personen. Er is een groot bed aanwezig, waar 2 personen in kunnen slapen. Je kunt ter plekke beddengoed huren of zelf een slaapzak en kussen meenemen. Ook is er voldoende ruimte voor je bagage en zelfs een surfplank. Je kunt er net staan, wel zo makkelijk om je even op jezelf om te kleden voor de surfsessie. Ook deze kun je privé boeken.</li>↵<li><strong>Sheddie Deluxe</strong>: deze tenten zijn nog groter dan de sheddies en dus nog een stuk comfortabeler. Je kunt kiezen tussen 2 losse bedden of een groot 2-persoonsbed, ideaal voor koppels. Ook hier zijn matrassen aanwezig en heb je de optie om een beddengoedpakket bij te boeken. Indien je deze optie privé wilt, is dat mogelijk.</li>↵<li><strong>Tipi-Deluxe: </strong>De Tipi Deluxe is een prachtig ruimte tipi-tent met twee losse of 1 groot bed met een mooie aankleding. Dit is verblijven in stijl!</li>↵</ul>↵"
about_activities: "<ul>↵<li><strong>Party:</strong> 18+, dat betekent party! Vanaf het surfkamp kun je lopend naar tal van leuke barretjes die tot in de vroege uurtjes open zijn</li>↵<li><strong>Trips: </strong>tijdens jouw verblijf kun je deelnemen aan de daguitstap naar San Sebastian, een fantastische stad die zeker een bezoekje waard zijn. Ontdek de echte gastronomie die Spanje te bieden heeft</li>↵<li><strong>Yoga:</strong> kies voor de yogalessen voor de ideale ontspanning en een leuke afwisseling met het surfen. Dit is de beste manier om je spieren even helemaal bij te laten komen na een flinke inspanning in het water</li>↵<li><strong>Skate & Beach:</strong> ook naast het surfen is er van alles te doen. Cruise over de boulevard van Moliets en geniet van het vrije leven</li>↵</ul>↵"
about_facilities: Array(8)
about_guests: "<p>In het surfkamp vind je vooral Nederlandstaligen, de meesten tussen de 18 en de 25 jaar oud. De sheddies zijn perfect om als koppel of vrienden te verblijven maar ook solo reizigers weten een weg te vinden naar Surfblend Moliets</p>↵"
about_meals: "<ul>↵<li><strong>Eten:</strong> het halfpension is zeker aan te raden. Je zult 8 x ontbijten (incl. nadat je aankomt in het surfkamp na de busreis) en 5 x wordt er een divers en lekker diner geserveerd. Het hoogtepunt voor velen is de wekelijkse barbecue, gegarandeerd het begin van een mooie avond. In Zarautz zelf zijn er een aantal leuke opties voor lunch, maar voor ontbijt en diner is de maaltijd-optie aan te raden – wel zo makkelijk en het is ook nog eens heel erg lekker</li>↵<li><strong>Dieetwensen:</strong> het is geen probleem indien je een bepaalde dieetwens hebt. Geef dit van te voren even aan bij de kampleiding</li>↵<li><strong>Kookfaciliteiten:</strong> in het surfkamp zijn verder geen kookfaciliteiten aanwezig die door de gasten kunnen worden gebruikt</li>↵</ul>↵"
about_surf_conditions: "<ul>↵<li><strong>Beginners:</strong> beginnende surfers raden wij de cursus van 15 uur ten zeerste aan. Zeker in het begin is surfen een vrij lastig te leren sport, waarbij goede training vereist is.</li>↵<li><strong>Intermediate:</strong> intermediate surfers raden wij de cursus van 10 uur ten zeerste aan.</li>↵<li><strong>Gevorderd: </strong>gevorderde surfers kunnen ervoor kiezen om alleen gebruik te maken van het surfmateriaal.</li>↵</ul>↵"
about_surf_holiday: "<ul>↵<li><strong>Het kamp: </strong>dit surfkamp biedt werkelijk alles: surfen, veel fun, leuke activiteiten en uiteraard een flinke dosis party! Alle gasten zijn ten minste 18 jaar oud en hierdoor ontstaat er een leuke sfeer waar iedereen uit is op hetzelfde: een fantastische tijd hebben. Het prachtige surfstrand van Molietes bevindt zich op loopafstand van het surfkamp, ideaal dus. En ook de vele barretjes in het centrum kun je gemakkelijk bereiken. Ben jij klaar voor dé surfvakantie van 2020?</li>↵<li><strong>Moliets: </strong>dit Franse dorpje ademt surf, meer dan waar dan ook. In de zomer komen hier surfers van alle hoeken uit de wereld naartoe om de beroemde golven van Moliets te proberen. Ook is er een gezellige boulevard met enkele horecagelegenheden.</li>↵<li><strong>Vervoer: </strong>wat erg fijn is, is dat Moliets vanuit Nederland en België met de bus bereikbaar is. Zie onderaan deze pagina ‘vervoer’ voor meer informatie.</li>↵</ul>↵"
about_surf_lessons: "<ul>↵<li><strong>Surfen:</strong> je kunt kiezen uit de volgende surfpakketten:↵<ul>↵<li>Pakket S: 3 dagen surfles per week + gebruik surfmateriaal</li>↵<li>Pakket M: 5 dagen surfles per week + gebruik surfmateriaal</li>↵<li>Alleen gebruik surfmateriaal</li>↵<li>Er worden ook theorielessen gegeven</li>↵<li>Voor beginnende surfers raden wij Pakket L ten zeerste aan. Zeker in het begin is surfen een vrij lastig te leren sport, waarbij goede training vereist is</li>↵</ul>↵</li>↵<li><strong>Surfmateriaal:</strong> bij alle pakketten is het gebruik van het surfmateriaal (surfboard & wetstuit) inbegrepen in de prijs van het verblijf. Het is echter wel zo dat de gasten die surflessen volgen, voorrang krijgen op het surfmateriaal. Meestal levert dit geen problemen op en zeker ook buiten de lessen om kan er gewoon gesurft worden.</li>↵</ul>↵<p> </p>↵"
about_transport: "<ul>↵<li><strong>Surfbus: </strong>de bussen naar Moliets vertrekken op vrijdagmiddag vanaf Amsterdam, Utrecht, Den Bosch, Breda, Antwerpen en Gent. De vertrektijd zal liggen tussen 13:00 en 18:30 uur. Op de zaterdag van jouw vertrek zal de bus aan het einde van de middag terugrijden richting België en Nederland, waar je dan zondagochtend aankomt. Rijdt vanaf 21 juni t/m 15 september 2019 (vertrek vrijdagmiddag, terugkomst zondagochtend).</li>↵<li><strong>Eigen vervoer:</strong> het is geen probleem om met de auto naar camping Moliets te komen. Er zijn mogelijkheden om gratis te parkeren.</li>↵</ul>↵"
accommodation: "Gedeelde en privé tenten"
accommodation_type: "Surfkamp"
activities_gallery: Array(3)
add_ons: Object
alert_checkbox: Array(1)
alert_text: "<p>Er zijn nog enkele plekken beschikbaar voor deze zomer, wacht niet met boeken!</p>↵"
arrival: "Aankomst en vertrek op zaterdag"
availability: "Raakt spoedig volgeboekt"
average_age: "18 - 25"
carousel: Array(3)
check-in-check-out: (...)
country: "Frankrijk"
covid: true
etc.etc.

From my understanding, if you're filtering posts, it must be done on the API side, so you get all the "France" posts, don't get unnecessary info, and don't waste memory.
If you can't filter it on API side (but why send URL parameters then) and getting all the posts, you can create a method like to use it to filter posts:
filterPostsByCountry: function() {
return this.posts.filter(post => post.country === this.country);
}

How to find index of object key in JSON

I try to get the index of my selected value to show all deeper options.
My JSON looks like this:
{
"flow": {
"startmessage": "Hallo [name]",
"questionmessage": "Waar heb je een vraag over?",
"categories": [
{
"Openingstijden": [
{"Hoe pas ik mijn openingstijden aan?": ["text 2"]},
"Hoe upload ik een audio file?",
"Hoe stel ik een doorschakeling in?",
"Hoe stel ik een pauze in?"
]
},
{
"Mijn bedrijfsgegevens": [
"Hoe wijzig ik mijn bedrijfsgegevens?",
"Hoe maak ik een nieuwe gebruiker aan?",
"Mijn bedrijfsgegevens kloppen niet"
]
},
{
"Mijn facturen": [
"Hoe kan ik mijn facturen inzien?",
"Ik heb geen factuur ontvangen",
"Het bedrag op mijn factuur klopt niet!"
]
},
{
"Mijn project": [
"Hoe kan ik mijn projectstatus inzien?",
"Waar kan ik mijn project terugvinden?",
"Waarom moet ik een inventarisatiefomulier invullen?"
]
},
{
"Mijn contract": [
"Waar kan ik mijn contract terugvinden?",
"De gegevens van mijn contract kloppen niet"
]
},
{
"CDR's": [
"Hoe exporteer ik mijn CDR's?",
"Waarom werken mijn CDR's niet?",
"Hoe filter ik mijn CDR's?"
]
}
]
}
}
I tried to do this to get the index of 'Openingstijden'.
flow is the name of the JSON object I gave.
var index = flow['flow']['categories'].findIndex(function(category) {
return category == "Openingstijden";
});
I also tried this:
var index = Object.keys(flow['flow']['categories']).indexOf("Openingstijden");
This however always returns -1, so it says it cannot find it.
Does anyone know how to find the index and maybe how to make my JSON structure better?
Maybe I'm using a too complicated structure?!

Each array item is an object with the key you want to search for. With your current structure, map each array item to its key first:
const flow={flow:{startmessage:"Hallo [name]",questionmessage:"Waar heb je een vraag over?",categories:[{Openingstijden:[{"Hoe pas ik mijn openingstijden aan?":["text 2"]},"Hoe upload ik een audio file?","Hoe stel ik een doorschakeling in?","Hoe stel ik een pauze in?"]},{"Mijn bedrijfsgegevens":["Hoe wijzig ik mijn bedrijfsgegevens?","Hoe maak ik een nieuwe gebruiker aan?","Mijn bedrijfsgegevens kloppen niet"]},{"Mijn facturen":["Hoe kan ik mijn facturen inzien?","Ik heb geen factuur ontvangen","Het bedrag op mijn factuur klopt niet!"]},{"Mijn project":["Hoe kan ik mijn projectstatus inzien?","Waar kan ik mijn project terugvinden?","Waarom moet ik een inventarisatiefomulier invullen?"]},{"Mijn contract":["Waar kan ik mijn contract terugvinden?","De gegevens van mijn contract kloppen niet"]},{"CDR's":["Hoe exporteer ik mijn CDR's?","Waarom werken mijn CDR's niet?","Hoe filter ik mijn CDR's?"]}]}};
const keys = flow['flow']['categories'].map(arr => Object.keys(arr)[0]);
const index = keys.indexOf("Openingstijden");
console.log(index);
It's quite strange to have objects with only one property, though, you might consider having categories being an array of objects, where one key is the unique string (eg, Openingstijden), and the other key is the array, eg:
{
label: "Openingstijden",
arr: [
{"Hoe pas ik mijn openingstijden aan?": ["text 2"]},
"Hoe upload ik een audio file?",
"Hoe stel ik een doorschakeling in?",
"Hoe stel ik een pauze in?"
]
}
Then you can look up the label property.
If you often want to look up an object by the label, then instead of an array of categories, use an object, where each key is the label, eg:
const flow = {
"flow": {
"startmessage": "Hallo [name]",
"questionmessage": "Waar heb je een vraag over?",
"categories": {
"Openingstijden": [
{"Hoe pas ik mijn openingstijden aan?": ["text 2"]},
"Hoe upload ik een audio file?",
"Hoe stel ik een doorschakeling in?",
"Hoe stel ik een pauze in?"
]
},
"Mijn bedrijfsgegevens": [
"Hoe wijzig ik mijn bedrijfsgegevens?",
"Hoe maak ik een nieuwe gebruiker aan?",
"Mijn bedrijfsgegevens kloppen niet"
],
...

As commented, this should be enough
flow['flow']['categories'].findindex((category) => 'Openingstijden' in obj)
Issue with your approach was that you were trying to get keys of an array and not object in it.
Sample:
var flow = {
"flow": {
"startmessage": "Hallo [name]",
"questionmessage": "Waar heb je een vraag over?",
"categories": [{
"Openingstijden": [{
"Hoe pas ik mijn openingstijden aan?": ["text 2"]
},
"Hoe upload ik een audio file?",
"Hoe stel ik een doorschakeling in?",
"Hoe stel ik een pauze in?"
]
},
{
"Mijn bedrijfsgegevens": [
"Hoe wijzig ik mijn bedrijfsgegevens?",
"Hoe maak ik een nieuwe gebruiker aan?",
"Mijn bedrijfsgegevens kloppen niet"
]
},
{
"Mijn facturen": [
"Hoe kan ik mijn facturen inzien?",
"Ik heb geen factuur ontvangen",
"Het bedrag op mijn factuur klopt niet!"
]
},
{
"Mijn project": [
"Hoe kan ik mijn projectstatus inzien?",
"Waar kan ik mijn project terugvinden?",
"Waarom moet ik een inventarisatiefomulier invullen?"
]
},
{
"Mijn contract": [
"Waar kan ik mijn contract terugvinden?",
"De gegevens van mijn contract kloppen niet"
]
},
{
"CDR's": [
"Hoe exporteer ik mijn CDR's?",
"Waarom werken mijn CDR's niet?",
"Hoe filter ik mijn CDR's?"
]
}
]
}
}
var index = flow['flow']['categories'].findIndex((category) => 'Openingstijden' in category);
console.log(index)

Assuming the object that includes the flow object is assigned to a data variable:
let data = {
"flow": {
"startmessage": "Hallo [name]",
"questionmessage": "Waar heb je een vraag over?",
"categories": [
{
"Openingstijden": [
{"Hoe pas ik mijn openingstijden aan?": ["text 2"]},
"Hoe upload ik een audio file?",
"Hoe stel ik een doorschakeling in?",
"Hoe stel ik een pauze in?"
]
},
{
"Mijn bedrijfsgegevens": [
"Hoe wijzig ik mijn bedrijfsgegevens?",
"Hoe maak ik een nieuwe gebruiker aan?",
"Mijn bedrijfsgegevens kloppen niet"
]
},
{
"Mijn facturen": [
"Hoe kan ik mijn facturen inzien?",
"Ik heb geen factuur ontvangen",
"Het bedrag op mijn factuur klopt niet!"
]
},
{
"Mijn project": [
"Hoe kan ik mijn projectstatus inzien?",
"Waar kan ik mijn project terugvinden?",
"Waarom moet ik een inventarisatiefomulier invullen?"
]
},
{
"Mijn contract": [
"Waar kan ik mijn contract terugvinden?",
"De gegevens van mijn contract kloppen niet"
]
},
{
"CDR's": [
"Hoe exporteer ik mijn CDR's?",
"Waarom werken mijn CDR's niet?",
"Hoe filter ik mijn CDR's?"
]
}
]
}
}
for (let i of data.flow.categories) {
for (let j in i) {
if (j === "Openingstijden") {
console.log("index is: " + j);
}
}
}
I should note that using in to iterate objects is a bit tricky in case the object includes functions etc. In this case it does not so there is no reason not to use.

Writing javascript to certain places of a page

I am tasked with a school project using JavaScript. I want to make a slideshow using the Materialize build in plugin. I have to use JavaScript arrays to make the list, but now the content is hard written in html.
I have the 3 arrays build in a file called main.js (which is propperly linked).
I need to know how to generate the LI elements with the right content in them, I figured I had to use a for loop. This works if I want to display the items in the arrays without any styling on a separate page.
How can I put them in the slides? It should look like this
main.js:
<div class="col s12 m12">
<div class="card grey darken-2">
<div class="card-content white-text">
<span class="card-title">Acteurs</span>
<div class="slider grey darken-2">
<ul class="slides grey darken-2">
<!--<li>
<h5 class='subtitle'>Dexter Morgan</h5>
<div class='slide-img'><img src='img/DexterMorgan.png'></div>
<p>Sinds zijn jeugd voelt Dexter een drang om te moorden, die hem wordt ingefluisterd door een innerlijke stem die hij "the Dark Passenger" noemt. Hij houdt zich aan een ethische code die hem werd opgelegd door zijn adoptievader Harry Morgan, die zegt dat hij enkel mensen mag vermoorden die zelf moorden op hun geweten hebben.</p><br />
<p>Dexter beschouwt zichzelf als emotioneel afgesloten van de rest van de mensheid. Vaak refereert hij naar een innerlijk gevoel van leegheid en zegt hij dat hij moordt om zich levendig te voelen. Hij zegt dat hij geen gevoelens of geweten heeft, en dat al zijn emotionele reacties een deel zijn van een goed ingestudeerde rol om zijn ware aard te verbergen. Hij heeft geen interesse in romantiek of seks en beschouwt zijn relatie met zijn vriendin (en later vrouw) Rita Bennett als een onderdeel van zijn dekmantel.</p><br />
<p>De modus operandi van Dexter zorgt er niet alleen voor dat hij een maximum aan opwinding verkrijgt uit het vermoorden van zijn slachtoffers, maar zorgt er ook voor dat er een minimum aan sporen achterblijft. Dexter kiest zijn slachtoffers uit volgens de door zijn adoptievader opgelegde "code" en onderzoekt eigenhandig of ze moordenaars zijn of niet, waarna hij ze (enkel in de televisieserie) opzoekt om na te gaan of ze opnieuw zullen moorden. Daarna zoekt hij een ruimte die vaak symbolisch in verbinding staat met het slachtoffer, om hem te vermoorden. Hij overdekt alles met plasticfolie, zodat bloedsporen onmogelijk zijn. Meestal hangt hij ook foto's en bewijsstukken op van de misdaden die zijn slachtoffers hebben begaan.</p>
</li>
<li>
<h5 class='subtitle'>Debra Morgan</h5>
<div class='slide-img'><img src='img/DebraMorgan.png'></div>
<p>Debra werkt aanvankelijk als undercoveragent voor de politie. Ze wordt voorgesteld als de zus van Dexter Morgan, ware het niet dat al in de eerste aflevering blijkt dat Dexter eigenlijk geadopteerd werd door Debra's vader Harry Morgan toen ze nog zeer jong was. Debra en Dexter hebben een extreem nauwe band met elkaar. Het personage heeft er al verschillende relaties opzitten en is in de loop der tijd ontzettend geëvolueerd. In seizoen 1 wordt Debra verliefd op een man die zichzelf Rudy Cooper noemt, maar uiteindelijk blijkt het te gaan om "Ice Truck Killer" Brian Moser, de broer van Dexter. Ze wordt door hem ontvoerd, maar Dexter kan haar redden. In seizoen 2 heeft ze een relatie met FBI-agent Frank Lundy, die later in seizoen 4 voor haar ogen wordt vermoord. Nadat ook haar schoonzus Rita Bennett vermoord werd, helpt Debra haar broer Dexter in de opvoeding van zijn zoontje Harrisson.</p><br />
<p>Debra is geboren als dochter van Doris en Harry Morgan en is de pleegzus van Dexter Morgan. Al van jongs af aan is ze stoer en gebruikt ze grove woorden, maar hunkert ze eigenlijk naar aandacht van haar vader. Ze benijdt Dexter voor al de tijd die hij en Harry samen doorbrengen, maar heeft er geen idee van dat Harry hem toen leerde hoe hij ongestraft kon moorden.</p><br />
<p>Als ze zestien is, sterft haar moeder aan kanker. Sindsdien is ze vastberaden om net als haar vader rechercheur te worden. Ze begint schieten te leren met het wapen van haar vader. Dexter ontdekt dit en vertelt dit aan Harry, die haar straft. Een razende Debra zegt dan tegen Dexter dat Harry nooit in hun leven toegelaten mocht worden; al gauw trekt ze haar woorden weer in en verontschuldigt ze zich.</p>
</li>
<li>
<h5 class='subtitle'>Angel Batista</h5>
<div class='slide-img'><img src='img/AngelBastista.png'></div>
<p>Angel is inspecteur bij de sectie Moord van het Miami Metro Police Department. Hij werkt er nauw samen met Dexter Morgan, die hij bewondert omwille van zijn expertise rond seriemoordenaars. Hij beschouwt zichzelf als Dexters' beste vriend, maar kan zich niet echt vinden in zijn fascinatie voor bloed. In de boekenreeks is Batista geen rechercheur, maar een forensisch expert en rechtstreeks collega van Dexter. Batista heeft een vrij droge vorm van humor.</p><br />
<p>Angel beloofde zijn vader op diens sterfbed om steeds over alles en iedereen eerlijk te zijn. Dit brengt hem later in problemen, wanneer hij na een avontuurtje met een andere vrouw zijn daden bekent aan zijn vrouw, die meteen een einde maakt aan hun huwelijk. Na maanden van eenzaamheid zoekt Batista heil in de spirituele wereld om van zijn pijn verlost te raken. Batista denkt dat hij de beste vriend van Dexter is, wat Dexter vreemd vindt, want hij heeft hem naar eigen zeggen nooit een reden gegeven om dit te denken.</p>
</li>
<li>
<h5 class='subtitle'>Vince Masuka</h5>
<div class='slide-img'><img src='img/VinceMasuka.png'></div>
<p>Hij heeft een seksobsessie (hoe kinkier hoe beter) en is er niet verlegen om toenadering te zoeken tot elke vrouw die hij tegenkomt. Toch was hij in staat om "normaal" te doen, bijvoorbeeld toen Angel Batista in het ziekenhuis lag of wanneer Debra helemaal over haar toeren was door de terugkeer van Lundy. Op een bepaald moment confronteert Joey Quinn Vince met het feit dat omwille van zijn gedrag eigenlijk niemand hem kan uitstaan, wat voor hem een behoorlijke schok is. Later blijkt echter dat Quinn overdreef, en dat zijn collega's het gedrag van Vince best amusant vinden, zolang hij niet overdrijft.</p>
</li>
<li>
<h5 class='subtitle'>Joey Quinn</h5>
<div class='slide-img'><img src='img/JoeyQuinn.png'></div>
<p>Quinn lijkt een boontje te hebben voor zijn nieuwe partner, Debra Morgan, en gaat zelfs zo ver in zijn charme-offensief dat hij een informant inschakelt om haar te helpen in de zaak rond Oscar Prado. Over Quinns verleden is maar weinig bekend, wat bij Debra vragen oproept, zeker wanneer ze door de dienst Interne Zaken wordt gevraagd om hem discreet in het oog te houden. Quinn komt hier al snel achter en geeft uiteindelijk toe dat hij in het verleden de schuld kreeg voor de dood van een collega. Debra vertrouwt hem niet langer en raadt Dexter af of Quinn uit te nodigen op zijn huwelijk. Quinn maakt uiteindelijk toch zijn opwachting.</p>
</li>
<li>
<h5 class='subtitle'>Rita Bennett</h5>
<div class='slide-img'><img src='img/RitaBennett.png'></div>
<p>Rita Benett verschijnt in de eerste aflevering als Dexter Morgans' vriendin. Ze blijkt mishandeld en seksueel misbruikt te zijn door haar ex-man, Paul Bennett. Dexters' zus Debra Morgan ontving indertijd een oproep over huishoudelijk geweld en redde haar leven. Rita heeft ook twee kinderen, Astor en Cody Bennett. Onwetend over Dexters' leven als seriemoordenaar, fungeert ze doorheen het eerste seizoen vaak als zijn grootste steun. Ze speelt een grote rol in de aflevering "Return to Sender", waarin Paul Bennett wordt vrijgelaten uit de gevangenis en naar het verjaardagsfeest van zijn dochter wil komen. In "Circle of Friends" maakt Rita hem duidelijk dat hij zijn kinderen voorlopig enkel onder toezicht te zien krijgt, voordat ze toestemming geeft voor vrije momenten. Paul gaat aanvankelijk akkoord, maar in de aflevering "Father Knows Best" hervalt Paul in zijn oude gewoonten en gebruikt hij geweld om zijn kinderen te zien. Hij dringt haar huis binnen en Rita verdedigt zich door hem neer te slaan met een honkbalknuppel. Paul dient een klacht in tegen Rita en bedreigt ook Dexter. Dexter slaagt hem KO en voert hem terug naar zijn hotel, waar hij doet uitschijnen dat Paul drugs gebruikt heeft. Dexter waarschuwt de politie en de onder voorwaarden vrijgelaten Paul belandt terug in de gevangenis.</p>
</li>
<li>
<h5 class='subtitle'>James Doakes</h5>
<div class='slide-img'><img src='img/JamesDoakes.png'></div>
<p>Doakes haat Dexter; hij is de enige persoon die merkt dat Dexter zich anders voordoet dan hij werkelijk is. Doakes verdenkt Dexter er openlijk van iets te verbergen, en dit vermoeden gaat er alleen nog maar op vooruit wanneer hij ontdekt dat Dexter informatie over de Ice Truck Killer-zaak achterhoudt.</p>
</li>-->
</ul>
</div>
</div>
</div>
</div>
/*
* Simulatie database in JS
* Gebruik gemaakt van: Arrays en For loop
*/
var actors = ["Dexter Morgan","Debra Morgan", "Angel Batista", "Vince Masuka", "Joey Quinn", "Rita Bennett", "James Doakes"];
var images = ["DexterMorgan.png", "DebraMorgan.png", "AngelBatista.png", "VinceMasuka.png", "JoeyQuinn.png", "RitaBennett.png", "JamesDoakes.png"];
var bio = [
"<p>Sinds zijn jeugd voelt Dexter een drang om te moorden, die hem wordt ingefluisterd door een innerlijke stem die hij "the Dark Passenger" noemt. Hij houdt zich aan een ethische code die hem werd opgelegd door zijn adoptievader Harry Morgan, die zegt dat hij enkel mensen mag vermoorden die zelf moorden op hun geweten hebben.</p><br />
<p>Dexter beschouwt zichzelf als emotioneel afgesloten van de rest van de mensheid. Vaak refereert hij naar een innerlijk gevoel van leegheid en zegt hij dat hij moordt om zich levendig te voelen. Hij zegt dat hij geen gevoelens of geweten heeft, en dat al zijn emotionele reacties een deel zijn van een goed ingestudeerde rol om zijn ware aard te verbergen. Hij heeft geen interesse in romantiek of seks en beschouwt zijn relatie met zijn vriendin (en later vrouw) Rita Bennett als een onderdeel van zijn dekmantel.</p><br />
<p>De modus operandi van Dexter zorgt er niet alleen voor dat hij een maximum aan opwinding verkrijgt uit het vermoorden van zijn slachtoffers, maar zorgt er ook voor dat er een minimum aan sporen achterblijft. Dexter kiest zijn slachtoffers uit volgens de door zijn adoptievader opgelegde "code" en onderzoekt eigenhandig of ze moordenaars zijn of niet, waarna hij ze (enkel in de televisieserie) opzoekt om na te gaan of ze opnieuw zullen moorden. Daarna zoekt hij een ruimte die vaak symbolisch in verbinding staat met het slachtoffer, om hem te vermoorden. Hij overdekt alles met plasticfolie, zodat bloedsporen onmogelijk zijn. Meestal hangt hij ook foto's en bewijsstukken op van de misdaden die zijn slachtoffers hebben begaan.</p>",
"<p>Debra werkt aanvankelijk als undercoveragent voor de politie. Ze wordt voorgesteld als de zus van Dexter Morgan, ware het niet dat al in de eerste aflevering blijkt dat Dexter eigenlijk geadopteerd werd door Debra's vader Harry Morgan toen ze nog zeer jong was. Debra en Dexter hebben een extreem nauwe band met elkaar. Het personage heeft er al verschillende relaties opzitten en is in de loop der tijd ontzettend geëvolueerd. In seizoen 1 wordt Debra verliefd op een man die zichzelf Rudy Cooper noemt, maar uiteindelijk blijkt het te gaan om "Ice Truck Killer" Brian Moser, de broer van Dexter. Ze wordt door hem ontvoerd, maar Dexter kan haar redden. In seizoen 2 heeft ze een relatie met FBI-agent Frank Lundy, die later in seizoen 4 voor haar ogen wordt vermoord. Nadat ook haar schoonzus Rita Bennett vermoord werd, helpt Debra haar broer Dexter in de opvoeding van zijn zoontje Harrisson.</p><br />
<p>Debra is geboren als dochter van Doris en Harry Morgan en is de pleegzus van Dexter Morgan. Al van jongs af aan is ze stoer en gebruikt ze grove woorden, maar hunkert ze eigenlijk naar aandacht van haar vader. Ze benijdt Dexter voor al de tijd die hij en Harry samen doorbrengen, maar heeft er geen idee van dat Harry hem toen leerde hoe hij ongestraft kon moorden.</p><br />
<p>Als ze zestien is, sterft haar moeder aan kanker. Sindsdien is ze vastberaden om net als haar vader rechercheur te worden. Ze begint schieten te leren met het wapen van haar vader. Dexter ontdekt dit en vertelt dit aan Harry, die haar straft. Een razende Debra zegt dan tegen Dexter dat Harry nooit in hun leven toegelaten mocht worden; al gauw trekt ze haar woorden weer in en verontschuldigt ze zich.</p>",
"<p>Angel is inspecteur bij de sectie Moord van het Miami Metro Police Department. Hij werkt er nauw samen met Dexter Morgan, die hij bewondert omwille van zijn expertise rond seriemoordenaars. Hij beschouwt zichzelf als Dexters' beste vriend, maar kan zich niet echt vinden in zijn fascinatie voor bloed. In de boekenreeks is Batista geen rechercheur, maar een forensisch expert en rechtstreeks collega van Dexter. Batista heeft een vrij droge vorm van humor.</p><br />
<p>Angel beloofde zijn vader op diens sterfbed om steeds over alles en iedereen eerlijk te zijn. Dit brengt hem later in problemen, wanneer hij na een avontuurtje met een andere vrouw zijn daden bekent aan zijn vrouw, die meteen een einde maakt aan hun huwelijk. Na maanden van eenzaamheid zoekt Batista heil in de spirituele wereld om van zijn pijn verlost te raken. Batista denkt dat hij de beste vriend van Dexter is, wat Dexter vreemd vindt, want hij heeft hem naar eigen zeggen nooit een reden gegeven om dit te denken.</p>",
"<p>Hij heeft een seksobsessie (hoe kinkier hoe beter) en is er niet verlegen om toenadering te zoeken tot elke vrouw die hij tegenkomt. Toch was hij in staat om "normaal" te doen, bijvoorbeeld toen Angel Batista in het ziekenhuis lag of wanneer Debra helemaal over haar toeren was door de terugkeer van Lundy. Op een bepaald moment confronteert Joey Quinn Vince met het feit dat omwille van zijn gedrag eigenlijk niemand hem kan uitstaan, wat voor hem een behoorlijke schok is. Later blijkt echter dat Quinn overdreef, en dat zijn collega's het gedrag van Vince best amusant vinden, zolang hij niet overdrijft.</p>",
"<p>Quinn lijkt een boontje te hebben voor zijn nieuwe partner, Debra Morgan, en gaat zelfs zo ver in zijn charme-offensief dat hij een informant inschakelt om haar te helpen in de zaak rond Oscar Prado. Over Quinns verleden is maar weinig bekend, wat bij Debra vragen oproept, zeker wanneer ze door de dienst Interne Zaken wordt gevraagd om hem discreet in het oog te houden. Quinn komt hier al snel achter en geeft uiteindelijk toe dat hij in het verleden de schuld kreeg voor de dood van een collega. Debra vertrouwt hem niet langer en raadt Dexter af of Quinn uit te nodigen op zijn huwelijk. Quinn maakt uiteindelijk toch zijn opwachting.</p>",
"<p>Rita Benett verschijnt in de eerste aflevering als Dexter Morgans' vriendin. Ze blijkt mishandeld en seksueel misbruikt te zijn door haar ex-man, Paul Bennett. Dexters' zus Debra Morgan ontving indertijd een oproep over huishoudelijk geweld en redde haar leven. Rita heeft ook twee kinderen, Astor en Cody Bennett. Onwetend over Dexters' leven als seriemoordenaar, fungeert ze doorheen het eerste seizoen vaak als zijn grootste steun. Ze speelt een grote rol in de aflevering "Return to Sender", waarin Paul Bennett wordt vrijgelaten uit de gevangenis en naar het verjaardagsfeest van zijn dochter wil komen. In "Circle of Friends" maakt Rita hem duidelijk dat hij zijn kinderen voorlopig enkel onder toezicht te zien krijgt, voordat ze toestemming geeft voor vrije momenten. Paul gaat aanvankelijk akkoord, maar in de aflevering "Father Knows Best" hervalt Paul in zijn oude gewoonten en gebruikt hij geweld om zijn kinderen te zien. Hij dringt haar huis binnen en Rita verdedigt zich door hem neer te slaan met een honkbalknuppel. Paul dient een klacht in tegen Rita en bedreigt ook Dexter. Dexter slaagt hem KO en voert hem terug naar zijn hotel, waar hij doet uitschijnen dat Paul drugs gebruikt heeft. Dexter waarschuwt de politie en de onder voorwaarden vrijgelaten Paul belandt terug in de gevangenis.</p>",
"<p>Doakes haat Dexter; hij is de enige persoon die merkt dat Dexter zich anders voordoet dan hij werkelijk is. Doakes verdenkt Dexter er openlijk van iets te verbergen, en dit vermoeden gaat er alleen nog maar op vooruit wanneer hij ontdekt dat Dexter informatie over de Ice Truck Killer-zaak achterhoudt.</p>"
];
for(var i=0; i<actors.length; i++) {
document.write(actors[i]);
}

If i understand what you want correctly you can use document.createElement making a li in the for loop and append the text of the currently looped array item into it, Then we just add that newly created element to our placeholder in our case using appendChild.
Code:
var actors = ["Dexter Morgan","Debra Morgan", "Angel Batista", "Vince Masuka", "Joey Quinn", "Rita Bennett", "James Doakes"];
var placeholder = document.querySelector('.placeholder');
for(var i = 0;i < actors.length;i++) {
var li = document.createElement('li');
li.innerHTML = actors[i];
console.log(li);
placeholder.appendChild(li);
}
I've used a placeholder here to insert the items;
Example

I'm having an Issue with a simple HTML/jQuery page

I have been working on this problem for 3 days, and I still have no answer to this problem I'm facing, it must be simple I just can't figure it out.
I'm using HTML and jQuery for a simple jQuery/HTML page to navigate 3 pages.
the problem is that when I swipe between pages I have kind of layout flash, for the first second after I swipe I see the page resizing and showing the first page for a flash second, and then the page would be normal again.
Here is my code :
JS FIDDLE LIVE DEMO
var newsnum=10;
var i=1;
$("body").on("swipeleft",function(){
if (i<newsnum) {
i++;
$.mobile.changePage('#p'+i, {
allowSamePageTransition :true,
transition: "fade"});
}});
$("body").on("swiperight",function(){
if (i>1) {
i--;
$.mobile.changePage('#p'+i, {
allowSamePageTransition :true,
transition: "fade",
reverse: true });
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<div data-role="page" id="p1">
<img style="width:800px; height:200px" src="http://www.parismania.fr/wp-content/uploads/2013/01/Didot_Matuidi.jpg" class="img-responsive" > <br><h4 align="left" style="color:#E49B0F; padding-left:10px;"> 111111111 </h4> <div> <h5 style="padding-left:10px; padding-right:10px;"> Touchée à la cheville droite la semaine passée, la milieu de terrain Sandie Toletti (Montpellier) ne sera pas opérationnelle pour la Coupe du Monde au Canada (6 juin au 5 juillet). C'est sa coéquipière au MHSC Marina Makanza qui la remplace.<br\/><br\/>Communiqué de la FFF\ <br\/>Dimanche 3 mai dernier, lors du match de D1 féminine entre Juvisy et Montpellier, Sandie Toletti s’est blessée à la cheville droite.<br\/> <br\/>Les staffs médicaux du HSC Montpellier et de l’Equipe de France féminine ont constaté son indisponibilité pour une longue durée. D’un commun accord, ils ont laissé la milieu de terrain à la disposition de son club.<br\/>Retenue parmi les sept réservistes pour la prochaine Coupe du Monde féminine (6 juin - 5 juillet au Canada), elle est remplacée par Marina Makanza (HSC Montpellier).<br\/> <br\/>À l’exception des joueuses du Paris SG, qui disputeront jeudi la finale de la Ligue des Champions, les Tricolores entameront demain (lundi) au Centre National du Football (CNF) à Clairefontaine (Yvelines) leur préparation pour la Coupe du Monde de la FIFA.
Touchée à la cheville droite la semaine passée, la milieu de terrain Sandie Toletti (Montpellier) ne sera pas opérationnelle pour la Coupe du Monde au Canada (6 juin au 5 juillet). C'est sa coéquipière au MHSC Marina Makanza qui la remplace.<br\/><br\/>Communiqué de la FFF\ <br\/>Dimanche 3 mai dernier, lors du match de D1 féminine entre Juvisy et Montpellier, Sandie Toletti s’est blessée à la cheville droite.<br\/> <br\/>Les staffs médicaux du HSC Montpellier et de l’Equipe de France féminine ont constaté son indisponibilité pour une longue durée. D’un commun accord, ils ont laissé la milieu de terrain à la disposition de son club.<br\/>Retenue parmi les sept réservistes pour la prochaine Coupe du Monde féminine (6 juin - 5 juillet au Canada), elle est remplacée par Marina Makanza (HSC Montpellier).<br\/> <br\/>À l’exception des joueuses du Paris SG, qui disputeront jeudi la finale de la Ligue des Champions, les Tricolores entameront demain (lundi) au Centre National du Football (CNF) à Clairefontaine (Yvelines) leur préparation pour la Coupe du Monde de la FIFA.</h5></div>
</div>
<div data-role="page" id="p2">
<img style="width:800px; height:200px" src="http://www.paris-saint-germain.com/wp-content/uploads/2012/08/jalletcapitaine-480x280.jpg" class="img-responsive" > <br><h4 align="left" style="color:#E49B0F; padding-left:10px;"> 2222222222 </h4> <div> <h5 style="padding-left:10px; padding-right:10px;"> Touchée à la cheville droite la semaine passée, la milieu de terrain Sandie Toletti (Montpellier) ne sera pas opérationnelle pour la Coupe du Monde au Canada (6 juin au 5 juillet). C'est sa coéquipière au MHSC Marina Makanza qui la remplace.<br\/><br\/>Communiqué de la FFF\ <br\/>Dimanche 3 mai dernier, lors du match de D1 féminine entre Juvisy et Montpellier, Sandie Toletti s’est blessée à la cheville droite.<br\/> <br\/>Les staffs médicaux du HSC Montpellier et de l’Equipe de France féminine ont constaté son indisponibilité pour une longue durée.res entameront demain (lundi) au Centre National du Football (CNF) à Clairefontaine (Yvelines) leur préparation pour la Coupe du Monde de la FIFA.
Touchée à la cheville droite la semaine passée, la milieu de terrain Sandie Toletti (Montpellier) ne sera pas opérationnelle pour la Coupe du Monde au Canada (6 juin au 5 juillet). C'est sa coéquipière au MHSC Marina Makanza qui la remplace.<br\/><br\/>Communiqué de la FFF\ <br\/>Dimanche 3 mai dernier, lors du match de D1 féminine entre Juvisy et Montpellier, Sandie Toletti s’est blessée à la cheville droite.<br\/> <br\/>Les staffs médicaux du HSC Montpellier et de l’Equipe de France féminine ont constaté son indisponibilité pour une longue durée. D’un commun accord, ils ont laissé la milieu de terrain à la disposition de son club.<br\/>Retenue parmi les sept réservistes pour la prochaine Coupe du Monde féminine (6 juin - 5 juillet au Canada), elle est remplacée par Marina Makanza (HSC Montpellier).<br\/> <br\/>À l’exception des joueuses du Paris SG, qui disputeront jeudi la finale de la Ligue des Champions, les Tricolores entameront demain (lundi) au Centre National du Football (CNF) à Clairefontaine (Yvelines) leur préparation pour la Coupe du Monde de la FIFA.</h5>
</div>
</div>
<div data-role="page" id="p3">
<img style="width:800px; height:200px" src="http://img.modernghana.com/images/content/y17gx33wvr_191408935_15493.jpg" class="img-responsive" > <br><h4 align="left" style="color:#E49B0F; padding-left:10px;"> 3333333333 </h4> <div> <h5 style="padding-left:10px; padding-right:10px;"> Dimitri Payet affichait un grand soulagement après la victoire de son équipe à l'arraché face à Monaco. Le meneur de jeu de l'OM a avoué qu'à un moment de la rencontre, il se demandait même comment Marseille pourrait ne serait-ce que prendre un point.<br\/><br\/>« Honnêtement, à un moment, on a senti que ça allait être très compliqué, même d’égaliser, avouait le meneur de jeu de l’OM Dimitri Payet sur Canal Plus après la victoire renversante de son équipe face à Monaco dimanche soir (2-1, 36eme journée de L1). Mais contrairement à d’autres matchs où on dominait et où on se faisait contrer à la fin, là, on n’a peut-être pas été beaux à voir jouer mais on a su être efficaces. On ne va pas faire la fine bouche, on va savourer, parce que si on n’avait pas gagné ce soir, on pouvait dire adieu au podium. Eux (les supporters), on n’a rien à leur reprocher. On dit que c’est un public difficile, mais, cette année, malgré beaucoup de faux-pas de notre part, ils ont toujours été là. Ce soir encore, c’était plein. Et quand ça pousse comme ça, ça donne de l’énergie. »\ <br\/>« On dépend encore de Monaco »\ <br\/>« Les changements ? C’est le coach, c’est lui qui décide, nous on essaye de s’adapter au mieux, poursuivait l’ancien Stéphanois. Il y a eu beaucoup de critiques sur ça. Ce soir, ça marche et ça paye. On va savourer car c’est une victoire très importante. Malheureusement, on n’a pas encore notre destin entre les mains, on dépend encore de Monaco. On revient à la hauteur de Saint-Etienne, les derniers matchs vont être très importants, ça va être chaud.</h5> </div>
</div>

Javascript onclick var

I have this script:
. '<button type="button" '.($searchQuery['can_used'] == 1 ? 'onclick="var con=confirm(\'Let op: dit is de laatste keer dat u dit bestand kan downloaden, na deze keer word het bestand automatisch verwijderd. Weet u zeker dat u deze bestand wil download?\')"' : '').' class="btn btn-info">Download het bestand...</button>'
. '<script type="text/javascript">alert(con)</script>';
Well, this is not working, I get an error what says 'con is not defined'. Because the var will not exist when I not click on the button. And I cannot click on the button because javascript will not continue on an error. How can I fix this? Is there other way to to this?
Thanks!

Thanks to David Thomas.
Fixed by creating the var before the confirm.
Uw bestand is gevonden! <br />U kunt dit bestand nog <b><u>1</b></u> keer downloaden via deze website. U kunt dit bestand tot en met <b><u>19-01-2038 04:14:07</b></u> downloaden. <br />Bestand naam: <b><u>download.rar</b></u> <br />Bestand grootte: <b><u>87.82 mb</b></u> <br /><br /><script>var con = false;</script><button type="button" onclick="con=confirm('Let op: dit is de laatste keer dat u dit bestand kan downloaden, na deze keer word het bestand automatisch verwijderd. Weet u zeker dat u dit bestand wilt downloaden?'), alert(con)" class="btn btn-info">Download het bestand...</button>
Thank you David.