Develop Reference

display all json data with bootstrap card in a dynamic div using jquery

i'm still learning ajax,jquery and js here.. So in this problem i want to get the json data and display each of it into div id="card-body" dynamically one by one per ID, but it seems my code doesn't work because the result only show one div that have all the data inside of it. Are there any suggestion that can be added or changed within the code here?
<div class="container">
<div class="card">
<div class="card-header">
</div>
<div class="addDiv">
<div id="card-body">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
success: function (result) {
$.each(result, function (index, item) {
var userId = item.userId;
var typeId = item.id;
var titleId = item.title;
var bodyId = item.body;
var $info = $("<p/>").html("user id: " + userId + "<br>"
+ "id: " + typeId + "<br>"
+ "title: " + titleId + "<br>"
+ "body: " + bodyId);
var html = '<div id="card-body>';
for (let i = 0; i < $(result).length; i++) {
const element = $(result)[i];
}
html += '</div>';
$(".addDiv").append(html);
$("div#card-body").append($info);
});
// console.log('success', result);
// console.log(result[0].body);
// console.log($(result).length);
}
});
});
</script>

for (let i = 0; i < $(result).length; i++) {
const element = $(result)[i];
}
what is here going to do?
or you mean this? --- Updated
$(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
success: function(result) {
var container = $("div#list");
$.each(result, function (index, item) {
var userId = item.userId;
var id = "card-body-" + userId;
var el = $('div#' + id)
console.log(el)
var typeId = item.id;
var titleId = item.title;
var bodyId = item.body;
var $info = $('<div>').html(
"user id: " + userId + "<br>" +
"id: " + typeId + "<br>" +
"title: " + titleId + "<br>" +
"body: " + bodyId
);
if (!el.length) {
// not found, create new one
el = $('<div id="' + id + '">')
container.append(el)
}
el.append($info)
});
}
});
});

Make a list with multiple pages in Jquery

I'm making a page with a list of products (which are loads using ajax) but i want to show only 6 products/page but i don't know how to do it and i don't find any examples that implements what i want. So for example if i have 20 products i want to show 6 in the first page, 6 in the second, .. etc to the last product in the last page (the page is always the same only the products change).
So in the end of the page i must have page 1-n
Can someone help me?
this is the js that load the products and show them one below the other:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "json/projects.json",
dataType: "json",
success: function (data) {
showInfo(data);
},
});
});
function showInfo(data) {
var htmlString = "";
if (data.length == 0) {
htmlString =
"<span id = " +
"message>" +
"Non è stato trovato alcun progetto" +
"</span>";
$("#list").append(htmlString);
} else {
//altrimenti stampo data
for (i = 0; i < data.length; i++) {
//scorro tutto il mio file json
htmlString =
"<div class = " + "project id = " + data[i].id + ">" +
"<div class =" + "row-list>" +
"<div class = " + "title>" + data[i].title + "</div>" +
"<div class = " + "info>" + "<img src = " + "img/user.png>" + data[i].username + "</div>" +
"<div class = " + "info>" + "<img src = " + "img/budget.png>" + data[i].budget + "</div>" +
"<div class = " + "info>" + "<img src = " + "img/data.png>" + data[i].data + "</div>" +
"<div class = " + "flag>" + data[i].flag + "</div>" +
"</div>";
// collego al div #list le informazioni
$("#list").append(htmlString);
}
// aggiungo l'handler per visualizzare i dettagli quando un progetto viene cliccato
$(".project").click(function () {
window.location.href = "details.php?id=" + $(this).attr("id");
});
}
}

If the page doesn't change, you can stay on the same page while simply changing the products shown.
Here's a simplified version to demonstrate how this could work:
// create 20 product names
let products = [];
for (let i=1; i<=20; i++) {
products.push(`This is Product Name ${i}`);
}
let firstShown = 0;
const display = document.getElementById('display');
// display up to 6 products on page
function addToDisplay(first) {
display.innerHTML = '';
let last = Math.min(first+5, products.length-1);
for (let i = first; i <= last; i++) {
let li = document.createElement('li');
li.innerHTML = products[i];
display.appendChild(li);
}
}
function forward () {
display.innerHTML = '';
firstShown += 5;
addToDisplay(firstShown);
}
function back () {
display.innerHTML = '';
firstShown = Math.max(firstShown-5, 0);
addToDisplay(firstShown);
}
// show initial 6 producs
addToDisplay(firstShown);
<p>Display multiple products 6 at a time<br/>
<button type="button" onclick="back();">Back</button>
<button type="button" onclick="forward();">Forward</button>
</p>
<ul id="display"></ul>

js/json: why can't I add json.feed.entry[i].Content.$t to this variable definition?

Moving on from my previous question. Same little project. Different inquiry altogether.
Here's the updated code:
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
var i;
var j;
for (i = 0; i < json.feed.entry.length; i++)
{
for (j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var postUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var postTitle = json.feed.entry[i].title.$t;
var item = "<h2>" + '' + postTitle + " </h2>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="https://xxxxxxxxxx.blogspot.com/feeds/posts/summary/-/recommended?max-results=3&alt=json-in-script&callback=recentpostslist"></script>
What it does is list the titles of a blog's 3 latest posts that have been labeled "recommended".
I figured I might declare another variable, just above the var item definition, as in...
var postContent = json.feed.entry[i].content.$t;
...and add that to the 'var item' value, as in...
var item = "<h2>" + '' + postTitle + " </h2> <p>" + postContent + "</p>";
...or something like that; my intention being to include posts' content (not just title) to what's being displayed.
But that doesn't seem to work. Am I missing something?

The URL you're using contains the word summary; if you use default instead, the json data will also contain the content, apparently.

For loop not working with innerHTML

I have a for loop that has innerHTML in it and I cannot figure out why it is not working. The code is as below:
<head>
<script language="javascript">
function afterload()
{
for(var n=1; n<11; n++)
{
document.getElementById("item"+n).innerHTML = window.opener.document.getElementById("item"+n).value;
document.getElementById("prc"+n).innerHTML = window.opener.document.getElementById("prc"+n).value;
document.getElementById("qty"+n).innerHTML = window.opener.document.getElementById("qty"+n).value;
document.getElementById("amt"+n).innerHTML = window.opener.document.getElementById("totl"+n).value;
}
}
</script>
</head>
<body onload="afterload()">
</body>
In the body there are table data with the ids above i.e. item1, prc1, qty1 and amt1 and they run up to 10. the parent window also has input fields with the above ids and they also run to 10. The most confusing thing is that if I remove the for loop and write the actual ids of the fields, it works perfectly.

<head>
<script language="javascript">
function afterload()
{
var item = document.getElementById("item");
var itemvalue = document.getElementById("item").value;
var prc = document.getElementById("prc");
var prcvalue = document.getElementById("prc").value;
var qty = document.getElementById("qty");
var qtyvalue = document.getElementById("qty").value;
var amt = document.getElementById("amt");
var amtvalue = document.getElementById("totl").value;
for(var n=1; n<11; n++)
{
item.innerHTML += (itemvalue + "*" + n + "=" + (itemvalue*n) + "<br />");
prc.innerHTML += (prcvalue + "*" + n + "=" + (prcvalue*n) + "<br />");
qty.innerHTML += (qtyvalue + "*" + n + "=" + (qtyvalue*n) + "<br />");
amt.innerHTML += (amtvalue + "*" + n + "=" + (amtvalue*n) + "<br />");
}
}
</script>
</head>
<body onload="afterload()">
</body>

function innerHtml(n)
{
document.getElementById("item"+n).innerHTML = window.opener.document.getElementById("item"+n).value;
document.getElementById("prc"+n).innerHTML = window.opener.document.getElementById("prc"+n).value;
document.getElementById("qty"+n).innerHTML = window.opener.document.getElementById("qty"+n).value;
document.getElementById("amt"+n).innerHTML = window.opener.document.getElementById("totl"+n).value;
}
function afterload()
{
for(var n=1; n<11; n++)
{
innerHtml(n);
}
}
Hope its help!

javascript: missing : after property id

I'm trying to pass my own array of objects: results[num_row] = {'title:\'' + title + '\', ' + 'url:\'' + url + '\''};
but this returns the error in firebug
when I try: results[num_row] = {title:'Link A', url:'/page1'}
it works.
Thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
var test = ["a","b","ab"];
var results = new Array();
function prep(){
$("#searchbox").autocomplete(results,{
formatItem: function(item) {
return item.title;
}
}).result(function(event, item) {
location.href = item.url;
});
}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "links2.xml",
dataType: "xml",
success: function(xml) {
// Count elements
var count = $(xml).find('ROW').length;
// Create Array of correct length
//window.results = new Array(count);
// Set array variable
var num_row = 0;
//data string
var datastring = "";
//start of find block
$(xml).find('ROW').each(function() {
var title = $(this).find('SC_DF_FIELD_1').text();
var url = $(this).find('SC_DF_FIELD_2').text();
var support_url = $(this).find('SC_DF_FIELD_3').text();
var description = $(this).find('SC_DF_FIELD_4').text();
var contacts = $(this).find('SC_DF_FIELD_5').text();
//clean up xml variables
url = url.substring(url.indexOf('>') + 1, url.indexOf('/a') - 1);
support_url = support_url.substring(support_url.indexOf('>') + 1, support_url.indexOf('/a') - 1); /*need to clean up contacts search later */
//alert(title + '\t' + url + '\t' + support_url + '\t' + description + '\t' + contacts);
results[num_row] = {'title:\'' + title + '\', ' + 'url:\'' + url + '\''};
//results[num_row] = title;
//results[num_row] = {text:'Link A', url:'/page1'}
num_row++
// $('<div class="items"></div>').html('' + title + '').appendTo('#page-wrap');
});
//end of find block
prep();
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<FORM autocomplete="off"><INPUT id="searchbox" type="text"/>
</FORM></DIV>
</body>
</html>

That gives you a SyntaxError, the Object initializer syntax doesn't work like that.
If you want to use the title and url variables in a new object, you can easily:
//...
results[num_row] = {'title': title , 'url': url};
//...

Essentially when you write
{'title:\'' + title + '\', ' + 'url:\'' + url + '\''}
You are trying to set the value of
results[num_row]
equal to an incomplete object
{ PropertyName }
when you need
{ PropertyName : PropertyValue }

Try
results= [];
num_row = 0;
title = "myTitle";
url = "myURL";
results[num_row] = {'title': title, 'url': url}