We Keep Coding

Display an array with string list vertically knockoutjs

I got self.PatrolList = ko.observableArray() which contains:
//value
0: {DateAdd: 'Tuesday, 01 November 2022', sessionList: Array(2)}
1: {DateAdd: 'Wednesday, 02 November 2022', sessionList: Array(4)}
//sessionList value
Array(2)
0: "Patrol_011122168"
1: "Patrol_011122256"
Now, I want to display them. The problem is sessionList value displaying in a string:
View:
<div class="overflow-auto body-overflow" data-bind="foreach:PatrolList">
<div class="timeline-date" data-bind="text: DateAdd"><i class="fa fa-calendar text-success"></i></div>
<ul>
<li class="timeline-content" data-bind="text: sessionList"></li>
</ul>
</div>
How do I split them by (,) and display vertically. What I want to achieve :
Tuesday, 01 November 2022
-Patrol_011122168
-Patrol_011122256

If you use another loop on ul, you can use $data to get the current value.
class ViewModel {
sessionList = [
"Patrol_011122168",
"Patrol_011122256",
]
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: sessionList">
<li class="timeline-content" data-bind="text: $data"></li>
</ul>

Found the answer.
I just have to tweak my view a little bit:
<div class="overflow-auto body-overflow" data-bind="foreach:PatrolList">
<div class="timeline-date" data-bind="text: DateAdd"><i class="fa fa-calendar text-success"></i> 28 Dec</div>
<ul data-bind="foreach: $data.sessionList">
<li class="timeline-content" data-bind="text: $data"></li>
</ul>
</div>
Funnily, I got the solution seconds after posting this questions.

How to render a list using JavaScript

Need help.
I have a json file locally and I want to render a list. So that in the future I can add data to the json file and it will automatically appear on the page.
[
{
country: "England",
cities: [
{
wikiLink: "https://en.wikipedia.org/wiki/London",
citiesName: "London",
citiesDescription: "is the capital and largest city of England and the United Kingdom, with a population of just under 9 million",
},
{
wikiLink: "https://en.wikipedia.org/wiki/Liverpool",
citiesName: "Liverpool",
citiesDescription: "Is a city and metropolitan borough in Merseyside",
},
]
},
{
country: "Island",
cities: [
{
wikiLink: "https://en.wikipedia.org/wiki/Reykjav%C3%ADk",
citiesName: "Reykjavík",
citiesDescription: "It is located in southwestern Iceland, on the southern shore of Faxaflói bay.",
},
]
},
]`
I want to get the following code after rendering
<div class="content">
<div class="section">
<h2 class="title">England</h2>
<ul class="list">
<li class="list__item">
<a class="list__link" href="https://en.wikipedia.org/wiki/London" target="_blank">
<span class="gradient__text">London</span>
- is the capital and largest city of England and the United Kingdom, with a population of just under 9 million
</a>
</li>
<li class="list__item">
<a class="list__link" href="https://en.wikipedia.org/wiki/Liverpool" target="_blank">
<span class="gradient__text">Liverpool</span>
- Is a city and metropolitan borough in Merseyside
</a>
</li>
</ul>
</div>
<div class="section">
<h2 class="title">Island</h2>
<ul class="list">
<li class="list__item">
<a class="list__link" href="https://en.wikipedia.org/wiki/Reykjavik" target="_blank">
<span class="gradient__text">Reykjavík</span>
- It is located in southwestern Iceland, on the southern shore of Faxaflói bay.
</a>
</li>
</ul>
</div>
</div>`
This is roughly what I want to get
I can't figure out how to get to the values of cities. Right now my code looks like this:
import { englandData } from "./englandData.js";
import { islandData } from "./islandData.js";
function blockTemplate(block) {
return`
<div class="list__block-item">
<h2 class="list__desc">
${block.country}
</h2>
<ul class="list">
<li class="list__item">
<a class="list__link" href="${block.cities.wikiLink}" target="_blank">
<span class="gradient__text">${block.cities.citiesName}</span> - ${block.cities.citiesDescription}.
</a>
</li>
</ul>
</div>
`
}
document.getElementById("en").innerHTML = `
${englandData.map(blockTemplate).join("")}
`;
document.getElementById("is").innerHTML = `
${islandData.map(blockTemplate).join("")}
`;

You can use AJAX to fetch data from your JSON file and post it in your HTML Code, Ajax it's will give you the possibility to post, delete, update and get the data from your JSON file.

The problem is, you can only use HTML and Javascript to render an existing file: you can't use them to change the file ... or at least not directly. Instead, you have use AJAX (AKA fetch) to send a request to a server, and then that server can change it.
You will need to learn a lot to be able to build such a server yourself, but luckily there is already an NPM package that does what you want. It starts a server, and then your front-end (ie. your HTML/JS) can use fetch to tell it about changes to your data, and it will save those changes in a JSON file on your computer.
Check out: https://www.npmjs.com/package/json-server

How to select elements based on conditions in cypress/javascript

I have a table below that displays different odds:
What happens is that the user will select an odds button to add their selection to a bet slip. However, what I need to do is select the correct button. What I mean by that is that it needs to select the first avilable odds button, not to select an odds button that is disabled or already selected.
So the my logic is this:
Look in the odds table you see in the image and in the table row, check within to see if the button is not disabled and not selected.
If the above is true, then take the name of the selection and store it as an alias and then click on that odds button.
Currently this is my code but I don't think it's 100% correct, it is selecting an odds button but not sure if it will do the check if the button is disabled or selected in the row. At the moment it is selecting the first odds button but that's because none of the buttons are currently selected or disabled (and it's a live site so no way to manipulate the site to fit the scenario).
Here is the HTML that matches the image above:
<div class="featuredOutright__content featuredOutright__content--primary">
<ul class="featuredOutright__markets">
<li id="betBundle__4192262052__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192262052__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192262052__marketTitle">
Club Brugge KV to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213522" id="betBundle__4192262052__eventLink">
Club Brugge KV - KV Oostende
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192262052__previousPrice">
5/6
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192262052" eventid="event-selection-20213522" title="Club Brugge KV to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/11</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4192270554__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192270554__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192270554__marketTitle">
US Lecce to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213510" id="betBundle__4192270554__eventLink">
Benevento - Lecce
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192270554__previousPrice">
3/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/3</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4196565633__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4196565633__sportIcon">
<i class="icon-tennis"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4196565633__marketTitle">
A Zverev and F Auger Aliassime to win the first set of the match
<a class="marketsList__market__matchName textLink" href="#/tennis/outrights/20405610" id="betBundle__4196565633__eventLink">
Odds Boost - Tennis
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4196565633__previousPrice">
7/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4196565633" eventid="event-selection-20405610" title="A Zverev and F Auger Aliassime to win the first set of the match" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">9/1</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
</ul>
</div>
Here is my step definition and elements class:
import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
import OddsSelectionElements from '../elements/oddsSelectionElements';
const oddsSelectionElements = new OddsSelectionElements();
When ("User selects an available bet bundle selection", () => {
oddsSelectionElements.featuredSelectionRow()
.within(() => {
oddsSelectionElements.oddsButton().first().not(".disabled");
oddsSelectionElements.oddsButton().first().not(".selected");
oddsSelectionElements.marketListTitle().first().invoke("text").as("betBundleTitle");
oddsSelectionElements.oddsButton().first().click();
})
})
OddsSelectionElements:
class OddsSelectionElements {
oddsButton() {
return cy.get('.button__bet__odds')
}
featuredSelectionRow() {
return cy.get('.featuredOutright__selection')
}
marketListTitle() {
return cy.get('.marketsList__market__title')
}
}
export default OddsSelectionElements
Example of button selected: it adds selected in class for the <a> tag
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link selected" "="">
disabled is same concept as above but instead of selected will add disabled

Assuming not(".disabled") and .not(".selected") works above, you can write something like this:
cy.get(".button__bet__odds").each(($ele, index) => {
if ($ele.not(":disabled") && $ele.not(":selected")) {
cy.get("marketsList__market__title").eq(index).invoke("text").as("someText")
cy.wrap($ele).click()
return false
}
})
//Access someText
cy.get("#someText").then((someText) => {
cy.log(someText) //Access someText here
})

Show/hide list items based on search value

I have the following list which is brought through AJAX, each 'li' haves a default 'display: none' value (the list haves 800 'li' so here I cut it to show only 3):
Basically I need that when somebody types a value in a search field to go through that whole list comparing that value with the 'h3 > a' text inside each list, so lets say somebody type "Florida" if it's inside an 'h3 > a' show it, the rest keep it hidden.
Also when somebody change the search value for example to "California" it should go again through all the list, hiding the actual ones (in this case "Florida") and showing the ones that haves "California" text in their h3 > a.
Thank you!
<form method="post" action="/employers/">
<fieldset>
<legend>Employer search</legend>
<div class="field">
<label for="searchtext" class="hidden">Search employers</label>
<div class="clear-input js-clear-input">
<input id="searchtext" type="text" name="RecruiterName" value="Florida" placeholder="Start typing…" class="clear-input__input js-recruiter-lookup js-clear-input-input" autocomplete="off">
<i data-icon="x" class="clear-input__trigger icon-before js-clear-input-trigger" style="display: inline;"></i>
</div>
</div>
<div class="field">
<select name="RecruiterTypeId" class="js-recruiter-type">
<option value="">All</option>
<option value="-10">Employer</option>
<option value="-20">Search Firm</option>
<option value="513012">Advertising Agency</option>
</select>
</div>
<input type="hidden" name="RecruiterId" value="" class="js-recruiter-id">
<input type="submit" value="Search" id="search" class="button button--brand">
</fieldset>
</form>
Actual code which is not working (it shows me the whole list):
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input #search
var searchInputValue = $('#search').val();
// Search the list and if it matches display it, else hide it
$('.lister__item').each(function() {
var isMatch = $('.lister__item > h3 > a:contains(' + searchInputValue + ')');
$(this).parent().parent().toggle(isMatch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="search" id="search" />
</div>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>
Actual working code:
// Disable form since we need first the list loaded for being used
$('form').css('display', 'none');
// Get the total amount of pages
var totalPagesCount = $('.paginator__item:last-child a').attr('href').split('/')[2];
// Create a div container for adding future employers list and not being deleted later when the onclick occurs
$('<div />').addClass('employers-list').appendTo('#listing');
// Get every employer from the all the pages
for(var i=0; i<totalPagesCount; i++) {
$.ajax({
url: 'https://careers.insidehighered.com/employers/' + (i+1),
type: 'get',
cache: false,
dataType: "html",
success: function(results) {
// Get all the elements and hide them
var page = $(results).find('.lister__item').hide().detach();
// Add them to the empty 'ul'
$('.employers-list').append(page);
},
complete: function() {
// Everything is loaded so show form again
$('form').css('display', 'inline-block');
}
});
}
$.expr[":"].contains_ci = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Empty initial list
$('#listing').children('li').remove();
// Remove the paginator
$('.paginator').remove();
// Get value from search input
var searchInputValue = $('#searchtext').val();
$('.lister__item').hide().find('h3 > a:contains_ci(' + searchInputValue + ')').parents('.lister__item').show();
});

Hide all elements first then show the matched elements
Also I've added contains_ci expression which allows search case-insensitive
$.expr[":"].contains_ci = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input
var searchInputValue = $('#search').val();
// Search the list and if it matches display it, else hide it
$('.lister__item').hide().find('h3 > a:contains_ci(' + searchInputValue + ')').parents('.lister__item').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="search" id="search" />
</div>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>

I took what you had and used a JavaScript RegExp to construct a case-insensitive expression to match in your content. I'm also using $(this) to target the element in the loop.
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input
var searchInputString = $('#searchtext').val();
var regExp = new RegExp(searchInputString, 'i');
// Search the list and if it matches display it, else hide it
$('.lister__item').each(function() {
var isMatch = $(this).find('h3 > a').text().match(regExp);
$(this).toggle((isMatch) ? true : false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchtext" type="text">
<button id="search">Search</button>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>
</div>

JSOUP get all information starts with

<li data-id="63947814" data-author="ac ca" data-author-id="1387539" data-flags="share report vote" data-isfavorite="false" data-favorite-count="22" data-seyler-slug="" data-comment-count="0">
<div class="content"> el kadar bebelere üstelik hükümetin kıymetlisi olan bir vakıfta tecavüz edilirken üç maymunu oynayan adalet sistemimizin annenin terliğine takılması '' ... sürecek kadar akıl yok'' dedirtiyor..
<br/>ve bazı malların arzusu gerçek olursa bu sığırlar idam kararları alacaklar, kimi asacaklar ki acaba..
<br/>bilmem anlatabiliyor muyum?
</div>
<footer>
<div class="feedback"></div>
<div class="info"> <a class="entry-date permalink" href="/entry/63947814">07.11.2016 12:29</a> <a class="entry-author" href="/biri/ac-ca">ac ca</a> </div>
</footer>
<div class="comment-summary">
<div class="comment-pages"> </div>
</div>
</li>
I've got this html code.My question is i want to parse it with JSOUP like : i will get all li data-id=* informations.This website contains random data-id's so all i just wants get data starts with anything "li data-id="
Elements links = document.select("li[data-id=63947814]");
it's works only got id "63947814".
i've tried "*" : Elements links = document.select("li[data-id=*]");or
Elements links = document.select("li[data-id=\"*\"]");
but it doesnt work.Searched JSON API's and didn't get all i wanted.
so much thanks.

You should use Attribute selector, it will select all the elements with data-id attribute.
Elements links = document.select("li[data-id]");