Console error says global variable is undefined

Question

I am using this plugin http://almende.github.com/chap-links-library/js/timeline/doc/ to render a timeline from some JSON data. Here's the entire relevant code:

<script>
function doEverything() {
var timeline;

$.getJSON("tljson.json",function(result){
  items = [JSON.stringify(result)];
  drawVisualization();
});

function drawVisualization() {

var options = {'width':  '100%'};

timeline = new links.Timeline(document.getElementById('mytimeline'));
        timeline.draw(window.items, options);
 };
 }
</script>
<body onload="doEverything();">

When I alert 'window.items'; it displays as expected. However, the Console on inspector shows

Uncaught TypeError: Cannot call method 'valueOf' of undefined

And the timeline doesn't render. What am I doing wrong?

EDIT:

Output of console.log(JSON.stringify(result)):

[{"content":"rubygem-aws-2.6.0 is available <a href='https://bugzilla.redhat.com/show_bug.cgi?id=863368'>View on BugZilla</a>","start":"863368"},{"content":"Recent update of rubygem-nokogiri breaks rubygem-aws-sdk <a href='https://bugzilla.redhat.com/show_bug.cgi?id=816706'>View on BugZilla</a>","start":"816706"},{"content":"Please update rubygem-aws-sdk to 1.3.5 <a href='https://bugzilla.redhat.com/show_bug.cgi?id=800616'>View on BugZilla</a>","start":"800616"},{"content":"Review Request: rubygem-aws-sdk - AWS SDK for Ruby <a href='https://bugzilla.redhat.com/show_bug.cgi?id=723472'>View on BugZilla</a>","start":"723472"},{"content":"Please add EPEL branches for rubygem-aws <a href='https://bugzilla.redhat.com/show_bug.cgi?id=723152'>View on BugZilla</a>","start":"723152"},{"content":"Unable to resolve dependency of rubygem-aws-2.4.2.2-2.fc15 (updates) <a href='https://bugzilla.redhat.com/show_bug.cgi?id=716343'>View on BugZilla</a>","start":"716343"},{"content":"rubygem-aws-2.5.7 is available <a href='https://bugzilla.redhat.com/show_bug.cgi?id=703433'>View on BugZilla</a>","start":"703433"},{"content":"rubygem-aws-2.5.1 is available <a href='https://bugzilla.redhat.com/show_bug.cgi?id=703117'>View on BugZilla</a>","start":"703117"},{"content":"rubygem-aws-2.4.5 is available <a href='https://bugzilla.redhat.com/show_bug.cgi?id=691728'>View on BugZilla</a>","start":"691728"},{"content":"Update rubygem-aws to 2.3.34 <a href='https://bugzilla.redhat.com/show_bug.cgi?id=668955'>View on BugZilla</a>","start":"668955"},{"content":"Review Request: rubygem-aws - Ruby gem for all Amazon Web Services <a href='https://bugzilla.redhat.com/show_bug.cgi?id=637378'>View on BugZilla</a>","start":"637378"}]

EDIT: latest code: (console still returns unknown data type for timeline.draw):

<script>
function doEverything() {
var timeline;

$.getJSON("tljson.json",function(result){
drawVisualization(result);
});

function drawVisualization(result) {
//console.log (JSON.stringify(result));
var options = {
            'width':  '100%'
        };

timeline = new links.Timeline(document.getElementById('mytimeline'));
    timeline.draw(JSON.stringify(result), options);
};
}
</script>
<body onload="doEverything();">

In Chrome set "break on all exceptions" and see what is actually causing it. — Alexei Levenkov, Dec 18 '12 at 05:28
`items` does not exist as a global variable until the line of code assigning a value to it executes. Until then, it doesn't exist. That's why you should declare global (and all other) variables in an appropriate scope. — RobG, Dec 18 '12 at 05:29
I don't think that's the problem, because when I use `alert (window.items)`, it shows the correct value of the JSON data. — 17andLearning, Dec 18 '12 at 05:51
is it your all code? bcoz i dont think problem is window object? — Zaheer Ahmed, Dec 18 '12 at 06:26

closure · Accepted Answer · 2012-12-18T06:31:48.993

1

You should pass items as a parameter to drawVisualization. Please don't plan to add variables to global namespace. Here is the corrected code:

<script>
  function doEverything() {
    var timeline;

    $.getJSON("tljson.json",function(result){
      drawVisualization(result);
    });

    function drawVisualization(items) {

        var options = {'width':  '100%'};
        console.log(items);
        var timeline = new links.Timeline(document.getElementById('mytimeline'));
        timeline.draw(items, options);
     }
   }
</script>
<body onload="doEverything();">

edited Dec 18 '12 at 06:31

answered Dec 18 '12 at 05:38

closure

7,412
1
23
23

that does not change anything :( I don't think the problem is with declaration, because I can see the contents of items by using `alert(window.items)` – 17andLearning Dec 18 '12 at 05:52
Verify you have line like this: timeline.draw(items, options); – closure Dec 18 '12 at 05:54
The problem then should be in the timeline construction. Please add console.log(items) as done above to verify. – closure Dec 18 '12 at 06:19
I think I found the problem. See, the problem is that another set of [] is added when I call the array in `timeline.draw`. It thus returns undefined. However, when I paste the raw content of the JSOn beginning with [{ and ending with }], it works. Adding [ before and ] after that returns the same error as above. How can I put the value of the items variable direcly into `timeline.draw` ? – 17andLearning Dec 18 '12 at 06:28
Good that you found the root cause. I too was wondering why are you converting the JSON to string. Updated the answer to reflect the change. – closure Dec 18 '12 at 06:33
argh, now it says `Uncaught Unknown data type. DataTable or Array expected.` . What now? – 17andLearning Dec 18 '12 at 06:47
Your items is not normal array. Please update your question with the output of console.log(JSON.stringfy(items)) – closure Dec 18 '12 at 06:49
Since we're not declaring `items` anymore, I have replaced `drawVisualization(items)` with `drawVisualization(result)` . I've pasted the output of `console.log(JSON.stringify(result)` in the question. – 17andLearning Dec 18 '12 at 06:54
also, pasting this raw output into timeline.draw (*,options) as the first parameter renders the timeline correctly. On the other hand, putting 'JSON.stringify(result)' there returns the unknown data type error. – 17andLearning Dec 18 '12 at 06:57
I am not clear on the code modification you did. I think it is broken. Just fix the code in the question exactly the way you have it now. We are just a step away from solving it. – closure Dec 18 '12 at 07:12

score 0 · Answer 2 · answered Dec 18 '12 at 05:35

0

It seems that your variable items is not recognized since you have not declared it yet as global variable. You may declare it first like this:

<script>
var items;

function doEverything() {
    var timeline;

    // rest of your code
}

answered Dec 18 '12 at 05:35

SubRed

3,169
1
18
17

that does not change anything :( I don't think the problem is with declaration, because I can see the contents of items by using `alert(window.items)` – 17andLearning Dec 18 '12 at 05:52

Console error says global variable is undefined

2 Answers2