0

Solved the question on my own, see answer

Using jQuery 3.2.1 and Raphael 2.1.1, if this matters

In my Raphael .js I first create some objects without any data and push them into an array, e. g. (.attr omitted): 

var objarr = [];

    var obj1 = rsr.path("M ... z");
    objarr.push(obj1);

After this, I want to take data from a JSON file (an array named "regions" of multiple entries that consist of multiple key-value pairs (validated through JSONLint) and append it as data by id. It looks like this:

{
    "regions": [{
            "id": "0",
            "var1": "foo1",
            "var2": "bar1",
        },
        {
            "id": "1",
            "var1": "foo2",
            "var2": "bar2",
        },
        // And so on for every object
    ]
}

I use the following code (localhost is used because otherwise I get a cross-access error: 

for (var i = 0; i < objarr.length; i++)
{
    var jq = $.getJSON("http://localhost:8000/data.json",{id: +i},function(t){
        console.log( "success" );
    })
    .done(function(objdata){
            console.log("success2");
            $.each(objdata.regions, function(key, val){
                objarr[i].data(key,val);
            });
        })
    .fail(function(t){
        console.log("error");
    })
    .always(function(t){
        console.log("complete");
    });
}

The console gives me both successes, but after this I get an error "Cannot read property 'data' of undefined". alert(key) and alert(val) give 0 and [object Object] respectively for every call. I tried adding the following to .done:

var items = [];
            $.each(objdata.regions, function(key, val){
                items.push("id" + key + ":" + val);
                console.log(items);
            });

The result was a string that went ["id0:[object Object]"],["id0:[object Object]", "id1:[object Object]"] and so on until it had objarr.length ids, repeating the needed amount of times. If I add [i] to objdata.regions, I get no console messages about items[] content at all.

I also found two somewhat closely related questions ("1" and "2"), checked the jQuery documentation for .getJSON(); and Raphael documentation for Element.data();. I've tried the following to check validity of my calls:

  • console.log(objdata) in the beginning of .done -- returns full base object of JSON data
  • console.log(objdata.regions) in the beginning of .done -- returns array of objects of JSON data
  • console.log(objdata.regions[i]) in the beginning of .done -- returns undefined
  • console.log(objdata.regions[0]) in the beginning of .done -- returns first object (works for every object)

I've used objdata.regions[0] in the snippet with items[] and the adding seems to work properly (console shows the keys and values being added to the array). However, it still doesn't work with objarr[i].data(key,val) (as well as ""+key and "$key").

I have two questions:
1. How do I acquire the key-value pairs properly while looping?
2. How do I append these pairs as data to a Raphael object?

Community
  • 1
  • 1
bqback
  • 55
  • 9

1 Answers1

0

I moved the for loop inside .done() and everything is appended successfully:

.done(function(objdata){
        for (var i = 0; i < objarr.length; i++)
        {
            console.log("success2");
            $.each(objdata.regions[i],function(key, val){
                objarr[i].data(key, val);
            });
        }
    })
bqback
  • 55
  • 9