We Keep Coding

Adding join() to a map() function

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('')`

How parse fetch text from html tags in nodejs?

I have a html as text in nodejs as follow:
var htmlText = `<div class="X7NTVe">
<a class="tHmfQe" href="/link1">
<div class="am3QBf">
<div>
<span>
<div class="BNeawe deIvCb AP7Wnd">
<span dir="rtl">My First Text</span>
</div>
</span>
</div>
</div>
</a>
<div class="HBTM6d XS7yGd">
<a href="/anotherLink1">
<div class="BNeawe mAdjQc uEec3 AP7Wnd">></div>
</a>
</div>
</div>
<div class="x54gtf"></div>
<div class="X7NTVe">
<a class="tHmfQe" href="/link2">
<div class="am3QBf">
<div>
<span>
<div class="BNeawe deIvCb AP7Wnd">
<span dir="rtl">My Second Text</span>
</div>
</span>
</div>
</div>
</a>
<div class="HBTM6d XS7yGd">
<a href="/anotherLink2">
<div class="BNeawe mAdjQc uEec3 AP7Wnd">></div>
</a>
</div>
</div>
<div class="x54gtf"></div>`
Now I Want to fetch text form it as array. In abow example it must return My First Text and My Second Text . How can I do it?
Note: I want to do it in nodejs note in javascript.

With cheerio:
let $ = cheerio.load(html)
let strings = $('div[class="BNeawe deIvCb AP7Wnd"]>span[dir]')
.get().map(span => $(span).text())

method#1
replace all tags with regex /<[^>]*>/g.
method#2
parse html with jsdom, and access html node via js document api.
method#2 is much more flexible.

Get all href values from a string which is filled with HTML code from a textarea

Solved :)
var test = $('textarea[name=extract]').val();
var hh = $.parseHTML(test) ;
$.each($(test).find('.tile__link'),function(i,b){
var reff = $(this).attr('href');
$('.links').append("link/" +reff + "<br><br>");
})
I have HTML code copied from an website. And I want all href values with the class .tile_link in a String.
I did not find an solution, how I can get the value of href with the class .tile_link without the divs and text just the link?
Here's an example:
var test = $('textarea[name=extract]').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="extract">
<span class="txt-raise">8min</span>
</div></div>
<div class="js-hunq-badge fit-tr pr-- pt--"></div>
<div class="tile__footprint">
</div>
</a>
</div><div class="tile grid-tile tile--bordered"> <a href="#/profile//grid" class="tile__link">
<div role="image" aria-label="HSHBerl" style="background-image:url()" class="tile__image"></div>
<div class="bg-raise tile__info">
<div class="info info--middle txt-raise">
<div class="txt-truncate layout-item--consume">
<div class="typo-small lh-heading txt-truncate">
8 km <span class="icon icon-small icon-gps-needle icon-badge"></span>
</div>
<div class="lh-heading txt-truncate">
<div class="info__main-data">
<div class="info__username">
</div>
<div class="js-romeo-badge"></div>
<div class="info__icon-set">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__onlinestate js-online-state"><div>
<span class="icon icon-online-status ui-status--online icon-raise" title="Online"></span>
</textarea>
But I don't know how to extract it to get only the values of href.

You can do someting like this:
$(".tile_link").attr('href');
If you have more than one element with that class, you can do forEach or map.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Example:
$('.tile_link').map(function (element) { return $(this).attr('href'); });

What is the proper way of using ng-repeat to set attributes on an element?

So I have the following div:
<div ng-repeat="player in playersScores" class="sb_lane">
<div class='sb_animation drop'></div>
<div lane="{{player.lane}}" class='dropbox' dropbucket>
<div class='sb_lHeader'>
<div class="drop">Lane {{player.lane}}</div>
<div class="drop">{{player.player}}</div>
</div>
<div class="sb_rScore drop">Run : {{cRun}} of {{tRun}}
<div>Run Score</div>
<div >{{player.rScore}}</div>
</div>
<div class="sb_tScore drop">Game Score
<div > {{player.gScore}}</div>
</div>
</div>
</div>
I am getting an error from using {{player.lane}} in the this line:
<div lane="{{player.lane}}" class='dropbox' dropbucket>
My question is this: What is the proper way of using ng-repeat to set attributes on an element?

Simply use
<div lane="player.lane" class='dropbox' dropbucket>

Turns out I had a two way binding in the drag and drop directive that was set to lane. Once I removed that binding, everything worked as expected.
Thanks for the insight everyone..
Z

angularjs how to set text inside element based on textbox input

My code is:
<div ng-controller="myCtrl">
<div class="row">
<div class="col-md-4 col-sm-3">
<checked-input ng-scope="$eventID"></checked-input>
</div>
<div class="col-md-4 col-sm-3">
<output ng-scope="$postbackOutput">***This is where I want the text typed in the textbox to go***</output>
</div>
<div class="col-md-3 col-sm-3">
<a ng-click="generateURL($eventID)" class="btn-plus">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
</div>
So what I'm trying to do is get that $eventID that's inside the first column div, then pass it as an argument to the function call generateURL() when the link in the <a> tag is clicked in the third column. Inside the controller I have:
app.controller('postbackCtrl', function($scope) {
$scope.generateURL = function(eventID) {
$scope.postbackOutput = eventID;
}
});
But it doesn't seem to be setting the text in the <output> correctly. Could anyone help? I've just started out with angular so it's a bit confusing.

You can just bind the var to the view with handlebar brackets:
<output ng-scope="$postbackOutput">
{{ postbackOutput }}
</output>
Here is a working plunkr