basically I need help to display data in a table using the "td" and "tr" tags.
html += '<table class="table table-striped">';
for(var i in value){
if(!number_regex.test(i)){
html += '<tr>';
html += '<td>' + i + '</td>';
if(i == 'image_link'){
html += '<td> : ' + '<img src=' + value.image_link + ' alt>' + '</td>';
}
else{
html += '<td> : ' + value[i] + '</td>';
}
html += '</tr>';
}
}
html += '</table><br/>';
This is my current code where the value is an object. This outputs one "td" in each "tr". I'm trying to align 2 "td"s in one "tr". However, this cannot be accomplished through next(i) or (i+1) as it isn't a number.
This is what I have tried so far to no avail:
html += '<td>' + next(i) + '</td>';
if(next(i) == 'image_link'){
html += '<td> : ' + '<img src=' + value.image_link + ' alt>' + '</td>';
}
else{
html += '<td> : ' + value[next(i)] + '</td>';
}
and:
html += '<table class="table table-striped">';
html += '<tr>';
for(var i in value){
if(!number_regex.test(i)){
html += '<td>' + i + '</td>';
if(i == 'image_link'){
html += '<td> : ' + '<img src=' + value.image_link + ' alt>' + '</td>';
}
else{
html += '<td> : ' + value[i] + '</td>';
console.log(data);
}
for(var counter = 0; counter <= 8; counter++){
//8 because there are 9 fields in the query I want to display
if(counter % 2 == '0'){
html += '</tr>';
html += '<tr>';
}
}
}
Any idea guys?
These are the additional information that some of you requested:
A picture of the table I have atm:
https://www.dropbox.com/s/kmhkwturtmcxovh/lala.png
and as for the html, this is a javascript syntax, which is why I'm using html in this manner.
Take a variable and place it in the loop, which does the job of ending the rows by adding </tr>...something like :
This is what you have right now :
html += '</tr>';
amend it to something like :
$var = 0; /* initiaize it somewhere outside for(var i in value) */
if(++$var < 2)
{
/* do not echo </tr> if 2 td's haven't been added */
}
else /* 2 td's have been added, end this row */
{
$var = 0; /* reset counter*/
html += '</tr>'; /* end rows */
}
Related
$.post("#", params).then(function (response) {
if (obj['error'] != 1) {
var html = '';
for (var i = 0; i < response['data'].length; i++) {
console.log('data' + i, response['data'][i]);
html += '<tr>';
html += '<td>' + response['data'][i]['wallet_type'] + '</td>';
html += '<td>' + response['data'][i]['balance'] + '</td>';
html += '<td>' + response['data'][i]['wallet_address'] + '</td>';
html += '</tr>';
}
}
});
I found
Uncaught TypeError: Cannot read property 'length' of undefined
in the console for that i cannot able to display my result.
First you need to check your response array in console something missing in your response.i think your response array does not set.
ex. console.log(response);
<script>
var response={"data":[{"id":556,"user_id":333,"email":"alokkr#dispostable.com","name":"alokkr#dispostable.com","wallet_id":"5ab7dfaa39062807cc3d0659a5ee9634","wallet_address":"QNqpGLNDhsCLWsqbz4joJHnh7QBQYhWQhz","wallet_type":"ltc","balance":0,"is_custom":false,"is_test":"0","created":"2018-03-25T17:44:50","updated":null},],"error":0,"msg":[]}
//console.log(response['data'].length);
var html='';
for (var i = 0; i < response['data'].length; i++) {
console.log('data' + i, response['data'][i]);
html += "<table border='1'>";
html += "<tr>";
html += '<td>' + response['data'][i]['wallet_type'] + '</td>';
html += '<td>' + response['data'][i]['balance'] + '</td>';
html += '<td>' + response['data'][i]['wallet_address'] + '</td>';
html += '</tr>';
html += '</table>';
}
document.write(html);
</script>
I created a Reports module in a medication administration webapp.
A medication can be stopped, and when it happens, it's value in the database turns to 1 (1=stopped 0=active). I need the report to show "STOPED" in the "administered by" column instead of the administrator's name when a medication is stopped so here is my code, but it's not working :( It returns "STOPED" for everything. What am I doing wrong ?
Any help will be appreciated!
for (var i = 0; i < medi.length; i++) {
keys_str += "<tr>";
keys_str += "<td>" + medi[i].date + "</td>";
if (medi[i].isprn == 'y' || medi[i].isprn == "Y")
keys_str += "<td>PRN</td>";
else
keys_str += "<td>" + medi[i].time + "</td>";
keys_str += "<td>" + medi[i].medicationame + "</td>";
keys_str += "<td>" + medi[i].dosage + "</td>";
if (medi[i].is_stop !== '1' || medi[i].is_stop !== "1")
keys_str += "<td>STOPED</td>";
else
keys_str += "<td>" + medi[i].administeredby + "</td>";
keys_str += "<td>" + medi[i].witness + "</td>";
keys_str += "<td>" + medi[i].notes + "</td>";
keys_str += "<td > <img width='150px' src='" + medi[i].e_sign + "' /></td>";
keys_str += "</tr>";
}
$("#medication_hid_pdf").html();
$("#medication_hid_pdf").html(keys_str);
var date;
var time;
var medicationame;
var dosage;
var addministered;
var witness;
var str = "";
var count = 0;
for (property in medi) {
if (medi.hasOwnProperty(property)) {
str += "<tr class='gradeX'>";
date = medi[count].date;
time = medi[count].time;
medicationame = medi[count].medicationame;
dosage = medi[count].dosage;
addministered = medi[count].administeredby;
witness = medi[count].witness;
mid = medi[count].id;
str += "<td>" + date + "</td>";
if (medi[count].isprn == 'y' || medi[count].isprn == "Y")
str += "<td>PRN</td>";
else
str += "<td>" + time + "</td>";
str += "<td>" + medicationame + "</td>";
str += "<td>" + dosage + "</td>";
if (medi[count].is_stop !== '1' || medi[count].is_stop !== "1")
str += "<td>STOPED</td>";
str += "<td>" + addministered + "</td>";
str += "<td>" + witness + "</td>";
str += "<td>" + medi[count].notes + " </td>";
str += "<td ><img width='150px' src='" + medi[count].e_sign + "' /> </td>";
str += "</tr>";
count++;
}
}
$("#medicationreport_data").html(str);
}
});
I don't know exactly what your error is, but there is a lot of minor "issues" and messyness.
Now as this question is tagged PHP and you mention getting the data from the database I will assume that there is some PHP file giving this data to Javascript. How that is happening I cant tell by what is posted.
But my point is, that you should format as much of this data as you can on the PHP ( backend ) side of things. Most of this is stuff like:
....
if (medi[count].isprn == 'y' || medi[count].isprn == "Y")
str += "<td>PRN</td>";
else
str += "<td>" + time + "</td>";
....
if (medi[i].is_stop !== '1' || medi[i].is_stop !== "1")
keys_str += "<td>STOPED</td>";
else
keys_str += "<td>" + medi[i].administeredby + "</td>";
......
Basically we are just checking a value and changing it, so here PHP's loosly typed nature will help you more then JavaScripts weakly typed.
In PHP this would be something like this
$formatted = [];
foreach( $medi as $row ){
$data = []; //create a clean array if you have to
$data['isprn'] = strtolower($row['isprn']) == 'y' ? 'PRN' : $row['time'];
$data['is_stop'] = $row['is_stop'] != '1' ? 'STOPED' : '';
//include other stuff in $data you need
$formatted[] = $row;
}
Then if you get it clean enough, in Javascript you can do stuff like this
var str = '';
for (var i = 0; i < medi.length; i++) {
str += '<tr>';
str += '<td>' + medi[i].join('</td><td>') + '</td>';
str += '</tr>';
}
There are many many ways to do this, and there is a lot of "necessary" information missing for me to really be able to do much more. But I would "Strongly" suggest, normalizing all this data on the server side as best as can be done. Then on the client side you will really reduce the amount of work needed to display it to the end user.
I am trying post my json result in table format how should achieve that.Igot result as
I want it to display in table format .Here is my code
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"> </script>
</head>
<body>
<h3>Output: </h3>
<div id="output">this element will be accessed by jquery and this text replaced</div>
<script id="source" language="javascript" type="text/javascript">
$(function ()
{
$.ajax({
url: 'example.php',
data: "",
dataType: 'json',
success: function(data)
{
var html = "";
for(var i = 0; i < data.length; i++){
var uid = data[i].uid;
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var email = data[i].email;
var username = data[i].username;
var password = data[i].password;
html += "<b>uid: </b>"+uid+"<b> firstname: </b>"+firstname+"<b> lastname: </b>"+lastname+"<b> email: </b>"+email+"<b> username: </b>"+username+"<b> password: </b>"+password;
}
$("#output").html( html );
}
});
});
</script>
</body>
</html>
the output is stored in var html what should I need to convert it into table format.
Just change this part of code to format table instead just bold text:
...
var html = "<table>";
html += "<thead><tr><th>UID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Username</th><th>Password</th></tr></thead>";
html += "<tbody>";
for(var i = 0; i < data.length; i++){
html += "<tr>";
var uid = data[i].uid;
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var email = data[i].email;
var username = data[i].username;
var password = data[i].password;
html += "<td>"+uid+"</td><td>"+firstname+"</td><td>"+lastname+"</td><td>"+email+"</td><td>"+username+"</td><td>"+password+"</td></tr>";
}
html +="</tbody></table>";
...
I hope that's what you mean.
Try:
var html = "<table>";
html += "<thead>";
html += "<tr>";
html += "<th>Uid</th>";
html += "<th>Firstname</th>";
html += "<th>Lastname</th>";
html += "<th>Email</th>";
html += "<th>Username</th>";
html += "<th>Password</th>";
html += "<tr>";
html += "</thead>";
html += "<tbody>";
for (var i = 0; i < data.length; i++) {
var uid = data[i].uid;
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var email = data[i].email;
var username = data[i].username;
var password = data[i].password;
html += "<tr>";
html += "<td>" + uid + "</td>";
html += "<td>" + firstname + "</td>";
html += "<td>" + lastname + "</td>";
html += "<td>" + email + "</td>";
html += "<td>" + username + "</td>";
html += "<td>" + password + "</td>";
html += "</tr>";
}
html += "</tbody>";
$("#output").html(html);
You can either directly create the Table within Javascript or within the PHP Script that returns the JSON Data however since you didn't show us your PHP Script, we'd go the Javascript Route like so:
<script id="source" language="javascript" type="text/javascript">
$(function () {
$.ajax({
url : 'example.php',
data : "",
dataType: 'json',
success : function(data) {
var html = "<table class='data-tbl'>";
html += "<tr class='data-head-row'>";
html += "<th class='data-head-cell'>UID</th>";
html += "<th class='data-head-cell'>First Name</th>";
html += "<th class='data-head-cell'>Last Name</th>";
html += "<th class='data-head-cell'>Email</th>";
html += "<th class='data-head-cell'>Username</th>";
html += "<th class='data-head-cell'>Password</th>";
html += "</tr>";
html += "<tbody class='data-content-body'>";
for(var i = 0; i < data.length; i++){
var uid = data[i].uid;
var firstname = data[i].firstname;
var lastname = data[i].lastname;
var email = data[i].email;
var username = data[i].username;
var password = data[i].password;
html += "<tr class='data-content-row'>";
html += "<td class='data-content-cell'>" + uid + "</td>";
html += "<td class='data-content-cell'>" + firstname + "</td>";
html += "<td class='data-content-cell'>" + lastname + "</td>";
html += "<td class='data-content-cell'>" + email + "</td>";
html += "<td class='data-content-cell'>" + username + "</td>";
html += "<td class='data-content-cell'>" + password + "</td>";
html += "</tr>";
}
html += "</tbody>";
html += "</table>";
$("#output").html( html );
}
});
});
</script>
I'm trying to built a search for a website and i'm having trouble in making it work right.
I want to get the query from POST (or link using GET) after submiting the form. post it to a php and return the json back to results div
.
I tried to post it with ajax but i cant make it right.
The url that returns json must have all the query values (cars.php?company_id=1&model_id=1&car_category=compact&priceFrom=min&priceTo=max&kmFrom=all&kmTo=all&yearFrom=all&yearTo=all) or retuns a specific query (with all the results from table)
$(document).ready(function () {
$("form1#submit").submit(function () {
$.ajax({
type: 'POST',
url: './system/feeds/cars.results.php',
data: $(this).serialize(),
success: function () {
$.getJSON('./system/feeds/cars.results.php', function (json) {
var output = '';
for (var i = 0; i < json.car.length; i++) {
output += '<div class="grid_12">';
output += '<div class="block3">';
output += '<img src="images/' + json.car[i].car_image + '" alt="" class="img_fleft img-rounded">';
output += '<div class="wrapper border_block">';
output += '<div class="marg2">';
output += '<div class="grid_6 alpha">';
output += '<strong>' + json.car[i].car_company + ' ' + json.car[i].car_model + ' ' + json.car[i].car_cc + '</strong><br>' + json.car[i].car_category + ', ' + json.car[i].car_combustible + ', ' + json.car[i].car_bhp + ' bhp</br></br>';
output += '<hr>';
output += '<p>' + json.car[i].car_description + '</p>';
output += 'read more';
output += '</div>';
output += '<div class="grid_3 omega">';
output += '<h4>Χρονολογία:</h4> <a class="btn">' + json.car[i].car_month + '/' + json.car[i].car_year + '</a><br>';
output += '<h4>Χιλιόμετρα:</h4> <a class="btn">' + json.car[i].car_km + '</a><br>';
output += '<h4>Τιμή:</h4> <a class="btn">€ ' + json.car[i].car_price + '</a><br>';
output += '</div>';
output += '</div>';
output += '</div>';
output += '</div>';
output += '</div>';
output += '<div class="clear"></div>';
}
$('#cars-results').html(output);
$('#car_counter').html(json.car.length);
});
}
});
});
});
The json php returns results when u POST a query like car.results.php?company_id=1&model_id=1
car.results.php - Demo code (not basic yet)
<? include ('../config.php');
if (isset($_REQUEST['company_id']) && isset($_REQUEST['model_id'])) {
$company_id = $_REQUEST['company_id'];
$model_id = $_REQUEST['model_id'];
$car_category = $_REQUEST['car_category'];
$priceFrom = $_REQUEST['priceFrom'];
$priceTo = $_REQUEST['priceTo'];
$kmFrom = $_REQUEST['kmFrom'];
$kmTo = $_REQUEST['kmTo'];
$yearFrom = $_REQUEST['yearFrom'];
$yearTo = $_REQUEST['yearTo'];
$result = mysql_query("SELECT * FROM `cars` WHERE `company_id` = '$company_id' AND `model_id` = '$model_id'") or die("Couldn’t get data from database");
} else {
$result = mysql_query("SELECT * FROM `cars` ORDER BY `datetime` DESC LIMIT 3") or die("Couldn’t get data from database");
}
// Create JSON
$json = array();
while($row = mysql_fetch_array($result)) {
$car = array('car_image' => $row['car_image'],
'car_link' => "car.php?id=".$row['car_id'],
'car_company' => $row['company_id'],
'car_model' => $row['model_id'],
'car_cc' => $row['car_cc'],
'car_category' => $row['car_category'],
'car_combustible' => $row['car_combustible'],
'car_bhp' => $row['car_bhp'],
'car_description' => $row['car_description'],
'car_month' => $row['car_month'],
'car_year' => $row['car_year'],
'car_km' => $row['car_km'],
'car_price' => $row['car_price']);
array_push($json,$car);
}
// header('Content-type: application/json');
echo "{\"car\":".json_encode($json)."}";
ob_flush(); ?>
Any suggestions ?
There are a lot of syntax highlighters out there but something I have not seen is one that supports highlighting query strings!
I'm looking for something to use when documenting my API and well being an API there are a lot of query strings involved. so. What good javascript or PHP syntax highlighters are there that support query strings?
I have looked into Google code prettify, highlight.js, prismjs and a few others but none of them seem to be able to highlight this:
/oauth/authorize?client_id=wG2X7q1qz74zdSbgiFkyL5JFOeloQwg2opfrPfaJ&response_type=code&redirect_uri=https%3A%2F%2Fmyapplication.com%2Foauth&scope=account%2Ccompetition%2Cvideos&state=d41d8cd98f00b204e9800998ecf8427e
Which should highlight all the keys on one colour, and all the values in another with the &?= being a different colour again... something like:
As far as i am concerned all characters like '?', '&' and '=' should be replaced in names / values in a proper URL. This makes it super easy to parse.
So why not invent something on your own:
function parseQuery(query){
parsed = query.split('?');
if (parsed.length > 1) {
parsed[1] = parsed[1].split('&');
for(i in parsed[1]) {
parsed[1][i] = parsed[1][i].split('=');
}
}
retStr = '<span class="path">' + parsed[0] + '</span>';
if (parsed.length > 1) {
retStr += '<span class="qm">?</span>';
first = true;
for(i in parsed[1]) {
if (first) {
first = false;
} else {
retStr += '<span class="amp">&</span>';
}
retStr += '<span class="name">' + parsed[1][i][0] + '</span>';
if (parsed[1][i].length > 1) {
retStr += '<span class="eq">=</span>' +
'<span class="value">' + parsed[1][i][1] + '</span>';
}
if (parsed[1][i].length > 2) {
for (var j = 2; j < parsed[1][i].length; j++) {
retStr += '<span class="eq">=</span>';
retStr += '<span class="error">' + parsed[1][i][j] + '</span>';
}
}
}
}
if (parsed.length > 2) {
for (var i = 2; i < parsed.length; i++) {
retStr += '<span class="qm">?</span>';
retStr += '<span class="error">' + parsed[i] + '</span>';
}
}
return retStr;
}
http://jsfiddle.net/YqrpV/1/