Displaying Arrays in innerHTML [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I am trying to display two bits of data from an array. The first is the title which is comes under [0][0] and the second is a description which is [0][2].
This is what i have written.
element.innerHTML = "<div>" + "<h3>" + all_films[0][0]; + "</h3>" + "<p>" + all_films[0][2]; + "</p>" + "</div>"
it's strange because it works if i just write
"<div>" + "<p>" + all_films[0][2]; + "</p>" + "</div>"
or if i just write
"<div>" + "<h3>" + all_films[0][0]; + "</h3>" + "</div>"
But they never seem to work together. Why is this? Am i not allowed two arrays in the same thingy or what?

You have semicolons where they shouldn’t be, turning your code into this:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0];
+"</h3>" + "<p>" + all_films[0][2];
+"</p>" + "</div>";
where the last two statements have no effect. (JavaScript has a unary + operator, as in +5 === 5.) Remove the semicolons:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0] + "</h3>" + "<p>" + all_films[0][2] + "</p>" + "</div>";

Remove the semicolons:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0] + "</h3>" + "<p>" + all_films[0][2] + "</p>" + "</div>";
Semis belong at the end of a line of javascript, not in the middle.

Get rid of random semicolons during string concatenation...

Related

Can this be turned into a for loop?

I would like to clean this up with a For loop. What would be the most efficient way coding this out?
I'm creating a search form that looks through a database for the specific form criteria. The way I have it coded would only work for the 8 Fields. But it is possible for the search form to have more then 8. For now though, I'd like to be able to map the results and display in a results page.
This is what I tried. This did not work at all and probably make no sense to anyone lol.
var obj =data[0]
$.get("obj", {data: $('select["Fields.DisplayName" + Fields.DataValue]').val()},
function(data){
$.each(data, function(i, item) {
alert(item);
});
}
);
This works for getting the data and displaying it how I'd like.
var obj = data[0];
document.getElementById("test").innerHTML =
"<p>"+ obj.Fields[0].DisplayName + ": " + obj.Fields[0].DataValue + "</p>" +
"<p>" + obj.Fields[1].DisplayName + ": " + obj.Fields[1].DataValue + "</p>" +
"<p>"+ obj.Fields[2].DisplayName + ": " + obj.Fields[2].DataValue + "</p>" +
"<p>"+ obj.Fields[3].DisplayName + ": " + obj.Fields[3].DataValue + "</p>" +
"<p>" + obj.Fields[4].DisplayName + ": " + obj.Fields[4].DataValue + "</p>" +
"<p>" + obj.Fields[5].DisplayName + ": " + obj.Fields[5].DataValue + "</p>" +
"<p>"+ obj.Fields[6].DisplayName + ": " + obj.Fields[6].DataValue + "</p>" +
"<p>" + obj.Fields[7].DisplayName + ": " + obj.Fields[7].DataValue + "</p>"
;
The next problem is if there is more then 1 data object. Currently I have it set to loop through the first object, but when I remove that I get cannot read property of '0' undefined.
Sure.
var html = "";
obj.Fields.forEach(({DisplayName, DataValue}) => {
html += `<p>${DisplayName}: ${DataValue}</p>`;
});
document.getElementById("test").innerHtml = html;
Use Array.map() and join the results:
var fields = data[0].Fields ;
document.getElementById("test").innerHTML = fields
.map(function(field) {
return '<p>' + field.DisplayName + ': ' + field.DataValue + '</p>';
})
.join('\n');

referencing the id of a div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to reference the id of a div-table row in the variable thisId. When I console.log(thisId), it says that thisId is undefined. What am I doing wrong?
$('.deleteButton').click(function(){
var thisId = $(this).parent().parent().id;
for (var i = 0; i < tableData.length; i++) {
if (tableData[i].rowValue === thisId) {
tableData.splice(thisId, 1);
}
}
$(this).parent().parent().remove();
});
}
}
HTML
"<div id='" + tableData[i].rowValue + "' class=\"Row\">" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].textInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].perIntervalInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].radioInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<button class=\"deleteButton\">Delete</button>" +
"</div>" +
"</div>"
ID is an attribute and so can be reference via the attr(..) function.
var thisId = $(this).parent().parent().attr("id");
Since you're using jQuery, you can use:
var thisId = $(this).parent().parent().attr('id');
But your HTML isn't here to show us what you're actually referencing, and whether you're referencing it properly, so there might be something else in play.

jQuery post() code - how to make cleaner and faster? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm in the midst of learning how to code.
The code below shows what happens after I click a button - a jQuery post() call is made which submits the data to a PHP form and then displays the result from the database query into a div.
The code is fine, but I'm simply wondering if there's any way to make it better.
By better, I mean if there is any way to make the code more readable, faster, and less buggy.
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
var test_for_null = product_details_array[0];
if ( test_for_null.length > 0)
{
$('#product_tags_container').append(
"<div class='product_tags'>" + "<img id='remove_tag' src='../function icons/cross.png'>" + "<div id='product_texture_picture'>" + "<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" + "</div>" + "<div id='product_title'>" + product_details_array[0] + "</div>" + "<br><br>" + "<div id='product_brand'>" + product_details_array[6] + "</div>" + "<div id='product_price'>"+ product_details_array[3] + "</div>" + "</div>");
}
});
I cleaned up all the unnecessary concatenation within your append function. The append function is too long to maintain in my opinion. I'm guessing your server side responses
No response: ''
JSON array is null: null
JSON array is empty: []
$.post("load_product.php", {
id: IDname
}).done(function(data) {
if (data.length>0 && data!=null && data!='[]') {
var product_details_array = $.parseJSON(data);
$('#product_tags_container').append("<div class='product_tags'><img id='remove_tag' src='../function icons/cross.png'><div id='product_texture_picture'><img src='product_pictures/" + product_details_array[4] + product_details_array[5] + "'></div><div id='product_title'>" + product_details_array[0] + "</div><br><br><div id='product_brand'>" + product_details_array[6] + "</div><div id='product_price'>" + product_details_array[3] + "</div></div>");
}
}
});
You don't have to use this, but if I had to 'remake' this code, I'd do it like this:
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(
"<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>");
}
});
In my opinion this is more readable. If I had to read your 1-line html code I'd re-format it to look like the example I gave first. If you or anyone else has to make an edit it would be easier to do like this.
EDIT:
function assembleProductHTML(product_details_array) {
return "<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>";
}
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(assembleProductHTML(product_details_array));
}
});

SyntaxError: missing ; before statement .each [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
function readMessages(data, textStatus)
{
clearChat = data.clear;
if (clearChat == 'true') {
$('#chatmessageinner')[0].innerHTML = "";
lastMessageID = -1;
}
if (data.messages.length > 0)
{
if(lastMessageID > data.messages[0].id) return;
lastMessageID = data.messages[data.messages.length - 1].id;
}
$.each(data.messages, function(i, message) {
var htmlMessage = "";
htmlMessage += "<div class="item" style="color:" + message.color + "">";
htmlMessage += "[" + message.time + "] " + message.name + " said: <br/>";
htmlMessage += message.message;
htmlMessage += "</div>";
$('#chatmessageinner')[0].innerHTML += htmlMessage;
});
}
This is function, error is:
SyntaxError: missing ; before statement
In line $.each(data.messages, function(i, message) {
What is wrong? Help me, please.
You have to escape your string:
htmlMessage += "<div class="item" style="color:" + message.color + "">";
This is wrong and should be:
htmlMessage += "<div class=\"item\" style=\"color:" + message.color + "\">";
Or, better, use the single quotes:
htmlMessage += '<div class="item" style="color:' + message.color + '">';
I think your problem is this line
htmlMessage += "<div class="item" style="color:" + message.color + "">";
You're using double quotes inside double quotes, should be like
htmlMessage += "<div class=\"item\" style=\"color:" + message.color + "\">";
The code building a string is a bit off.
$.each(data.messages, function(i, message) {
var htmlMessage = "";
htmlMessage += "<div class='item' style='color:" + message.color + "'>";
htmlMessage += "[" + message.time + "] " + message.name + " said: <br/>";
htmlMessage += message.message;
htmlMessage += "</div>";
$('#chatmessageinner')[0].innerHTML += htmlMessage;
});

Missing before statement

I have the following piece of code that I would like to style:
var dateString = val.date; // this display my blog post date e.g. "2013-09-02 15:04:50"
var split = dateString.split(' ');
output += '<div class="postxt">' (split[0] +" at "+ split[1]) '</div>';
How can I add a span or a div for both split0 & split1
Thanks
Just add the SPAN to the HTML, the same way you do the DIV.
output += '<div class="postxt"><span class="date">' + split[0] +
'</span> at <span class="time">' + split[1] + '</span></div>';
You also need to use + to concatenate the HTML elements with the variables.
Your braces should be pluses in the last line:
output += '<div class="postxt">' + split[0] + " at " + split[1] + '</div>';
Note that you can leave the braces in, but they are neither required nor do they make any differences when concatenating strings:
output += '<div class="postxt">' + (split[0] + " at " + split[1]) + '</div>';
Add whatever divs, spans, style classes you want:
output += '<div class="postxt"><span class="foo">' + split[0] + "</span> at <span class="bar">" + split[1] + '</span></div>';
The error "Missing ... before statement" you got was only on the JavaScript level, it has nothing to do with adding further HTML elements.

Categories

Resources