Adding field in view ASP.NET MVC - javascript

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.

Related

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

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

How can I filter null or undefined values from an ajax call?

I'm trying to create a simple class directory for my kid's class. I have a Array of students in JSON format and wrote an AJAX call for the kids' names, and parents information. But some don't have two parents or two sets of contact information? I have tried "if (studentData !== null) {
show the data} but that doesn't work.
function showStudents() {
var currentURL = window.location.origin;
$.ajax({ url: currentURL + '/api/students', method: 'GET'})
.then(function(studentData) {
console.log("------------------------------------");
console.log("URL: " + currentURL + "/api/students");
console.log("------------------------------------");
// Here we then log the NYTData to console, where it will show up as an object.
console.log(studentData);
console.log("------------------------------------");
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
studentSection.addClass('card');
studentSection.attr('id', 'studentCard-' + i);
studentSection.attr('style', 'width:25rem');
$('#studentSection').append(studentSection);
$('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
$('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');
$('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + studentData[i].parent1 + ' & ' + studentData[i].parent2 +' </li>');
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
$('#studentCard-' + i ).append('</ul>');
$('#studentCard-' + i ).append('</div>');
}
});
}
It sounds like it's the parent1 or parent2 properties that might not exist, and the contact1 or contact2 properties that might not exist. It doesn't make sense to test if the entire response is null - just check those properties instead. For example:
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
studentSection.addClass('card');
studentSection.attr('id', 'studentCard-' + i);
studentSection.attr('style', 'width:25rem');
$('#studentSection').append(studentSection);
$('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
$('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');
// Start of changes
const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
$('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
if (studentData[i].contact1) {
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
}
if (studentData[i].contact2) {
$('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
}
// End of changes
$('#studentCard-' + i ).append('</ul>');
$('#studentCard-' + i ).append('</div>');
}
Your script structure could be improved too - unless each card's id is particularly important, it would make more sense to use a class instead of unique ids for every single element, or perhaps to leave it off entirely if you're only using it to select the newly created container. You already have a reference to the element you just created with studentSection, so just reference that variable again. You can also use method chaining to reduce your syntax noise:
CSS:
.card {
width: 25rem;
}
(that will keep you from having to manually set the width of each created element in your JS)
JS loop:
for (var i = 0; i < studentData.length; i++ ) {
var studentSection = $('<div>');
$('#studentSection').append(studentSection);
const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
studentSection.addClass('card')
.append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>')
.append('<ul class="list-group list-group-flush>')
.append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
if (studentData[i].contact1) {
studentSection.append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
}
if (studentData[i].contact2) {
studentSection.append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
}
studentSection.append('</ul>');
.append('</div>');
}
(Or, even better, use template literals instead)

html code in javascript not getting the id to open to another window

I have a html inside a javascript. My problem is I cant call the id in my html code. Can someone help me with this?
My code:
<script type= "text/javascript">
// customer notification
notifications.initMenu({
projects: '#projects1'
});
$.getJSON('/Customer/ForCustomerNotif' + '?userId=' + userId, function (savedCusNotif) {
$.each(savedCusNotif, function () {
var ID = this["ID"];
var workerId = this["WorkerID"];
var Name = this["Name"];
var DateApplied = this["DateCreated"];
var Position = this["Position"];
var Read = this["IsRead"];
var WorkerID = this["WorkerID"];
var ClientCusId = this["Client_CustomerID"];
var positionId = this["PositionID"];
var options = (Read == true) ? {
id: ID,
unread: 'unread',
category: "projects",
message: '<b>' + Name + '</b>' + '<br/>' + " is applied in the " + '<b>' + Position + '</b>' + " " + "position" + " on " + '<br/>' + DateApplied + "."
} : {
id: ID,
read: 'read',
category: "projects",
message: '<b>' + Name + '</b>' + '<br/>' + " is applied in the " + '<b>' + Position + '</b>' + " " + "position" + " on " + '<br/>' + DateApplied + "."
//im calling this link for redirection in another window.
+'View '
};
notifications.createNotification(options);
// I tried to call the id but doesn't work.
$("#redirect").click(function() {
alert("get link");
var redirect = $(this).attr('href', '/Customer/ViewAppliedWorkersProfile?workerId=' + WorkerID + '&positionId=' + positionId + '&positionIds=' + positionId);
window.open(redirect, 'width=900,height=800,left=190,top=100,screenX=190,screenY=100,resizable=no,resizable=0,resizable=false,scrollbars=yes');
});
});
});
</script>
I'm using ttwnotificationmenu.js from www.codebasehero.com.
So my problem is getting the id in the html code hope someone will help me with this.

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

Categories

Resources