Develop Reference

Cannot read item in nested array?

I have a nested array inside a list like the following:
{total_results, page, results [id, species_guess, observed_on_details {date, week, month, hour, year}]}
I am trying to get just the id, species_guess, and date using forEach.
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
This is saying " Cannot read property 'date' of undefined ". I have tried using a for loop like this and it worked just fine.
for (let i = 0; i < data.results.length; i++) {
console.log('#' + data.results[i].id + " - " + data.results[i].species_guess + ' (' + data.results[i].observed_on_details.date + ')');
}
Can anyone tell me where am I doing wrong here, sorry I am still new at this language.

you should use foreach as follow
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}

Instead of
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + data.results.id +
" - " + data.results.species_guess +
' (' + data.results.observed_on_details.date + ')')
);
}
Replace "data.results" with "element"
function observationSummary2(data) {
data.results.forEach(element =>
console.log('#' + element.id +
" - " + element.species_guess +
' (' + element.observed_on_details.date + ')')
);
}
More info about "forEach()" here:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Adding field in view ASP.NET MVC

I working on one application, and I started learning ASP.NET so I am begginer and I am trying to add one field in view.
So, I have Firstname,Address, ZIP, State etc and I want for every medical provider add his|her speciality. I create a table and make connection beatween two table.
When I add SPeciality, it doesnt show up in view. I have no idea where I made mistake.
https://i.imgur.com/YBc5dVZ.jpg
https://i.imgur.com/m0haaIW.jpg
https://i.imgur.com/mAvjNLc.jpg
var id = $(this).attr('data-id');
$.getJSON("/NfDocuments/MedicalInput", { id: id },
function (data) {
$('#medInput').empty();
$.each(data, function () {
// $("#medInput").append("'" + this.Id + "'");
//console.log(this.Id);
var medInput = document.getElementById("medInput");
medInput.value = this.Firstname + ' - ' + this.Zip + ' ' + this.Address1 + ',' + this.City + ', ' + this.State + ' - ' + this.Mobile;
});
});
Any suggestion, comment ?

medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile;
You need to append this.SpecialityName (or whatever you have it named as when returned to the view) to medInput.Value:
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile + ' - '
+ this.SpecialityName;
I'm assuming the id of each speciality is this.TypeId and that you have already mapped TypeId to some kind of SpecialityName before sending the object back to the view.

Check if Ajax json response data

Im using a jqueryAjax function in a jsp page to display a html table. The function returns response as a json object. Im using the json object, iterating the same and displaying the column values. But if the field value is empty, then the corresponding value in the html table is specified as 'undefined' Below is my sample code
$.each(data1, function (i, item) {
trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);
In the above, if a particular field is not available in the json for example, if item.req2015 data is not available for a particular row, then the html table displays the corresponding field as 'undefined'.I want the application to display an empty or blank field if the data is not available. Is there any way to acheive the same.
Any help on this is much appreciated.

Check the properties and give them an default before using them.
$.each(data1, function (i, item) {
item.appnName = item.appnName || " ";
item.Defectsin2014 = item.Defectsin2014 || " ";
item.Defectsin2015 = item.Defectsin2015 || " ";
item.costDefect = item.costDefect || " ";
item.req2014 = item.req2014 || " ";
item.req2015 = item.req2015 || " ";
item.ba = item.ba || " ";
item.config = item.config || " ";
item.Financials = item.Financials || " ";
item.bReports = item.bReports || " ";
item.qa = item.qa || " ";
trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);
Or even shorter possible with an inline decision:
trHTML += '<tr><td >' + (item.appnName || " ") + '</td><td>' + (item.Defectsin2014 || " ") + '</td><td>' + (item.Defectsin2015 || " ") + '</td><td>'+
(item.DefectsasperBenchmarks || " ") +'</td><td>'+(item.costDefect || " ") + '</td><td>'+ (item.req2014 || " ") + '</td><td>'+ (item.req2015 || " ") +'</td><td>' +
(item.ba || " ") + '</td><td>'+ (item.config || " ")+'</td><td>'+ (item.Financials || " ") + '</td><td>' + (item.bReports || " ") + '</td><td>'+
(item.qa || " ") + '</td></tr>';

Set default value this way:
<td>'+ (item.req2015||' ') + '</td>
By filed setable defaults, easily reorganiziable:
var fdef = [ 'appnName '," "
,'Defectsin2014', " "
,'Defectsin2015'," "
,'costDefect ', " "
,'req2014 '," "
,'req2015 ', " "
,'ba '," "
,'config ', " "
,'Financials '," "
,'qa ', " "
];
function buildLine(item) {
var out = [];
for (var i= 0,l=fdef.length;i<l;++i) {
out.push(item[fdef[i][0]] || fdef[i][1]);
}
return '<tr><td>' + out.join('</td><td>') + '</td></tr>'
}

You can use this,
if(item.hasOwnProperty('req2015')){
//add it
}

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

Displaying a class name

Hi guys i have a Javascript code here which creates HTML buttons onload with the buttons attributes being fetched from the database through an ASP page. Now i want to display these attributes, i can display the id, type and value but the class shows as undefined. i went to the page on the browser and inspected the element and the class is shown, but not on the alert box. Please help...
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input'
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\''+ onClick + '\'':'')
+ '>';
}
function DisplayButtons(cableData) {
var newContent = '';
$.each(cableData, function (i, item) {
newContent += createButtons(
item.CommonCable,
"unclickedButton",
"submit",
item.CommonCable,
'alert(this.id + " " + this.class + " "+"clicked")'
);
});
$('#Categories').html(newContent);
}

change this.class to this.className..

When you get to the alert parameter, pass in this:
'alert(this.id + " " +' + $(this).attr(class) + ' + " "+"clicked")'
You can use jQuery to get the class name.