Develop Reference

How can i display massages based on the user who sent and received the message

I don't know what's wrong with my code am not getting the intended output. Anybody to lend a helping hand and I'll really appreciate it.
If append the row class inside the for loop am getting all the messages but you can't differentiate who sent and who received and when I append the class outside the for loop am only getting one message.
xhr.onload = function () {
var messages = [
{ id: 36, message: "hay here", username: null, senderId: 1, receiverId: 9 },
{ id: 38, message: "hay there again", username: null, senderId: 1, receiverId: 9 },
{ id: 37, message: "yes hay", username: null, senderId: 9, receiverId: 1 },
];
var rowClass = "";
for (var message = 0; message < messages.length; message++) {
if (messages[message].senderId === messages[message].senderId) {
rowClass =
'<div style="text-align:right">' +
'<p style="background-color:lightblue">' +
mymessages[message].message +
"</p>" +
"<div>";
} else {
rowClass =
'<div style="text-align:left">' + '<p style="background-color:green">';
messages[message].message;
"</p>" + "<div>";
}
}
$(".message").append(rowClass);
};

You need to check whether the current user's id is same as that of the message, for example:
const currentUserId = 9;
var messages = [
{ id: 36, message: "hay here", username: null, senderId: 1, receiverId: 9 },
{ id: 38, message: "hay there again", username: null, senderId: 1, receiverId: 9 },
{ id: 37, message: "yes hay", username: null, senderId: 9, receiverId: 1 },
];
var rowClass = "";
for (var message = 0; message < messages.length; message++) {
if (messages[message].senderId === currentUserId) {
rowClass +=
'<div style="text-align:right">' +
'<p style="background-color:lightblue">' +
messages[message].message +
"</p>" +
"<div>";
} else {
rowClass +=
'<div style="text-align:left">' +
'<p style="background-color:green">' +
messages[message].message +
"</p>" +
"<div>";
}
}
$(".message").append(rowClass);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message"></div>

Using forEach() on an Array of Objects

I know how to get all the information on the web page another way, but I am trying to get it on the web page with the forEach() method to learn something new. This is my first time using the forEach() method can someone please tell what I am doing wrong? Everything but the values get printed onto the web page.
let students = [
{ name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 }
,{ name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 }
,{ name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 }
,{ name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 }
,{ name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 }
] ;
let message = "";
let student;
let search;
function print(message) {
let outputDiv = document.getElementById("output") ;
outputDiv.innerHTML = message ;
}
students.forEach(function(myElement) {
for(let key in myElement) {
myElement += "<h2>Student: " + myElement[key] + "</h2>" ;
myElement += "<p>Track: " + myElement[key] + "</p>" ;
myElement += "<p>Achievements: " + myElement[key] + "</p>" ;
myElement += "<p>Points: " + myElement[key] + "</p>" ;
}
print(myElement) ;
}) ;
<div id="output">

You have a few issues:
Your inner for-loop is redundant as it adds the same value to every information block. Instead, you can remove it and access only the required keys for each of your objects (using dot-notation).
You are trying to concatenate a string with your object when you do myElement += "string" as myElement represents a given object in your array. Instead, you can use your empty string (message) and add to that at each iteration of your loop.
Once you have done that, your message variable will contain the mark-up you need to print once your .forEach loop is complete, and so you can move the print() line to be outside your for loop.
See example below:
let students = [{
name: "Milla Jovovich",
track: "Fullstack JavaScript",
achievements: 5,
points: 50
},
{
name: "Bjon Aarseth",
track: "iOS Development",
achievements: 7,
points: 70
},
{
name: "Varg Oystein",
track: "Front End Development",
achievements: 12,
points: 120
},
{
name: "Wilhelm Striepe",
track: "Software Engineering",
achievements: 9,
points: 90
},
{
name: "Anders Hansen",
track: "Data Science",
achievements: 22,
points: 220
}
];
let message = "";
function print(message) {
let outputDiv = document.getElementById("output");
outputDiv.innerHTML += message;
}
students.forEach(function(myElement) {
message += "<h2>Student: " + myElement.name + "</h2>";
message += "<p>Track: " + myElement.track + "</p>";
message += "<p>Achievements: " + myElement.achievements + "</p>";
message += "<p>Points: " + myElement.points + "</p>";
});
print(message);
<div id="output"></div>

You don't need to iterate over your element with for...in. The forEach is enough.
let students = [{
name: "Milla Jovovich",
track: "Fullstack JavaScript",
achievements: 5,
points: 50
},
{
name: "Bjon Aarseth",
track: "iOS Development",
achievements: 7,
points: 70
},
{
name: "Varg Oystein",
track: "Front End Development",
achievements: 12,
points: 120
},
{
name: "Wilhelm Striepe",
track: "Software Engineering",
achievements: 9,
points: 90
},
{
name: "Anders Hansen",
track: "Data Science",
achievements: 22,
points: 220
}
];
let message = "";
let student;
let search;
function print(message) {
let outputDiv = document.getElementById("output");
outputDiv.innerHTML = message;
}
message = ""; //declare your "message" here, the content of output
students.forEach(function(myElement) {
message += "<h2>Student: " + myElement.name + "</h2>";
message += "<p>Track: " + myElement.track + "</p>";
message += "<p>Achievements: " + myElement.achivements + "</p>";
message += "<p>Points: " + myElement.points + "</p>";
});
print(message); // print "message" when all students have been added to the variable
<div id="output"></div>

x-editable custom fields cannot get text of select menu

Ive followed this example from another SO thread:
X-editable custom field type not respecting overridden defaults
and its helped me to create a similar custom field with x-editable. All is working ok but i cant figure out how render/display the 'text' of the select - the SO example ouputs the 'value'. my js to initialis the x-editable to use my custom inputs is thus:
$('#stffulladdress').editable({
url : '',
pk : 6,
value : {
address : "",
city : "",
region : "",
postcode : "",
country : "eng"
},
sourceCountry: [
{ value: "eng", text: "ENGLAND" },
{ value: "ire", text: "IRELAND" },
{ value: "sco", text: "SCOTLAND" },
{ value: "cym", text: "WALES" }
],
validate : function(value) {
if (value.address == '' || value.postcode == '') return "Address first lines AND Postcode required";
},
display : function(value) {
if (!value) {
$(this).empty();
return;
}
console.log(value.country);
var html = $('<div>').html( value.address + '<br />' + value.city + '<br />' + value.region + '<br />' + value.postcode + '<br />' + value.country );
$(this).html(html);
}
});
My custom x-editable class is the same as the SO example mentioned with the only difference being i have more inputs -they work ok as expected. I would have thought that this snippet from the x-edit class gets the text of the selected item:
value2html: function(value, element) {
if(!value) {
$(element).empty();
return;
}
var countryText = value.country;
$.each(this.sourceCountryData, function (i, v) {
if (v.value == countryText) {
countryText = v.text.toUpperCase();
}
});
var html = $('<div>').html( value.address + ',<br />' + value.city + ',<br />' + value.region + ',<br />' + value.postcode + ',<br />' + countryText );
$(element).html(html);
},
But upn displaying the selected country i still get the country value "eng" and not the text "England".
I've tried :
value.country which gives me the value 'eng'
and value.text gives undefined
Any idea how i can get the selected text??
thanks

Try the sourceCountry as follow:
sourceCountry: [
{ "eng": "ENGLAND" },
{ "ire": "IRELAND" },
{ "sco": "SCOTLAND" },
{ "cym": "WALES" }
],

jQuery getJSON parsing an array of dicts and flling a table

I have the following jQuery code in my page:
$('#submit').click(function() {
var $table = $('#search_body');
$.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
alert ('each index ' + index);
$.each(obj, function(key, value){
alert('each key ' + key + ':' + value);
$table.innerHTML="<tr><td>" + key + ':' + value + "</td></tr>";
});
});
});
});
In the HTML markup, I have a table defined and the body of the table is defined as
<tbody id="search_body">
</tbody>
I put the two alert statements in the code, and it turns out, the first alert only pops up once, telling me index is 0.
If however, I point my browser to the url that is generated for the call to getJSON, I get an array of 9 objects.
This leads me to believe that my syntax in the inner (or possibly the outer) loop is incorrect. So, I went to an online lint form, and it said that I had no syntax errors, so it looks like a logic error.
BTW, $('#folders') does have a valid value (it's a dropdown and it has been selected)
Thanks
The objects returned when I point my browser is this:
[
{
planning: 0,
id: "0e1a9dba-8bfe-4316-8923-b76f76da3171",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "16ef48ab-1257-4fe4-a4ea-bb2a4b2757f6",
rank: 0,
title: "Test Issue 3"
},
{
planning: 0,
id: "4086f816-57dd-49e7-91a4-ef2ac9573555",
rank: 0,
title: "Test Issue 1"
},
{
planning: 0,
id: "45c598f0-fd6a-48d6-9822-1ca8b0a5af4b",
rank: 0,
title: "Test Issue 2"
},
{
planning: 0,
id: "50a62544-3350-4c78-a9eb-9d79a37846ea",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "ae7fa839-1161-4d54-92da-662e6aa35936",
rank: 0,
title: "Test Issue 6"
},
{
planning: 0,
id: "c4016338-a766-46ba-a651-3879a844f141",
rank: 0,
title: "Test creating an issue"
},
{
planning: 0,
id: "d9f38b4f-d4ef-4abf-ab30-d511c0082df1",
rank: 0,
title: "Test Issue 5"
}
]

I am changing your code a little bit assuming that this is the desired output:
$('#submit').click(function() {
var $table = $('#search_body');
$.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
var $tr = $("<tr></tr>").appendTo($table);
$.each(dict, function(key, value){
$tr.append("<td>" + key + ': ' + value + "</td>");
});
});
});
});

obj does not appear defined ? Try substituting
$.each(dict, function(key, value){
for
$.each(obj, function(key, value){
Also substituting
$table[0].innerHTML += "<tr><td>" + key + ':' + value + "</td></tr>";
for
$table.innerHTML="<tr><td>" + key + ':' + value + "</td></tr>";
to concatenate innerHTML of $table; $table[0] being DOM element having property .innerHTML ; $table being jQuery object not having method .innerHTML
var data = [
{
planning: 0,
id: "0e1a9dba-8bfe-4316-8923-b76f76da3171",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "16ef48ab-1257-4fe4-a4ea-bb2a4b2757f6",
rank: 0,
title: "Test Issue 3"
},
{
planning: 0,
id: "4086f816-57dd-49e7-91a4-ef2ac9573555",
rank: 0,
title: "Test Issue 1"
},
{
planning: 0,
id: "45c598f0-fd6a-48d6-9822-1ca8b0a5af4b",
rank: 0,
title: "Test Issue 2"
},
{
planning: 0,
id: "50a62544-3350-4c78-a9eb-9d79a37846ea",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "ae7fa839-1161-4d54-92da-662e6aa35936",
rank: 0,
title: "Test Issue 6"
},
{
planning: 0,
id: "c4016338-a766-46ba-a651-3879a844f141",
rank: 0,
title: "Test creating an issue"
},
{
planning: 0,
id: "d9f38b4f-d4ef-4abf-ab30-d511c0082df1",
rank: 0,
title: "Test Issue 5"
}
];
var $table = $('#search_body');
// $.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
alert ('each index ' + index);
$.each(dict, function(key, value){
alert('each key ' + key + ':' + value);
$table[0].innerHTML += "<tr><td>" + key + ':' + value + "</td></tr>";
});
});
// });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody id="search_body">
</tbody>
</table>

How do I add an image to an javascript array?

I have a page with a search bar that has auto complete according to the data in a separate js file. If I type in a letter it throws out the related names that starts with or contains that letter, if I select the result if displays the details that come with that name. I just need to know how to link an an image to that data so when selected a picture is displayed with that info of the name.
Here is my Javascript code:
$(function(){
var currencies = [
{ value: 'Murray Smith', data: 'AFN', foto: src='img/logo.jpg' },
{ value: 'Brown Church', data: 'ALL' ,foto: src='../img/logo.jpg'},
{ value: 'Jack Jones', data: 'DZD' ,foto: src='../img/logo.jpg'},
{ value: 'Ben Clark', data: 'EUR' ,foto: src='../img/logo.jpg'},
{ value: 'Pete White', data: 'AOA' ,foto: src='../img/logo.jpg'},
{ value: 'East Caribbean dollar', data: 'XCD' ,foto: src='../img/logo.jpg'},
];
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol: </strong> ' + suggestion.data + '<br> <strong>Profile Pic:</strong> ' + suggestion.foto;
$('#outputcontent').html(thehtml);
}
});
});
Thank you in advance.

Use this code:
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value
+ ' <br> <strong>Symbol: </strong> ' + suggestion.data
+ '<br> <strong>Profile Pic:</strong> <img ' + suggestion.foto +' />';
^^^ use image tag here
And your foto should be like this:
foto: "src='img/logo.jpg'"
^^^ add the double quotation mark to make it correct

Updated your array to be valid will help :)
var currencies = [
{ value: 'Murray Smith', data: 'AFN', foto: '<img src="img/logo.jpg">' },
{ value: 'Brown Church', data: 'ALL' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Jack Jones', data: 'DZD' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Ben Clark', data: 'EUR' ,foto: '<img src="img/logo.jpg">'},
{ value: 'Pete White', data: 'AOA' ,foto: '<img src="img/logo.jpg">'},
{ value: 'East Caribbean dollar', data: 'XCD' ,foto: '<img src="img/logo.jpg">'},
];

As André Dion mentioned in his comment, your syntax is invalid.
you should change the foto property value of your object to be:
foto: 'path/to/my/img.ext'
and in your HTML, when calling that property, append it inside an image tag.
thehtml += '<img src="'+foto+'" alt="don't forget the blind!" />';
Hope this helps.
&dash; Sid