We Keep Coding

How can I load data from a service that returns JSON and create content using jQuery?

I am a beginner in JS .. so I am reaching out to you, hoping someone could enlighten me! :)
I have been given a JSON link listing a lot of infos and I must create an html using at least 2 pieces of info from this JSON link.
I have already imported my stylesheets (+script) in the html and I coded this in my script.js :
$.getJSON('myjsonlink', function(json) {
console.log(json);
});
If one of you guys have a moment to give me hand, it would be awesome! Thank you so much in advance.
Athena.

There are few issues with the way you are reading data and rendering it:
There is no naruto property on response, it is results instead.
img is not a valid property, it should be image_url instead.
Let's fix it:
$('#get-data').click(function() {
var showData = $('#show-data');
$.getJSON('https://api.jikan.moe/v3/search/anime?q=naruto', function(data) {
var naruto = data.results;
for (var i = 0; i < naruto.length; i++) {
var anime = naruto[i];
var html = '<div class="card">' + '<img src="' + anime.image_url + '">' + '<div class="cardcontainer">' + '<p>' + anime.title + '</p>' + '<p>' + anime.synopsis + '</p>' + '</div>' + '</div>';
showData.append(html);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="get-data">Load Data</button>
<div id="show-data"></div>

How to add a button inside message body in Javascript?

I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`

I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`

You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';

Store html code to javascript variable

I have a problem when converting store html code to javascript variable, I know we can convert using converter tools, but I can't use this converter in my situation.
I am trying the following code
var t_cls="font-effect-anaglyph rotator";
var randompostsurl="www.allinworld99.blogspot.com";
var randompoststitle="Open Inspect Element And see the Code";
var default_script = "<script> document.write('<div><a class="+t_cls+" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>'); <\/script>\n";
$("#apnd").append(default_script);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="apnd"></div>
The above one will produce the following output
<a class="font-effect-anaglyph" rotator="" href="www.allinworld99.blogspot.com" rel="nofollow">Open Inspect Element And see the Code</a>
Why the rotator class will created as new attribute?

Because there are no quotes around the class attribute in the result. You need to add them, since you have a space in the attribute's value:
default_script = "<script> document.write('<div><a class=\""+t_cls+"\" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
// Here --------------------------------------------------------^^---------^^

Replace your default_script code
default_script = "<script> document.write('<div><a class='"+t_cls+"' href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";

As there are no quotes in class, it produce rotator as a new attribute. But you can achieve rotator as a class by the following way. i.e replacing single quotes with escape sequence.
<script>$(document).ready(function(){
var t_cls="font-effect-anaglyph rotator", randompostsurl="www.allinworld99.blogspot.com",
randompoststitle="Open Inspect Element And see the Code",
default_script = "document.write(\"<div><a class=\""+t_cls+"\" href=\"" + randompostsurl + "\" rel=\"nofollow\">\" + randompoststitle + \"<\/a><\/div>\");<\/script>\n";
$("#apnd").append(default_script);
});
</script>

Div not being created

I am converting existing code into template code since it is much cleaner, I am using Mustache as my choice of template engine. I am having trouble getting the below code to work I have included both the old working code and the new Mustache code. The problem is that the div is not being created at all and it just places a < inside of the DealerInfo div.
This is the converted code:
for(i=0; i< markers.length; i++) {
var testContent = Mustache.render("<div class='{{info_content}}'><h3>{{dealerName}}</h3>" +
"<p>{{address}}<br/>{{city}}, {{state}} {{zip}}<br/>" +
"<a href='{{href}}'>{{hrefTitle}}</a></p></div>", {
info_content: "info_content",
dealerName: markers[i][3],
address: markers[i][2],
city: markers[i][4],
state: markers[i][5],
zip: markers[i][8],
href: markers[i][6]
});
infoWindowContent.push(testContent);
}
This is the old code:
for(i=0; i< markers.length; i++) {
var testContent = ['<div class="info_content">' + '<h3>' + markers[i][3] + '</h3>' + '<p>' + markers[i][2] + '<BR />' + markers[i][4] + ', ' + markers[i][5] + ' ' + markers[i][8] + '</p>' + '<BR /> ' + markers[i][6] +'' +'</div>'];
infoWindowContent.push(testContent);
}
This is how I am getting the info to output into the div:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];

Your problem is:
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i][0];
In your new code, you are making an array of strings, so infoWindowContent[i][0] gives you the 1st character in the string created via Mustache.render
document.getElementById("DealerInfo").innerHTML=infoWindowContent[i];
should do the trick.
By the way, you can pass an array to Mustache and have it iterate over the items.

I don't know if this will fix your problem, but I would start by putting your string template into a variable and your data into a variable and then calling the Mustache.render function on those. I suspect the mess you are sending to Mustache is getting jacked somehow.

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!

You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";