Develop Reference

JQuery Iterate through JSON and print into html

I have a JSON list, which can have an array of "OrderLines" , within this array is other data such as part number, price etc...
I want to be able to print/display each "OrderLine" and its data in some HTML elements/tags, for each order-line the HTML elements are to be repeated, meaning I don't want e.g. all Part-Numbers to be in the SAME div tag, hopefully the code below will make sense as to what I want to achieve
{
"Depot": 4,
"DocumentType": "Sales Order",
"DocumentNumber": "123",
"OrderDate": "2022-06-23T09:09:12+01:00",
"OrderReference": "TEST",
"OrderedBy": "",
"ContactName": "",
"AccountCode": "EXAMPLE",
"CustomerName": "EXAMPLE",
"CustomerAddress1": "EXAMPLE",
"CustomerAddress2": "EXAMPLE",
"CustomerAddress3": "EXAMPLE",
"CustomerAddress4": "EXAMPLE",
"DepotVATNumber": "GB EXAMPLE",
"DeliveryName": "EXAMPLE",
"DeliveryAddress1": "EXAMPLE",
"DeliveryAddress2": "EXAMPLE",
"DeliveryAddress3": "EXAMPLE",
"DeliveryAddress4": "EXAMPLE",
"OrderLines": [
{
"PartNumber": "EXAMPLE",
"Description": "EXAMPLE",
"IncludeCostCodes": false,
"MaterialCode": "0",
"CostCentre": "",
"Quantity": 2,
"Price": 9.5,
"TotalAmount": 19,
"VATRate": 20
}
{
"PartNumber": "EXAMPLE 2",
"Description": "EXAMPLE 2",
"IncludeCostCodes": false,
"MaterialCode": "0",
"CostCentre": "",
"Quantity": 0,
"Price": 0,
"TotalAmount": 0,
"VATRate": 0
}
],
"TotalGoods": 19,
"TotalVat": 3.8,
"GrandTotal": 22.8
}
JQuery
<script>
let order = #Html.Raw(Model.Content);
$('.billaddN').text(order.CustomerName + "," );
$('.billadd1').text(order.CustomerAddress1 + "," );
$('.billadd2').text(order.CustomerAddress2 + "," );
$('.billadd3').text(order.CustomerAddress3 + "," );
$('.billadd4').text(order.CustomerAddress4);
$('.shippadd1').text(order.DeliveryAddress1 + "," );
$('.shippadd2').text(order.DeliveryAddress2 + "," );
$('.shippadd3').text(order.DeliveryAddress3 + "," );
$('.shippadd4').text(order.DeliveryAddress4);
$('.shippaddN').text(order.DeliveryName + "," );
$('.ordRef').text(order.OrderReference);
$('.ordNo').text(order.DocumentNumber);
$('.ordDate').text(order.OrderDate);
$('.ordBy').text(order.OrderedBy);
$('.subtotal').text("£" + order.TotalGoods);
$('.totalvat').text("£" + order.TotalVat);
$('.total').text("£" + order.GrandTotal);
$('.vatNo').text(order.DepotVATNumber);
$('.accountNo').text(order.AccountCode);
$(order.OrderLines).each(function(i,e) {
$(".order-lines-container").append(
'<tr>
<td width="80%">
<span class="font-weight-bold">order.PartNumber[i]</span>
<div class="product-qty">
<span class="d-block">order.Description[i]</span>
<span>Color</span>
</div>
</td>
<td width="20%">
<div class="text-right">
<span class="font-weight-bold">order.Price[i]</span>
</div>
</td>
</tr>'
)});
</script>

Your code is almost there, the issue you have is that your each() loop doesn't reference the specific line in the array you're iterating through.
In addition, the looping code can be simplified and made more performant by using map() to create an array of strings which you then append to the DOM just once.
Here's a working example:
var order = {Depot:4,DocumentType:"Sales Order",DocumentNumber:"123",OrderDate:"2022-06-23T09:09:12+01:00",OrderReference:"TEST",OrderedBy:"",ContactName:"",AccountCode:"EXAMPLE",CustomerName:"EXAMPLE",CustomerAddress1:"EXAMPLE",CustomerAddress2:"EXAMPLE",CustomerAddress3:"EXAMPLE",CustomerAddress4:"EXAMPLE",DepotVATNumber:"GB EXAMPLE",DeliveryName:"EXAMPLE",DeliveryAddress1:"EXAMPLE",DeliveryAddress2:"EXAMPLE",DeliveryAddress3:"EXAMPLE",DeliveryAddress4:"EXAMPLE",OrderLines:[{PartNumber:"EXAMPLE",Description:"EXAMPLE",IncludeCostCodes:!1,MaterialCode:"0",CostCentre:"",Quantity:2,Price:9.5,TotalAmount:19,VATRate:20},{PartNumber:"EXAMPLE 2",Description:"EXAMPLE 2",IncludeCostCodes:!1,MaterialCode:"0",CostCentre:"",Quantity:0,Price:0,TotalAmount:0,VATRate:0}],TotalGoods:19,TotalVat:3.8,GrandTotal:22.8}
let rows = order.OrderLines.map(line => `
<tr>
<td width="80%">
<span class="font-weight-bold">${line.PartNumber}</span>
<div class="product-qty">
<span class="d-block">${line.Description}</span>
<span>Color</span>
</div>
</td>
<td width="20%">
<div class="text-right">
<span class="font-weight-bold">${line.Price}</span>
</div>
</td>
</tr>`);
$(".order-lines-container").append(rows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="order-lines-container"></table>

Datatable with several input options

My goal is: I would like to use datatable with multiple filtering options. for this purpose all files should be separated from each other (means that there is an html, js, php file) and read from a database. however, with my current code in js i get the error message:
ReferenceError: $ is not defined
I'm new in this area, could someone have found a suitable manual for my application? everything on the internet has been coded into one or two files. I use also smarty.
My Files:
test.php
<?php
require_once './Smarty/libs/Smarty.class.php';
echo "<script src=\"javascripts/test.js?v=3\" type=\"text/javascript\"></script>";
echo "<script src=\"javascripts/jquery.js?v=3\" type=\"text/javascript\"></script>";
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css\">";
$smarty = new Smarty();
$smarty->display('test.tpl');
test.js
$(document).ready(function() {
$('#datatables-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "testHelper.php?action=listmovies",
type: "post",
datafilter: function(data){
var json = jQuery.parseJSON(data);
if (json.error){
console.log(json.error);
}
}
},
columns: [
{"data": "test", "name": "test", "title": "Test"},
{"data": "test2", "name": "test2", "title": "Test2"},
]
});
} );
test.tpl
<main class="content">
<table id="datatables-table" class="table table-striped table-hover" style="width:100%"></table>
</main>
testHelper.php
<?php
if($_REQUEST['action'] == "listmovies"){
$data = array();
$value['test1'] = utf8_encode("test1");
$value['test1'] = utf8_encode("test1");
$data[] = $value;
$value2['test2'] = utf8_encode("test2");
$value2['test2'] = utf8_encode("test2");
$data[] = $value2;
$return['data'] = $data;
echo json_encode($return);
}

Handle SQL/PHP output and convert into java

I have no idea how i do this, i have some pieces of code, that i need to "handle" and use in javascript for some search engine
This is what i have in my database
[
["Reparation", "Pris"],
["Fejlfinding", "Gratis"],
["Udskiftning af Skærm (Refurbished)", "3699,-"]
]
This is what i need it to look like after i get it from the database and it has been handled.
var searchChoices = {
"Name": {
"Model Name": {
"icons": {
"dark": "Imagelink",
"light": "imagelink"
},
"items": [
{
"headline": "Gratis",
"text": "Fejlfinding"
},
{
"headline": "3699",
"text": "Udskiftning af Skærm (Refurbished)"
}
]
}
}
};
I have really no idea how to do this? I don't even know what it's called.
Can someone please help me, or point me in the right way?
Thanks

I think you should use php json_encode function to send data to javascript. You can make something like this:
<script>
var data = <?=json_encode($data);?>
...
Next step is simple loop to add items:
for(var row in data)
searchChoices["Name"]["Model name"].items.push({
"headline": data[row][1],
"text": data[row][0]
});
You can also generate whole javascript object using PHP:
<script>
var searchChoices = {
"Name": {
"Model Name": {
"icons": {
"dark": "Imagelink",
"light": "imagelink"
},
"items": [
<?php
foreach($data as $row)
echo '{"headline": "' . $row[1] . '", "text": "' . $row[0] . '"},';
?>
]
}
}
};

OK, this is another solution, regular expression:
(\[\"(.+)\"\,\ ?\"(.+)\"\]\,?)
The next step is to get data from preg_match_all result.
This is simple script i wrote to test:
<?php
$data = <<<JS
[
["Reparation", "Pris"],
["Fejlfinding", "Gratis"],
["Udskiftning af Skærm (Refurbished)", "3699,-"]
]
JS;
$pattern = '/(\[\"(.+)\"\,\ ?\"(.+)\"\]\,?)/';
$matches = [];
$result = preg_match_all($pattern, $data, $matches);
for($i=0, $j=count($matches[2]); $i<$j; $i++) {
echo '{"headline": "' . $matches[3][$i] . '", "text": "' . $matches[2][$i] . '"},' . "\n";
}

Unexpected Idenifier in Javascript running with Laravel

I am working with Laravel and implementing Google Tag manager. I am pushing an object into Google's data layer with an event.
<a href="javascript:void(0)" class="btn btn-default" id="step1"
onclick="dataLayer.push({
#foreach(Cart::content() as $content)
#if($loop->first)
'id': '{{$content->rowId}}',
'affiliation':'Gazebo',
'revenue':'{{Cart::total()}}',
#endif
#endforeach
'transactionProductts':[
#foreach(Cart::content() as $cart)
{
'sku': '{{$cart->id}}',
'price': '{{$cart->subtotal}}',
'name':'{{$cart->name}}'
}
#if($loop->iteration != $loop->last)
,
#endif
#endforeach
})">Continue.</a>
And after it has rendered it looks like this in page source
<a href="javascript:void(0)" class="btn btn-default" id="step1" onclick="dataLayer.push({
"affiliation": "foo-bar",
"id": "id1",
"revenue": "146.96",
"transactionProductts": [
{
"name": "Video1",
"price": "2.99",
"sku": "23409"
},
{
"name": "Video2",
"price": "3.99",
"sku": "21598"
},
{
"name": "Video 3",
"price": "129.99",
"sku": "23430"
},
{
"name": "Mozart's Magic Flute Diaries ",
"price": "2.99",
"sku": "22370"
}
]
})">Continue.</a>
I am thinking that it is my last conditional statement and adding the comma, because it works fine when I dont have the comma there, but I need to wrap in conditional statement so it doesn't add a comma at the end of the array and it gives me the "unexpected identifier" error
Any help greatly appreciated

Build the json string first and trim the trailing comma:
#php
$json = ''
foreach(Cart::content() as $idx => $content) {
if ($idx === 0) {
$json .= "id: ${content->rowId},";
$json .= "affiliation:'Gazebo',";
$json .= "revenue: " . Cart::total() . ",";
}
}
$json .= 'transactionProductts:[';
foreach(Cart::content() as $cart) {
$json .= "{sku: ${cart->id},";
$json .= "price: ${cart->subtotal,";
$json .= "name: ${cart->name}},";
}
$final = trim($json, ',') . ']';
#endphp
onclick="dataLayer.push({ {{ $final }} })"

creating dynamic html emails with angularJS and mail with php

I have been trying to solve this and have been looking everywhere. Apologies in advance if this sounds stupid or there is a duplicate question somewhere that I have missed.
I am trying to create dynamic email content and send the email via php mail. I want to use angularJS to compile the html content and using $http.post method send to a submit.php to send email.
I can manually enter in the html content in php and no problem but having a compiled dynamic html is the issue.
I am really not too sure how to tackle this, so any help would be much appreciated.
Thanks,
My angular controller:
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message }).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
}
}
submit.php
$post_date = file_get_contents("php://input");
$data = json_decode($post_date);
$to = $data->email;
$from = "John#example.com";
$name = $data->name;
$subject = "Email from AngularJS";
$htmlContent = $data->message;
I have added my code below :
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic Email AngularJS</title>
</head>
<body ng-app="myApp" ng-cloak>
<div ng-controller="formCtrl">
<pre ng-model="result">
{{result}}
</pre>
<form name="userForm">
<input type="text" class="form-control" ng-model="$parent.name" placeholder="Name Lastname" required>
<input type="text" class="form-control" ng-model="$parent.email" placeholder="me#email.com" required>
<div ng-view></div>
<button ng-click="add()">New Item</button>
<button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid">Submit </button>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.3/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:
myApp.controller("formCtrl", ['$scope', '$http','$templateRequest','$compile', function($scope, $http, $templateRequest, $compile) {
$scope.lists = [
{
"year":"year I",
"semesters":[
{
"label": "Semester I",
"max": "4",
"courses": [
{"name": "Introductory Accounting I", "type": "populated"},
{"name": "Principles of Economics I", "type": "populated"},
]
},
{
"label": "Semester II",
"max": "4",
"courses": [
{"name": "Accounting Method II", "type": "populated"},
]
}
]
},
{
"year":"year II",
"semesters":[
{
"label": "Semester I",
"max": "4",
"courses": [
{"name": "Introductory Accounting I", "type": "levelII"},
{"name": "Business Finance I", "type": "levelII"}
]
},
{
"label": "Semester II",
"max": "4",
"courses": [
{"name": "Accounting Method II", "type": "levelII"},
{"name": "Management Accounting II", "type": "levelII"},
]
}
]
}
]
$scope.add = function () {
$scope.lists.push(
{
"year":"year III",
"semesters":[
{
"label": "Semester I",
"max": "4",
"courses": [
{"name": "Introductory Accounting I", "type": "levelII"},
{"name": "Business Finance I", "type": "levelII"}
]
},
{
"label": "Semester II",
"max": "4",
"courses": [
{"name": "Accounting Method II", "type": "levelII"},
{"name": "Management Accounting II", "type": "levelII"},
]
}
]
});
}
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$templateRequest('email.html').then(function(html) {
$scope.contentHtml = $compile(html);
});
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.contentHtml }).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
}else{
alert('Form is not valid');
}
}
}]);
submit.php:
<?php
$post_date = file_get_contents("php://input");
$data = json_decode($post_date);
$to = $data->email;
$from = "Sam#example.com";
$name = $data->name;
$subject = "Dynamic Email";
$htmlContent = $data->message;
// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers
$headers .= 'From: '.$from . "\r\n";
if(mail($to,$subject,$htmlContent,$headers)) {
echo "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
} else {
echo 'Sorry there was an error sending your message. Please try again later.';
}
echo "Name : ".$data->name."\n";
echo "Email : ".$data->email."\n";
echo "Hero : ".$data->hero."\n";
echo "Message": $htmlContent;
?>
email.html
<table ng-repeat="list in lists">
<tr>
<td>
<h1>{{list.year}}</h1>
</td>
</tr>
<tr>
<td ng-repeat="semester in list.semesters">
<table>
<tr>
<td>
<h3>{{semester.label}}</h3>
<ul>
<li ng-repeat="course in semester.courses">{{course.name}}</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>

I had to do the very same thing. But my setup is somewhat different. My Backend is a Firebase.com database. Loaded into my frontend via angularFire, the library for loading stuff into an angular project. I have a mail template in the front-end. In fact, i plan to let users choose their e-mail template from several provided ones. I just fill in the fields, a but like a mail-merge in MS-Office.
On the serverside, i'm using php-mailer (google it!)
In big lines, this is what's happening:
- Create vars like mailTo (all the emails where i have to send mail to) and bind them to the $scope (yeah i know i shouldn't do that but stay with me)
- other stuf from the database records that should be in the mail, i bind to the $scope again.
- and then i do this:
$templateRequest("templates/mail-packs/mail-1.html")
.then(function(emailtemplate) {
var base = angular.element('<div></div>');
base.html(emailtemplate);
$compile(base)($scope);
$timeout(function(){
mail = base.html()
console.log(mail);
constructMail(mail)
}, 300)
})
the base variabel was needed beceause you are not compling to the DOM. You have to trick angular there and start with a blank DOM.
The function constructMail() is a function just doing that, prepping the data to send to the php-mailer.

I have successfully implemented this architecture in my one project. I have created separate service to get email template. I passed URL and $scope object to getTemplate() method and this method will return compiled email template to me.
templateService.js
angular.module('myApp').factory("TemplateService", ['$resource', '$q', '$rootScope', '$templateRequest', '$compile', '$timeout', function ($resource, $q, $rootScope, $templateRequest, $compile, $timeout) {
class TemplateService {
constructor() {
}
/**
* Get the template from url and then compile it with data.
* #param url
* #param $scope
* #returns {*|Promise<T>}
*/
static getTemplate(url, $scope) {
return $templateRequest(url)
.then(function(response){
let template = angular.element('<div></div>');
template.html(response);
//3. Pass the data to email template, in data will be merged in it
$compile(template)($scope);
return $timeout(function(){
return template.html();
}, 300);
})
.catch(function(err){
return $templateRequest('views/templates/404.html');
});
}
}
return TemplateService;
}]);
contact_email.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background: #f2f2f2;padding:40px 10px;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="background: white;text-align: center;border: 1px solid grey;padding: 20px;box-shadow: 0 0 5px 2px grey;margin:0 auto;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent">
Hello {{ contactEmailCtrl.contact.firstName }}
<p compile="contactEmailCtrl.message">
</p>
<p>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Usage in controller
contact.controller.js
angular.module('myApp').controller('ContactController', ['$scope', 'Global', 'TemplateService', $scope, Global, TemplateService]) {
let vm = this;
vm.sendEmail = function(params) {
//1. Prepare email template, Pass data to email template and compile it
$scope.contactEmailCtrl = {
user: Global.user,
message: $scope.emailCommunication.message || null,
};
TemplateService.getTemplate('views/templates/emails/contact_email.html', $scope).then(function(emailBody) {
console.log('--> | emailBody ', emailBody);
//Todo: Send email
let emailParams = {
tos: 'example#example.com',
subject: 'subject goes here',
emailBody: emailBody
}
// EmailService.sentEmail(emailParams); // Either send by PHP or Nodejs Or Ruby whatever
}).catch(function(err) {
console.log(' err ', err);
});
};
}
This is whole implementation. Hope this will help who wants to maintain clean architecture and separate email html and inject on the fly to send email.