I am getting and error while to try to integrate the data which i get from the api.
I have included the following files in the index.html:
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
This is my html code :
<div class="col-md-4 overflow-graph">
<nvd3-line-chart
data="exampleData"
id="exampleId"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
width="550"
height="350"
showXAxis="true"
showYAxis="true">
<svg></svg>
</nvd3-line-chart>
</div>
This is where i am getting the data from
$scope.exampleData = function(){
for(var count in $scope.skuproduceCart) {
var forecast = $scope.skuproduceCart[count].forecast;
}
return forecast;
};
forecast return an array of objects with a a structure
[Object, Object, Object]
This is the error i get :
nv.d3.min.js:5 Uncaught TypeError: Cannot read property 'length' of undefined
at https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js:5:56
at Array.filter (native)
at SVGSVGElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js:5:22)
at http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js:5:3691
at C (http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js:1:3397)
at Array.Cs.each (http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js:5:3643)
at Array.b (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js:4:31618)
at Array.ma.call (http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js:3:9080)
at checkElementID (http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js:795:216)
at Scope.$scope.d3Call (http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js:884:15)
Please let me know if additional info is required will gladly provide it.
Any help or guidance appreciated.
Thanks in advance.
Related
<div class="row no-margin video-title">
<h6><i class="fas fa-book"></i> Tags</h6>
</div>
<div class="image">
<ul class="list-unstyled mb-0">
<%
Tags = video.Tags.split(",");
Tags.forEach (function (tag) {
tag = tag.trim(); %>
<li>
<%= tag %>
</li>
<% }) %>
</ul>
</div>
and I receive this error:
TypeError:
E:\livestreaming\video_streaming\views\video-page\index.ejs:374
372|
373|
>> 374| <%- include("side-bar") %>
375|
376| </div>
377| </div>
E:\livestreaming\video_streaming\views\video-page\side-bar.ejs:39
37| <div class="image">
38| <ul class="list-unstyled mb-0">
>> 39| <%
40| Tags = video.Tags.split(",");
41| Tags.forEach (function (tag) {
42| tag = tag.trim(); %>
Cannot read properties of undefined (reading 'split')
at eval ("E:\\livestreaming\\video_streaming\\views\\video-page\\side-bar.ejs":47:35)
at side-bar (E:\livestreaming\video_streaming\node_modules\ejs\lib\ejs.js:692:17)
at include (E:\livestreaming\video_streaming\node_modules\ejs\lib\ejs.js:690:39)
at eval ("E:\\livestreaming\\video_streaming\\views\\video-page\\index.ejs":101:17)
at index (E:\livestreaming\video_streaming\node_modules\ejs\lib\ejs.js:692:17)
at tryHandleCache (E:\livestreaming\video_streaming\node_modules\ejs\lib\ejs.js:272:36)
at View.exports.renderFile [as engine] (E:\livestreaming\video_streaming\node_modules\ejs\lib\ejs.js:489:10)
at View.render (E:\livestreaming\video_streaming\node_modules\express\lib\view.js:135:8)
at tryRender (E:\livestreaming\video_streaming\node_modules\express\lib\application.js:640:10)
at Function.render (E:\livestreaming\video_streaming\node_modules\express\lib\application.js:592:3)
This means that video.Tags stores an undefined value. Make sure to check if the video.Tags has a value before using the split() method. See code below:
var video = undefined;
// Cannot read properties of undefined (reading 'split')
video.split(',');
To check whether your string is undefined or not:
const video = undefined;
if (typeof video === 'string') {
const array = video.split(',');
// Do something ...
} else {
console.log('video is not a string');
}
// You could also use method chaining.
const r = video?.split(',');
console.log(r);
You need to learn to read the error, Elon!
Cannot read properties of undefined (reading 'split')
It is clearly saying, a property named split is attempted to be accessed from an undefined value.
Now, all you have to do is, to check where you are using split in the part of the code that throws the error.
Then you will learn that, it is Tags = video.Tags.split(","); where, split is being used. That means, Tags property in video object is not defined.
Now, you simply need to ensure Tags is present in video object always & it must be a string.
I have hard time with this simple jscript for no reason. this code should display the time once clicked. but i get the error below. what am i doing wrong
{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')",
"filename": "https://stacksnippets.net/js",
"lineno": 30,
"colno": 43
}
function item(name)
{
var d = new Date();
document.getElementById("but1").innerHTML = d;
}
<!DOCTYPE html>
<html>
<body>
<script src="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\animation\index.Js"></script>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<button onclick="item(name)">Try it</button>
</body>
</html>
This id (#but1) does not exist, so innerHtml won't work, try changing it.
function item(name) {
var d = new Date();
document.getElementById("demo").innerHTML = d;
}
<!DOCTYPE html>
<html>
<body>
<script src="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\animation\index.Js"></script>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<button onclick="item(name)">Try it</button>
</body>
</html>
I'm using Node.js, express, handlebars and handlebars-helpers.
When using res.render() I pass two objects to my Handlebars template, the objects are as follows:
var searchParams = {a: ['Apples']}
var searchFields = {a: ['Apples', 'Pears', 'Oranges']}
I then wish to create checkboxes on the pages using searchFields. When a checkbox variable is within the corresponding searchParams variable I want the checkbox to be checked by default.
I'm attempting to use the handlebars-helpers helper function inArray to achieve this using the following in the template:
<form>
{{#each searchFields.a}}
<label>
<input name="only_a_test" value="{{this}}" type="checkbox"
{{#inArray searchParams.a this}}
checked
{{else}}
{{/inArray}}
>
{{this}}
</label>
{{/each}}
</form>
However this throws the error:
Cannot read property 'length' of undefined
TypeError: .../web/views/search.hbs: Cannot read property 'length' of undefined
at Object.indexOf (.../web/node_modules/handlebars-utils/index.js:82:31)
at String.helpers.inArray (.../web/node_modules/handlebars-helpers/lib/array.js:225:26)
at eval (eval at createFunctionContext (.../web/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:10:91)
at Object.prog [as inverse] (.../web/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
at Object.utils.value (.../web/node_modules/handlebars-utils/index.js:237:50)
at String.helpers.eq (.../web/node_modules/handlebars-helpers/lib/comparison.js:170:15)
at eval (eval at createFunctionContext (.../web/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:5:84)
at prog (.../web/node_modules/handlebars/dist/cjs/handlebars/runtime.js:219:12)
at execIteration (.../web/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:51:19)
at Object.<anonymous> (.../web/node_modules/handlebars/dist/cjs/handlebars/helpers/each.js:61:13)
I can't quite grok what's going on, I suspect it's having an issue with using this in the inArray block helper - it perhaps isn't seeing the underlying string?
As an alternative approach, you can consider writing you own custom 'Handlebars
Helper' as below,
Handlebars.registerHelper("isInArray", function(array, value) {
if (array.indexOf(value) != -1) {
return "checked";
}
});
Or an optimised way
Handlebars.registerHelper("isInArray", function(array, value) {
return array.indexOf(value) != -1 ? 'checked' : '';
});
And call it in your template file as,
<input name="only_a_test" value="{{this}}" type="checkbox" {{isInArray ../b this}}>
PEN. Hope this helps.
Alternative answer
As confirmed by OP, the real problem is due to the array being accessed incorrectly. The correct code is,
{{#inArray ../searchParams.a this}}
I want to access a JSON array inside the script tag of a EJS file.
I'm passing the JSON array from my index.js file to the EJS file while rendering it. The code is:
sampleJArr=["data1","data2","data3"];
app.get('/test', function(req,res){
res.render('testfile',{
'mJsonArr': sampleJArr
});
In the EJS file (testfile.ejs), code-:
<div>
<!--Printing the JSON array. It prints -->
<p>JSON.stringify(mJsonArr)</p>
<button onClick="myFunc">Take test</button>
</div>
<script>
function myFunc(){
var JsonData= <%= mJsonArr[0] %>
console.log(JsonData)
}
</script>
Error:-Uncaught ReferenceError: myFunc is not defined
at HTMLButtonElement.onclick
But when I'm trying to do a console("some string") inside myFunc then it's not giving that error. Only when I'm accessing mJsonArr inside the script tag, I'm getting UncaughtRefrence error. How can I access the passed mJsonArr inside my script tag ? Please contribute. Thankyou.
The reason why you can not access mJsonArr[0] in your script tag is because EJS just replace <%= mJsonArr[0] %> to data1 which means your generated html will be like
<div>
<!--Printing the JSON array. It prints -->
<p>JSON.stringify(mJsonArr)</p>
<button onClick="myFunc">Take test</button>
</div>
<script>
function myFunc(){
var JsonData= data1
console.log(JsonData)
}
</script>
In which there are 2 points are wrong
onClick="myFunc"
This need to be changed to onClick="myFunc()". Otherwise it will never invoke.
var JsonData= data1
This is not assigning a string value 'data1' to variable. It is assigning a value of a variable named 'data1' to variable JsonData.
The correct way to do this should be
<div>
<!--Printing the JSON array. It prints -->
<p>JSON.stringify(mJsonArr)</p>
<button onClick="myFunc()">Take test</button>
</div>
<script>
function myFunc(){
var JsonData= '<%= mJsonArr[0] %>'
console.log(JsonData)
}
</script>
Hope it can help you
I'm trying to integrate a Braintree payment solution using Javascript & Node JS.
As per the Braintree documentation, I have the following in my html:
<div id="panel-payment">
<div id="payment-form"></div>
<input id="btn-checkout" type="submit" value="Process Order">
</div>
<script>
$(document).ready(function(){
console.log(braintree); <---- defined AOK
console.log(braintree.Environment); <---- undefined
console.log(braintree.Environment.Sandbox); <---- undefined
var clientToken = "...";
braintree.setup(clientToken, "dropin", {
container: $("#payment-form")
});
});
</script>
I can't get the environment variable, yet the braintree object seems to instantiate fine? Anyone have any ideas?
The braintree object returns:
Object {api: Object, cse: Object, paypal: Object, dropin: Object, Form: Object…}
I also get the dreaded "Unable to find valid container" when I call the braintree.setup() function, even though the container value $("#payment-form") is valid value and I am calling the setup function when the HTML has loaded..
The Environment variable is only available in the NodeJS package.
See here.
For the client side in javascript your need a valid token generated by your server.
So you need a dedicated route delivering a token with the Braintree node package as described here.
And for your container problem try to pass only the id of the div to braintree, not a jQuery element.
braintree.setup(clientToken, "dropin", {
container: "payment-form"
});
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
#chambo_e's answer is correct regarding the difference between the attributes accessible on the node package versus Braintree.js. The environment attribute is only available on the Braintree node module.
I am guessing that the error you are actually seeing is "Uncaught Unable to find a valid FORM" and that is because your payment forms are not enclosed by a form element. By default, Braintree.js looks for the nearest parent form.
<form id="checkout" method="post" action="/checkout">
<div id="panel-payment">
<div id="payment-form"></div>
<input id="btn-checkout" type="submit" value="Process Order">
</div>
</form>
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
$(document).ready(function(){
var clientToken = "client token generated form server";
braintree.setup(clientToken, "dropin", {
container: $("#payment-form")
});
});
</script>
If you'd like it to use a different form, you can specify that in the setup call. See these docs for more details
<div id="dropin-container"></div>
<form id="checkout-form">
<input type='submit' value='Pay'/>
</form>
<script>
braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", {
container: "dropin-container",
form: "checkout-form"
});
</script>