Printing out an array using bulma - javascript

I´am having trouble printing out an array when I use Bulma. The array consist of 6 elements. I want to print them out horizontally in there own column, but the are all getting printed out vertically in the same column. I´am pretty new to this, and can´t figure out any soultions. Do I need to change the html code or the js code? Anyone got any ideas? Thanks!
HTML:
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div class="column is-2">
<p id="profiler"></p>
</div>
</div>
</div>
</section>
JS:
for (var i = 0; i < employeeArray.length; i++ ) {
profilerDiv.innerHTML += `
<h1 class="is-size-5 title has-text-black">${employeeArray[i].name}</h1>
<h3 class="has-text-black">${employeeArray[i].role}</h3>
<h3><img src="Bilder/Ansatte/${employeeArray[i].pic}" style="max-height: 300px;" ></h3>
<p>${employeeArray[i].birtday}</p>
<br>
<br>
`
console.log(employeeArray[i]);
}

Have you tried to move the markup for the HTML column inside your for loop like:
HTML
<section class="section">
<div class="container">
<div class="columns is-multiline">
<p id="profiler"></p>
</div>
</div>
</section>
JS
for (var i = 0; i < employeeArray.length; i++ ) {
profilerDiv.innerHTML += `
<div class="column is-2">
<h1 class="is-size-5 title has-text-black">${employeeArray[i].name}</h1>
<h3 class="has-text-black">${employeeArray[i].role}</h3>
<h3><img src="Bilder/Ansatte/${employeeArray[i].pic}" style="max-height: 300px;" ></h3>
<p>${employeeArray[i].birtday}</p>
<br>
<br>
</div>
`
console.log(employeeArray[i]);
}

Related

Loop through two arrays - check if they belong to a div - append html to div

Hopefully I explain this well, here goes...
So the below HTML displays a basic version of my HTML - essentially I need to append the H4 inside client content to the hover-item when hovered over (The hover item currently displays but is blank with no text inside).
So I use document.QuerySelectorAll to generate a Node list and then convert to an Array, loop over the client array.
Inside I use two for loops to loop over the client content array and hover item array and check if they are contained within the client div...
If they are, I then want to append the h4 to the hover item. Each h4 will be unique as they will be people's names so it needs to append the correct one.
Here's the example code & image of the result on the project itself: results image
const hoverItem = document.querySelectorAll(".hover-item")
const hoverItemArray = Array.from(hoverItem);
const clients = document.querySelectorAll(".client");
const clientsArray = Array.from(clients);
const clientContent = document.querySelectorAll(".client-content");
const clientContentArray = Array.from(clientContent);
clientsArray.forEach(item => {
for (i = 0; i <= clientContentArray.length; i++) {
for (e = 0; e <= hoverItemArray.length; e++) {
if (item.contains(clientContentArray[i] && hoverItemArray[e])) {
hoverItem[e].append(clientContentArray[i].innerHTML);
}
}
}
})
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
First: You aren't listening for the "hover"-event (in JS mouseover) and need eventlisteners for that.
If you want to append the heading from the same div like the .hover-item you don't need arrays. You just need to select the previous element and its h4 then remove it and append it to the heading. Furthermore you can loop over the collection hoverItem directly without converting it to an array.
const hoverItem = document.querySelectorAll(".hover-item");
for (i = 0; i < hoverItem.length; i++) {
hoverItem[i].addEventListener('mouseover', function() {
const client_name = this.previousElementSibling.querySelector('h4');
if (client_name) {
client_name.remove();
this.append(client_name);
}
});
}
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name 1</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name 2</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name 3</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
If I understand you correctly you basically want to move the h4 element from the .client-content to .hover-item when both elements are within a .client element. So in you example html it would be only for the first .client element.
You can do that with the code below. I added some commentary to the code to explain and added some css with colors to visualize what is happening.
//Loop over all client divs.
document.querySelectorAll('.client').forEach((clientDiv) => {
//Check if the div contains both .client-content and .hover-item elements.
if(clientDiv.querySelector('.client-content') && clientDiv.querySelector('.hover-item')) {
//Append the h4 to to hover item.
clientDiv.querySelector('.hover-item').append(clientDiv.querySelector('.client-content h4'));
}
});
div {
display: inline-block;
}
.hover-item {
background-color: blue;
}
.client-content {
background-color: red;
}
h4 {
margin: 10px;
background-color: yellow;
}
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>

How can I use JavaScript between different html components?

The components are these.
My function in JavaScript is this:
function render(){
for (let index=1; index <=6; index++){
nintendoDIV.innerHTML+=`${HTMLnintendoProduct(index)}`;
pcDIV.innerHTML+=`${HTMLpcProduct(index)}`;
playDIV.innerHTML+=`${HTMLplayProduct(index)}`;
xboxDIV.innerHTML+=`${HTMLxboxProduct(index)}`;
}
In the index, I have placed it in the body to call it.
**<body onload="render()">**
<app-root></app-root>
<script src="assets/js/prod.js"></script>
</body>
In my home.component.html I have the following
<div class="container marketin">
<br>
<h2 id="nintendo">Nintendo</h2>
<hr>
<div class="row" id="nintendoDIV"></div>
<h2 id="pc">PC</h2>
<hr>
<div class="row" id="pcDIV"></div>
<h2 id="play">PlayStation</h2>
<hr>
<div class="row" id="playDIV"></div>
<h2 id="xbox">Xbox</h2>
<hr>
<div class="row" id="xboxDIV"></div>
<p class="float-right container">
<a class="text-success" href="#">ARRIBA</a>
</p>
<hr class="featurette-divider">
</div>
The products of that function should appear

Javascript faceted search

I have this page I'm working on, I'm trying to make a facted search for it. (only issue is I have no json as I'm looping through via django.)
What I currently have is this:
var wood = []
$(".checkbar").click(function() {
id = this.id
$('.spe_' + id).toggleClass("filteredlabel");
$('.flr').addClass("hide");
$('.flr_spe_' + id).removeClass("flr hide").addClass("flrcheck");
if (this.classList[1] == 'checked') {
if (wood.length > 0) {
debugger;
$('.flr_spe_' + this.id).removeClass("hide").addClass("flr");
for (var i = 0; i < wood.length; i++)
if (wood[i] === this.id) {
if (wood.length > 1) {
$('.flr_spe_' + this.id).addClass("hide");
}
if (wood.length == 1) {
$('.flr').removeClass("hide");
}
wood.splice(i, 1);
break;
}
}
$(this).toggleClass("checked");
} else {
$(this).toggleClass("checked");
wood.push(this.id)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbar" id="1">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Oak (1)
</div>
</div>
<div class="checkbar" id="2">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Pine (1)
</div>
</div>
<div class="col-md-4 flr flr_spe_1 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/st_tobacco2x.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Oak</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flr flr_spe_2 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/straightwood_CfuTJb4.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Pine</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
The problem is when I have to start adding more checkboxes to filter on. If i add another set of checkboxes for range, how would I go about making this so that they filter correctly together?
e.g. if I check Old Wood, And then Check Pine, How can I get just the results that have "Old Wood" and "Pine" and not return Oak?
Many Thanks

Adding rows to a jquery grid with javascript

So basically, i'm actually doing a web app with html/css/javascript and im pretty much a beginner in it (i'm a c++/c# guy). I have seen many kind of solution already, but they always use stuff not related with actual ui-grid. So far, I made my headers (which won't change) and now i'm looking for a way to add rows in the grid. So, here is my headers :
<div class="ui-grid-a" id="currentgrid" style="height: 38px">
<div class="ui-block-a">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info1</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info2</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info3</div>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e">Info4</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e">Info5</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e">Info6</div>
</div>
</div>
</div>
</div>
And here is how i will call the js function to add the rows i will need
Search
For exemple, if i can choose the number of rows added by changing only the value of a number in a loop, that could be awesome.
Help me =(
You can loop and append HTML-elements in this way:
for(var i = 1; i <= 10; i++) {
$('#currentgrid').append('<div class="ui-bar ui-bar-e">Info'+i+'</div>');
}

How to sort sections without class/div using jQuery?

What I want to achieve using jQuery probably is to rearrange the positions of the following sections on page load, in 2 ways. The first is to sort it by data-order value ascending, and the other through an array where it will be in this sorting 3-1-2
How can this be achieved?
<section class="aboutus" data-order="1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
<section class="questions" data-order="3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
<section class="contact" data-order="2">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here</p>
</div>
</div>
</div>
</section>
I found this code that uses an array for this, however it requires specific classes, but I want it to be as universal as possible, no classes or ids.
var myArray = ['2', '3', '1'];
var elArray = [];
$('.imgs').each(function() {
elArray[$(this).data('image-id')] = $(this);
});
$.each(myArray,function(index,value){
$('#container').append(elArray[value]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='container'>
<div class="imgs" data-image-id='1'>1</div>
<div class="imgs" data-image-id='2'>2</div>
<div class="imgs" data-image-id='3'>3</div>
</div>
Try
// elements
var elems = $("[data-order]");
// ordering map
var elArray = ["3", "1", "2"];
// replace `elems` `outerHTML`
$.map(elArray, function(order, i) {
var el = elems.filter(function() {
// ie < 11 does not appear to support `dataset`
// jQuery `.data()` appear to cast `String` "3" to `Number` `3`
// utilize equality operator `==` to convert operands
return $(this).data("order") == order
});
elems.eq(i)[0].outerHTML = el[0].outerHTML
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="aboutus" data-order="1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 1</p>
</div>
</div>
</div>
</section>
<section class="questions" data-order="3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 3</p>
</div>
</div>
</div>
</section>
<section class="contact" data-order="2">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>content here 2</p>
</div>
</div>
</div>
</section>
jsfiddle http://jsfiddle.net/saf77L4w/4/
You can obtain the element just using their data-sort attribute (although this will place all items on the page in the same sorted list, so you would have to restrict this if you wanted to use it multiple times on a page).
var elArray = [];
$('[data-order]').each(function() {
elArray[$(this).data('order')] = this;
});
for(var i = 0; i < elArray.length; i++) {
if (typeof elArray[i] === 'undefined') continue;
$('#result').append(elArray[i]);
}
I have added an element with the id "result" to place the sorted items in - but you can do this differently if you wish.
See it running on JSFiddle.

Categories