var jResult =
[
{
"JobID": 3,
"JobTitle": "DBA",
"PostingURL": "https://www.google.com",
"PostingText": "Posted at Indeed",
"StartDate": "2019-01-14T00:00:00",
"EndDate": "2024-12-31T00:00:00",
"Active": true
},
{
"JobID": 1,
"JobTitle": "UI Designer",
"PostingURL": "https://www.yahoo.com",
"PostingText": "Posted at Indeed",
"StartDate": "2019-01-14T00:00:00",
"EndDate": "2025-02-28T00:00:00",
"Active": true
},
{
"JobID": 4,
"JobTitle": "Project Manager",
"PostingURL": "https://www.stackoverflow.com",
"PostingText": "Posted at Indeed",
"StartDate": "2019-03-25T00:00:00",
"EndDate": "2024-12-31T00:00:00",
"Active": true
}
];
$.each(jResult, function (index, curr) {
var title = curr.JobTitle;
var postingText = curr.PostingText;
var postingUrl = curr.PostingURL;
console.log(postingUrl);
var postDate = curr.StartDate;
var jLink = '<a href="#" class="list-group-item list-group-item-action"></a>';
var jDiv = '<div class="d-flex w-100 justify-content-between"></div>';
var hdr="<h6 class="mb-1"><span>" + title + '</span></h6>';
var spnSD = '<small><span>' + postDate + '</span></small>';
var pJob = '<p class="mb-1">' + postingText + '</p>';
var spnMoreInfo = '<span>Posting URL goes here.</span>';
$(jDiv).append($(hdr), $(spnSD));
$(jLink).append($(jDiv), $(pJob), $(spnMoreInfo));
$("#divLg").append($(jLink));
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="list-group" id="divLg"></div>
</body>
</html>I am using Ajax to call a web service method to retriev a dataset and trying to display it using BS list group.
I tried different methods of generating individual list items inside a loop, none of which seemed to work. This is the latest attempt.
HTML:
<div class="list-group" id="divLg">
</div>
Ajax success part:
}).done(function (result) {
if (!result || result.d === "") {
}
else {
jResult = JSON.parse(result.d);
$.each(jResult, function (index, curr) {
var title = curr.Title;
var postingText = curr.PostingText;
var postDate = curr.StartDate;
// First attempt, totally off!
//$('<a>', { class: 'list-group-item list-group-item-action' + (index == 0 ? ' active' : '') })
// .append($('<div/>', { class: 'd-flex w-100 justify-content-between' })
// .append($('<h6/>', { class: 'mb-1' }, { id: 'spnTitle' + index }).append(document.createTextNode(title)))
// .append($('span', { id: 'spnPostStartDate' + index }).append(document.createTextNode(postDate))))
// .append($('p', { id: 'pDescr' + index }, { class: 'mb-1' }).append(document.createTextNode(postingText)))
// .append($('span').append(document.createTextNode('some text here')))
// .appendTo($('#divLg'));
// Last attempt
var jLink = '<a id="jLink' + index + '" href="#" class="list-group-item list-group-item-action jLink' + index + '" aria-current="true"></a>';
var jDiv = '<div id="jDiv' + index + '" class="d-flex w-100 justify-content-between jDiv' + index + '"></div>';
var hdr="<h6 class="mb-1 jHdr" + index + '"><span id="spnTitle' + index + '">' + title + '</span></h6>';
var spnSD = '<small><span id="spnPostStartDate' + index + '" class="jSD' + index + '">' + postDate + '</span></small>';
var pJob = '<p class="mb-1">' + postingText + '</p>';
var spnMoreInfo = '<span>Posting URL goes here.</span>';
$jLink = $(jLink);
$jDiv = $(jDiv);
$hdr = $(hdr);
$spnSD = $(spnSD);
$pJob = $(pJob);
$spnMoreInfo = $(spnMoreInfo);
$('#jDiv' + index).append($(hdr));
$('#jDiv' + index).append($(spnSD));
$('#jLink' + index).append($(jDiv));
$('#jLink' + index).append($(pJob));
$('#jLink' + index).append($(spnMoreInfo));
$('#divLg').append($(jLink));
});
}
}).fail(function (jqXHR, textStatus, errorThrown) {
//alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText);
});
I am trying to end up with:
<div id="divLg" class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">Some Title</h6>
<small>10/11/2024</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a ...>
...
</a>
</div>
You need to sign in to view this answers
Leave feedback about this