JavaScript: Insert variable into an array

Question

I am customising a plugin that has array (if that is what is it) that holds config items:

 var config = {
 width: "100%",
 height: "100%",
 source: 'js/timeline/test.json', 
 css: 'js/timeline/compiled/css/timeline.css', 
 js: 'js/timeline/compiled/js/timeline-min.js' 
 }

What I want to do is take the source: data and replace it with a variable eg:

var mysource = 'path/to/source.json';
var config = {
 width: "100%",
 height: "100%",
 source: mysource , 
 css: 'js/timeline/compiled/css/timeline.css', 
 js: 'js/timeline/compiled/js/timeline-min.js' 
 }

But as it above it does not work. Can anyone point me in the right direction? Thanks

EDIT: Added full code as requested

$(function() {
 $.getJSON('http://www.mysite.com/json.php',
 function(data) {
 jsonObject = eval(data);
 var eventdata = jsonObject.tlall;
 });
}); //END ON LOAD
var config = {
 width: "100%",
 height: "100%",
 source: eventdata,
 //source: 'js/timeline/test.json',
 //start_at_end: true, //OPTIONAL 
 //hash_bookmark: true, //OPTIONAL 
 css: 'js/timeline/compiled/css/timeline.css',
 js: 'js/timeline/compiled/js/timeline-min.js'
}​

• Aesthete: Is it because you have 2 commas on the line before?
• MeltingDog: @nbrooks sorry guys - that was a mistake when I was transcribing the code. The problem still remains
• Mihai Iorga: I don't see any problem! Do you have them in same block/function ?
• Andreas Wong: how do you "re-init" the plugin to use your customised config?
• danwellman: That's not an array btw, it's an object, or list of key:value pairs. Similar to a dictionary in other languages. Somtimes referred to as a hash or map...

Answer 1

Change this line:

var eventdata = jsonObject.tlall;

To this:

config.source = jsonObject.tlall;

And remove this line from your config definition:

source: eventdata,

Answer 2

I don't know how exactly you plan to use config, but you certainly need it to be within the same scope in order to access eventdata. I would say get rid of that altogether, and just add it as a property of the object in the ajax callback (shown in code below).

The difficulty here is that you are stuck waiting on the AJAX callback to fire before you can use config in your scripts; this is why ajax is designed to be used with callbacks executed after a particular event rather than linearly; I would advise you to use config only within that success callback, or add a check to see if getJSON has finished executing.

$(function() {
 var config = {
 width: "100%",
 height: "100%", 
 css: 'js/timeline/compiled/css/timeline.css',
 js: 'js/timeline/compiled/js/timeline-min.js'
 };
 $.getJSON('http://www.mysite.com/json.php', function(data) {
 jsonObject = eval(data);
 config.source = jsonObject.tlall;
 });
}); //END ON LOAD​​​​​​​​​​​​​​​​

• MeltingDog: Thanks! This has gotten rid of my Uncaught Reference Error

Answer 3

Scoping issue, try :

$(function() {
 $.getJSON('http://www.mysite.com/json.php', function(data) {
 config.source = data.tlall;
 });
 var config = {
 width: "100%",
 height: "100%",
 css: 'js/timeline/compiled/css/timeline.css',
 js: 'js/timeline/compiled/js/timeline-min.js'
 }
});​
​

• Jonathan Maddison: I'm not sure that this would work, due to the fact that eventdata is only assigned once the AJAX call returns.