Develop Reference

The last element from object keeps on repeating in the dynamically added div

I'm getting a list of objects and printing their content in the HTML page dynamically but only the last object is getting printed in all the added divisions.
Here is the js code:
var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
for (var k in thelist) {
$(document).ready(function () {
$('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[k]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[k]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[k]['dob'] + '</p>Enter Statement</div></div>');
});
console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
}
Here is the output:
Here is the console log

Passing id from element via ng-click

I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69

jQchart multiple information with title of the graph

I am using jQchart to display a graph. However, the title property seems to display only a single line of text. Currently, the graph displays the following title:
text: chartTypeText + ': ' + chartTitle + ", " + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ' ' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
However, I basically need to display each variable on a different line (hopefully use linebreaks to separate each piece of information). I tried using "" but it displays the string literal.
Is there any way I could display each variable under the title of the graph with different fonts etc?

If you are looking for series title customization, it can be customized with tooltipFormat event.
[Use some separator(I use ; as a separator) and format with html, css]
In below statement, I changed separator to ;
text: chartTypeText + ': ' + chartTitle + ";" + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ';' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
<script lang="javascript" type="text/javascript">
$(function () {
$('#ChartClientID').bind('tooltipFormat', function (e, data) {
var t=data.series.title.split(";");
//OR here you can dynamically build here it self
return "<b>" + t[0] + "</b><br />"
+ (t[1] || "") + "<br />"
+ (t[2] || "");
});
});
</script>
see this link for reference: http://www.jqchart.com/aspnet/chart/ChartFeatures/Tooltips

Using JQuery how do you create a control the name of a class?

I'm using append in the following way:
$('#city').append('<div class="c">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
Which results in something like this:
<div class="c">
Antone Stark. Doyletown, Rhode Island 43467
</div>
How do you use value['state'] to name the class?
<div class="MyCustomClass">

If the states were two letter codes, you could do this:
$('#city').append('<div class="'+value['state']+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
However, classes are space-separated meaning they are treated as separate when split up by spaces. So if you add something there with a space (like "Rhode Island"), it will treat them as separate classes (e.g., "Rhode" and "Island") so you may wish to replace spaces with an underscore or the like.
$('#city').append('<div class="'+value['state'].replace(/ /g, '_')+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
So in the case of Rhode Island, that will produce:
<div class="Rhode_Island">
which you can then reference in CSS:
.Rhode_Island {color:blue}
or jQuery:
$('.Rhode_Island').... (do something)
etc.
However, if you are not repeating these, it might be more appropriate to generate it as an id rather than a class (i.e., to produce <div id="Rhode_Island"> instead of <div class="Rhode_Island">).

$('#city').append('<div class="' + value['state'].replace(/ /g, '_') + '">' ...

how to call javascript function from anchor tag which is part of a javascript string?

how to call javascript function from anchor tag which is part of a javascript string?
var htmlVar = '<span> Name: ' + arNames[j] + '</span></br><span> Last: ' + arLast[j] + '</span><br/><a javascript:setProfile(\\"+ dob[j]+\\",\\"+state[j]+\\") >View</a>';

If I'm understanding your intention correctly (having a string that contains the HTML for a link that is a Javascript link), you could do it thus:
var htmlVar = '<span> Name: ' + arNames[j] + '</span></br><span> Last: ' + arLast[j] + '</span><br /><a onclick="javascript:setProfile(\\"' + dob[j] + '\\",\\"' + state[j] + '\\")">View</a>';