So, I'm attempting to setup google analytics with the provided code as follows:
<Head>
<script async src="https://www.googletagmanager.com/gtag/js?id=my-id"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'my-id');
</script>
</Head>
but am receiving the above mentioned error message. What am I overlooking here?
The generated stack trace reads as follows:
Uncaught ReferenceError: dataLayer is not defined
at Meta (VM79 _app.js.eb2961df9cc079665d85.hot-update.js:24)
at renderWithHooks (VM47 react-dom.development.js:12938)
at mountIndeterminateComponent (VM47 react-dom.development.js:15020)
at beginWork (VM47 react-dom.development.js:15625)
at performUnitOfWork (VM47 react-dom.development.js:19312)
at workLoop (VM47 react-dom.development.js:19352)
at HTMLUnknownElement.callCallback (VM47 react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (VM47 react-dom.development.js:199)
at invokeGuardedCallback (VM47 react-dom.development.js:256)
at replayUnitOfWork (VM47 react-dom.development.js:18578)
at renderRoot (VM47 react-dom.development.js:19468)
at performWorkOnRoot (VM47 react-dom.development.js:20342)
at performWork (VM47 react-dom.development.js:20254)
at performSyncWork (VM47 react-dom.development.js:20228)
at requestWork (VM47 react-dom.development.js:20097)
at scheduleWork (VM47 react-dom.development.js:19911)
at scheduleRootUpdate (VM47 react-dom.development.js:20572)
at updateContainerAtExpirationTime (VM47 react-dom.development.js:20600)
at updateContainer (VM47 react-dom.development.js:20657)
at ReactRoot.render (VM47 react-dom.development.js:20953)
at legacyRenderSubtreeIntoContainer (VM47 react-dom.development.js:21105)
at Object.render (VM47 react-dom.development.js:21155)
at renderReactElement (VM39 main.js:8591)
at _temp11 (VM39 main.js:8275)
at doRender (VM39 main.js:8316)
at VM39 main.js:8374
at _catch (VM39 main.js:8239)
at _temp6 (VM39 main.js:8373)
at render (VM39 main.js:8392)
at VM39 main.js:8534
at VM39 main.js:5985
at Set.forEach (<anonymous>)
at Set.<anonymous> (VM39 main.js:1675)
at Router.notify (VM39 main.js:5984)
at Router.update (VM39 main.js:5489)
at VM36 _app.js:53429
at hotApply (VM37 webpack.js:681)
at VM37 webpack.js:363
You have to paste inside this, { }
<script async src="https://www.googletagmanager.com/gtag/js?id=my-id"></script>
<script>
{
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'my-id');
}
</script>
Related
I'm having a problem with xhr.send(JSON.stringify(donnees)) , im trying to edit with calendar but it's not sending data.
here is my code.
this is the twig part :`
{% extends 'base-back.html.twig' %}
{% block body %}
<br>
{% block title %}<center><h1>Vols Calendar</h1></center>{% endblock %}
<br><br><br>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.6.0/main.min.js" integrity="sha256-ekrJn2FeZaiUFq99QswpQCUTME/HxaDfX7R8INzKJGE=" crossorigin="anonymous"></script>
<div id="calendrier">
<script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
</div>
{% block stylesheet %}
<style>
#calendrier{
width: 600px;
margin: auto;
height:60%;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.6.0/main.min.css" integrity="sha256-uq9PNlMzB+1h01Ij9cx7zeE2OR2pLAfRw3uUUOOPKdA=" crossorigin="anonymous">
{% endblock %}
{% block javascript %}
<script>
window.onload = () =>{
let calendarElt=document.querySelector("#calendrier");
let calendar =new FullCalendar.Calendar(calendarElt,{
initialView: 'dayGridMonth',
locale: 'fr',
timeZone: 'Afrique/Tunisie',
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth'
},
events: {{data|raw}},
//can edit
editable: true,
//can make it 2 days for example
eventResizableFromStart: true
});
//get an object when you move an event
calendar.on('eventChange', (e)=>{
let url =`/vols/api/${e.event.id}/edit`
let donnees={
"destination_aller":e.event.extendedProps.destination_aller,
"destination_retour":e.event.extendedProps.destination_retour,
"title":e.event.title,
"start":e.event.start,
"date_retour":e.event.extendedProps.date_retour,
"passagers":e.event.extendedProps.passagers,
"cabine":e.event.extendedProps.cabine,
}
console.log(donnees);
let xhr = new XMLHttpRequest()
xhr.open("PUT", url)
xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
xhr.send(JSON.stringify(donnees))
})
calendar.render();
}
</script>
{% endblock %}{% endblock %}
and this is my controller :
/**
* #Route("/calendar", name="calendar")
*/
public function calendar()
{
$repository = $this->getDoctrine()->getRepository(vols::class);
$event = $repository->findAll();
$rdvs=[];
foreach($event as $event){
$rdvs[]=[
'id' => $event->getId(),
'destination_aller' => $event->getDestinationAller(),
'destination_retour'=>$event->getDestinationRetour(),
'title' => $event->getVoyage(),
'start' => $event->getDateDepart()->format('Y-m-d'),
'date_retour' => $event->getDateRetour(),
'passagers' => $event-> getPassagers(),
'cabine'=>$event->getCabine(),
];
}
$data= json_encode($rdvs);
return $this->render('vols/Callender.html.twig', compact('data'));
}
/**
* #Route("/api/{id}/edit", name="editCalendar", methods={"PUT"})
*/
public function editCalendar(vols $calendar, Request $request) {
//récuperation de données
$donnees=json_decode($request->getContent());
if(
isset($donnees->destination_aller) && !empty($donnees->destination_aller) &&
isset($donnees->destination_retour) && !empty($donnees->destination_retour) &&
isset($donnees->title) && !empty($donnees->title) &&
isset($donnees->start) && !empty($donnees->start) &&
isset($donnees->date_retour) && !empty($donnees->date_retour) &&
isset($donnees->passagers) && !empty($donnees->passagers) &&
isset($donnees->cabine) && !empty($donnees->cabine)
){
//données completes, on initialise un code
$code = 200;
//verification de l'id existe
if(!$calendar){
//on instancie un rende
$calendar = new vols;
//change code
$code=201;
}
//on hydrate l'objet avec les données
$calendar->setDestinationAller($donnees->destination_aller);
$calendar->setDestinationRetour($donnees->destination_retour);
$calendar->setVoyage($donnees->title);
$calendar->setDateDepart(new DateTime($donnees->start));
$calendar->setDateRetour(new DateTime($donnees->date_retour));
$calendar->setPassagers($donnees->passagers);
$calendar->setCabine($donnees->cabine);
$em=$this->getDoctrine()->getManager();
$em->persist($calendar);
$em->flush();
//return code
return new Response('Ok', $code);
}else{
//données non completes
return new Response('data not complete', 404);
}
return $this->render('vols/calenderEdit.html.twig');
}
my data is sent but i can't edit it
thank you.
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
I am getting the following error
Error: Error trying to diff '[object Object]'. Only arrays and
iterables are allowed
I am consuming a JSON response and trying to display it in the UI in a ComboBox. please find the attached code and let me know what the error is in the code I made
here are the errors when I receive and the data when I do console.log
model.ts
export class FamilleProblem {
familleId!: number;
familleLibelle!: string;
}
service.ts
export class DeclarProblemService {
apiUrlFamille: string = 'https://www.mytds.fr/webservices_test/ws/gig/getFamille';
apiUrlType = 'https://www.mytds.fr/webservices_test/ws/gig/';
familleProblem!: Observable<FamilleProblem[]>;
currentUser!: AuthLoginInfo;
currentParc!: GestionParc;
familleId = null;
constructor(private http: HttpClient,
private tokenService: TokenStorageService,
private gestionParc: GestionParcService) { }
getFamille(): Observable<FamilleProblem[]>{
this.currentUser = this.tokenService.getUser();
let IdxUser = this.currentUser.userId;
let IdUser: string= '' + IdxUser;
this.currentParc = this.tokenService.getParc();
let IdxTypeMat = this.currentParc.materielIdxTypeMat;
let IdTypeMat: string= '' + IdxTypeMat;
let httpOptions = new HttpHeaders({'Content-Type': 'application/json',
'accept': 'application/json',
'LoginUser': IdUser,
'IdxTypeMat': IdTypeMat})
return this.http.get<FamilleProblem[]>(this.apiUrlFamille, {headers: httpOptions});
}
component.ts
export class DeclarProblemComponent implements OnInit {
currentUser = new AuthLoginInfo();
parcs!: GestionParc[];
materielCode!: number;
matrielImmat!: string;
mode!: number;
familleListe: FamilleProblem[] = [];
isLoggedIn= false;
errorMessage: any;
typeProblem: TypeProblem[] = [];
familleId!: number;
constructor(private router: Router,
private gestionParcService: GestionParcService,
private declarProblem: DeclarProblemService,
private tokenService: TokenStorageService) { }
ngOnInit(): void {
this.declareProbleme();
}
declareProbleme(){
this.declarProblem.getFamille().subscribe({
next: (familleListe: any) => {
//this.tokenService.saveToken(data.accessToken);
this.familleListe = familleListe;
//this.familleListe = [];
console.log(this.familleListe);
//this.familleListe = Array.from(Object.values(res.data));
this.isLoggedIn = true;
},
error: err => {
this.errorMessage = err.error.message;
}
});
}
template.html
<div class="row">
<label class="col-sm-4 col--form-label">Problème constaté :</label>
<div class="col-sm-8">
<select class="form-select" id="familleId" name="familleId" >
<option *ngFor="let famille of familleListe [value]="famille.familleId" >
{{famille.familleLibelle}}
</option>
</select>
</div>
</div>
finally the problem is that I used a our name for iterated and not the one of the server response is an object, but not an array.
Service.ts
getFamille(): Observable<FamilleProblem[]>{
let httpOptions = new HttpHeaders({'Content-Type': 'application/json',
'accept': 'application/json'
})
return this.http.get<{listeDesFamilles:FamilleProblem[]}>(this.apiUrlFamille, {headers: httpOptions}).pipe(
map(listeDesFamilles => listeDesFamilles.listeDesFamilles)
);
I am getting this error and do not know why. Any ideas? I was sure I has this working. I am trying to pull in two identical relation types where a record has one format and one collection but the collection/format has many records.
Error
[nodemon] starting `node ./bin/www
Unhandled rejection RangeError: Maximum call stack size exceeded
at /home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:2451:22
at isArrayLike (/home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:4075:40)
at keys (/home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:9674:43)
at baseAssign (/home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:1591:28)
at /home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:9209:11
at Function.<anonymous> (/home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:3024:13)
at Function.<anonymous> (/home/ubuntu/workspace/node_modules/bookshelf/node_modules/lodash/index.js:8152:31)
at RelationBase (/home/ubuntu/workspace/node_modules/bookshelf/lib/base/relation.js:20:5)
at child [as constructor] (/home/ubuntu/workspace/node_modules/bookshelf/lib/extend.js:15:14)
at new child (/home/ubuntu/workspace/node_modules/bookshelf/lib/extend.js:15:14)
at _relation (/home/ubuntu/workspace/node_modules/bookshelf/lib/bookshelf.js:66:14)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:17)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
at init (/home/ubuntu/workspace/node_modules/bookshelf/lib/relation.js:29:31)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:76)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
at init (/home/ubuntu/workspace/node_modules/bookshelf/lib/relation.js:29:31)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:76)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
at init (/home/ubuntu/workspace/node_modules/bookshelf/lib/relation.js:29:31)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:76)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
at init (/home/ubuntu/workspace/node_modules/bookshelf/lib/relation.js:29:31)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:76)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
at init (/home/ubuntu/workspace/node_modules/bookshelf/lib/relation.js:29:31)
at belongsTo (/home/ubuntu/workspace/node_modules/bookshelf/lib/model.js:211:76)
at bookshelf.Model.extend.format (/home/ubuntu/workspace/models/index.js:19:21)
`
Model
var Collection = bookshelf.Model.extend({
tableName: 'collections',
records: function() {
return this.hasMany(Record);
}
});
exports.Collection = Collection;
var Record = bookshelf.Model.extend({
tableName: 'records',
collection: function() {
return this.belongsTo(Collection);
},
format: function(){
return this.belongsTo(Format)
},
virtuals: {
largeURL: function() {
return "https://s3-eu-west-1.amazonaws.com/dartmoorweb/da" + this.get('id') + "_l.jpg";
},
mediumURL: function() {
return "https://s3-eu-west-1.amazonaws.com/dartmoorweb/da" + this.get('id') + "_m.jpg";
},
smallURL: function() {
return "https://s3-eu-west-1.amazonaws.com/dartmoorweb/da" + this.get('id') + "_s.jpg";
},
thumbURL: function() {
return "https://s3-eu-west-1.amazonaws.com/dartmoorweb/da" + this.get('id') + "_t.jpg";
}
}
});
exports.Record = Record;
var Format = bookshelf.Model.extend({
tableName: 'formats',
records: function() {
return this.hasMany(Record);
}
});
exports.Format = Format;
Route
router.get('/:id', function(req, res) {
models.Record.where('id', req.params.id).fetch({
withRelated: ['collection','format']
}).then(function(data) {
console.log(data.toJSON({virtuals: true}))
res.render('record/view.html', {
title: data.name,
data: data.toJSON({virtuals: true})
});
});
});
format: function(){
return this.belongsTo(Format)
},
format() is a method which is already defined in the modelBase of bookshelf and you are trying to override this method for a completely different purpose and therefor you've an infinite recursion.
Try to rename your format method and modify all your relations
I'm unable to import Angular2/core due to the following error:
Module name "angular2/core" has not been loaded yet for context: _. Use require([])
This is my Typescript file:
import {Component, View} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
#Component({
selector: "menu"
})
class MenuComponent {
isActive(path: string) {
return true
}
}
bootstrap(MenuComponent);
Which is compiled with this configuration:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"outDir": "../wwwroot/js",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
This is the compiled Javascript file:
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("angular2/core");
var browser_1 = require("angular2/platform/browser");
var MenuComponent = (function () {
function MenuComponent() {
}
MenuComponent.prototype.isActive = function (path) {
var page = window.location.pathname;
if (path === undefined || path === '') {
path = '';
}
var result = path === '' ? path === page[page.length - 1] : page[page.length - 1].indexOf(path) > -1;
return result;
};
MenuComponent = __decorate([
core_1.Component({
selector: "menu"
}),
__metadata('design:paramtypes', [])
], MenuComponent);
return MenuComponent;
})();
browser_1.bootstrap(MenuComponent);
//# sourceMappingURL=menu.js.map
My javascript is imported in this order:
<script type="text/javascript" src="~/lib/requirejs/require.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/es6-shim.js"></script>
<script type="text/javascript" src="~/lib/system-polyfills.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/system.src.js"></script>
<script type="text/javascript" src="~/lib/rx.js"></script>
<script type="text/javascript" src="~/lib/angular2.js"></script>
<script type="text/javascript" src="~/js/menu.js"></script>
I was wondering what's causing the above error. Since I'm unable to change the Javascript code which is compiled from the Typescript file.
I'm also using Visual Studio 2015 with ASP.Net 5.
I know Angular 2 is still in beta and ASP.Net 5 is still in RC, but I doubt this combination is causing the issue.
Thanks for the help.
I think that you use two module loaders, RequireJS and SystemJS. See what you included in your HTML file:
<script type="text/javascript" src="~/lib/requirejs/require.js"></script> <------
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/es6-shim.js"></script>
<script type="text/javascript" src="~/lib/system-polyfills.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/system.src.js"></script> <------
<script type="text/javascript" src="~/lib/rx.js"></script>
<script type="text/javascript" src="~/lib/angular2.js"></script>
<script type="text/javascript" src="~/js/menu.js"></script>
You only need one. For example SystemJS. That's the reason of the message. Both libraries try to load the angular2/core module...
Edit
If you want to use SystemJS only, you could update your tsconfig.json file:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"module": "system", <--------
"moduleResolution": "node", <--------
"outDir": "../wwwroot/js",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
Hope it helps you,
Thierry
I'm attempting the following code. I'm able to authenticate a user by email/password when clicking "login", and get an object returned; but I don't understand what I'm missing to return the data that I'm trying to get from "items" and "alseCards". If I set the read and write to "true" they return data fine, just want to authenticate those with any user who is logged in.
I feel it's Security/Rule setting, but just getting started with Firebase and struggling.
index.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body ng-controller="controller">
<div>
<button ng-click="login()">Login</button>
<p ng-if="authData">Logged in user: <strong>{{ authData.uid }}</strong>
</p>
<p ng-if="error">Error: <strong>{{ error }}</strong>
</p>
</div>
<h1>Items</h1>
<ul id="items">
<li ng-repeat="item in items">
<h2>{{item.$id}}</h2>
<ul id="inspections">
<li ng-repeat="inspection in item.inspections">{{inspection.description}} on {{inspection.timeStamp}} by {{inspection.inspector}}</li>
</ul>
</li>
</ul>
<script>
</script>
<script>
var app = angular.module("app", ["firebase"]);
app.controller("controller", ["$scope", "$firebaseArray", "$firebaseAuth",
function($scope, $firebaseArrary, $firebaseAuth) {
var ref = new Firebase("https://<-testing->.firebaseio.com");
var auth = $firebaseAuth(ref);
$scope.login = function() {
$scope.authData = null;
$scope.error = null;
auth.$authWithPassword({
email: "email#myemail.com",
password: "alseTest"
}).then(function(authData) {
console.log(authData)
$scope.authData = authData;
}).
catch (function(error) {
$scope.error = error;
});
};
$scope.alseCards = $firebaseArrary(ref.child("alseCards"));
$scope.items = $firebaseArrary(ref.child("items"));
}
]);
</script>
</body>
Security and Rules.json
{
"rules": {
"users": {"$user_id": {".write": "$user_id === auth.uid", ".read": "$user_id === auth.uid"}},
"items": {".write": "auth !== null && auth.provider === 'password'", ".read": "auth !== null && auth.provider === 'password'"},
"alseCards": {".write": "auth !== null && auth.provider === 'password'", ".read": "auth !== null && auth.provider === 'password'"}
}
}
Thanks ahead of time.
I think the problem is you have the code to get your items and alseCards outside the login function. This means it gets executed when the controller is first called and at that time the user hasn't logged in yet. Try to put it inside the login function like this:
$scope.login = function() {
$scope.authData = null;
$scope.error = null;
auth.$authWithPassword({
email: "email#myemail.com",
password: "alseTest"
}).then(function(authData) {
console.log(authData)
$scope.authData = authData;
$scope.alseCards = $firebaseArrary(ref.child("alseCards"));
$scope.items = $firebaseArrary(ref.child("items"));
}).
catch(function(error) {
$scope.error = error;
});
};