Adding join() to a map() function - javascript

I'm mapping over an array to display data in the browser using template literals.
With each rendered object, a comma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.
Here is the code:
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
});
document.getElementById("synopsis").innerHTML = synopsisRender;

After mapping, but before assigning to innerHTML.
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
}).join(''); //Here...
document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`

Related

Jquery: foreach through html block elements

I have html blocks and there would be many this kind of html block with different html values and image sources.
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Alexander</strong></div>
<div class="infoblock__date">21 August 2022</div>
<div class="infoblock__text">Comportable table</div>
</div>
<img src="girl1.jpg" class="reviews__photo">
</div>
I want to extract all html values as array and I will console.log all values, sources with Jquery.
img_array =$(this).closest('.customers__content').find('.infoblock__user-name, .infoblock__date, .infoblock__text, img').map(function() {return
let name = $(".infoblock__user-name").html();
let date = $(".infoblock__date").html();
let text = $(".infoblock__text").html();
$("img").attr("src")
}).get();
img_array.forEach(function(name, date, text, src) {
console.log(name, date, text, src);
//$(".listblock").append(<img class="listblock__photo" src="${src}">);
});
I want to get all class values as i got for source of image (for (infoblock__user-name, infoblock__date, infoblock__text, )) using one foreACH. PLEASE HOW CAN i do that?
Your syntax to implement map() isn't correct. You need to return an object, and the properties of that object need to be key/value pairs.
You also need to retrieve the values from the DOM relative to the current .customers__photo element in the DOM, not by selecting all instances of that class.
Try this:
const data = $('.customers__photo').map((i, el) => ({
name: $(el).find('.infoblock__user-name').text(),
date: $(el).find('.infoblock__date').text(),
text: $(el).find('.infoblock__text').text(),
src: $(el).find('.reviews__photo').prop('src'),
})).get();
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Alexander</strong></div>
<div class="infoblock__date">21 August 2022</div>
<div class="infoblock__text">Comportable table</div>
</div>
<img src="girl1.jpg" class="reviews__photo">
</div>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>John</strong></div>
<div class="infoblock__date">22 August 2022</div>
<div class="infoblock__text">Expandable table</div>
</div>
<img src="girl2.jpg" class="reviews__photo">
</div>
<div class="customers__photo" data-id="a1">
<div class="infoblock infoblock-hidden">
<div class="infoblock__user-name"><strong>Edward</strong></div>
<div class="infoblock__date">23 August 2022</div>
<div class="infoblock__text">Collapsable table</div>
</div>
<img src="girl3.jpg" class="reviews__photo">
</div>

TypeError: Cannot read properties of null (reading 'addEventListener') javascript

I am trying to add a button but it is showing me this error.
here is my html code
<div card-container>
<template class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</template>
</div>
here is the javascript code
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}
You're using the <template> tag, which is an element that holds html markup but it's not rendered on page load.
In order to render its contents, one has to handle the <template> element via javascript, using the html structure as - in fact - a template for filling another structure (a table, a divs grid, etc.).
Since the sub-elements of <template> are not part of the DOM yet, let showDitail = document.querySelector(".btn"); will result in null. That's why you cannot bind events to it.
Either change the tag to something else (a div maybe), or handle the template properly via javascript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}
<div card-container>
<div class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</div>
</div>

How to remove the first character of an link in Javascript

The goal I'm after is trimming the first character from each of the link's text.
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
I've tried simply substring and slice:
$('.item div a').substring(1);
$('.item div a').slice(1);
But after some fiddling, I've yet to get it to work. Then I attempted to use .text(), but it instead collects all the outputs from each link and replaces them, not individually. Which makes it so the end result is all the link text are the same.
var input = $('.item div a').text();
var output = input.substring(1);
$('.item div a').text(output);
Is there an alternative to using .substring() and .slice() to get this to work? (Also, I'm unable to alter the original HTML for this scenario)
Is this what you need?
[...document.querySelectorAll('.item div a')].forEach(a=>
a.innerHTML=a.innerHTML.substring(1))
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
And jquery version:
$('.item div a').each(function(){
$(this).text($(this).text().substring(1));
});
var links = document.getElementsByTagName('a');
for(let i = 0;i<links.length;i++){
var string = links[i].innerHTML;
string=string.substring(1);
console.log(string);
}
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
Something like this?
$(function() {
$("a").each((idx,el) => el.innerHTML = el.innerHTML.substring(1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>
Use text(function) to iterate each instance.
The problem you had is jQuery slice() is for filtering the $(selector) collection and there is no jQuery substring() method
$('.item a').text((i, curr) => curr.slice(1))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<div>
1One
</div>
</div>
<div class="item">
<div>
2Two
</div>
</div>

.replace in not working in js

I have data as
var data = '<template type="amp-mustache">
<div class="comment-item pull-left bottommargin10">
<div>
<span class="comment-user-logo pull-left">{{title}}</span>
<div class="pull-left margin-left-7">
<span class="comment-name">{{user.displayName}}</span>
<div class="comment-date">{{newDate}}</div>
<div class="comment-msg">{{message}}</div>
</div>
</div>
</div>
</template>';
When I try to replace it
var newData = data.replace('<template type="amp-mustache">','');
It throws the following error
data.replace is not a funtion
Can anyone please help me. Thanks.
You need to use backticks for multiline strings. See Template literals.
var data = `<template type="amp-mustache">
<div class="comment-item pull-left bottommargin10">
<div>
<span class="comment-user-logo pull-left">{{title}}</span>
<div class="pull-left margin-left-7">
<span class="comment-name">{{user.displayName}}</span>
<div class="comment-date">{{newDate}}</div>
<div class="comment-msg">{{message}}</div>
</div>
</div>
</div>
</template>`;
console.log(data.replace('<template type="amp-mustache">',''));
You need to use .toString() to cast data to string. Once .toString() applied you can call replace() method.
Check this fiddle i created for easier understanding: http://jsfiddle.net/6sxf5d29

JQUERY append data before sibling

I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");

Categories