jQuery Import a JS array using ajax to pass though to a function/plugin

Keltoi · 08-10-2011, 02:50 PM

I have a generated array which if hard coded passes the array objects to a function for processing fine.

For example:

Code:

$("#termCloud").jQCloud([{text:'some',weight:10},{text:'thing',weight:8}]);

However, I need to make this more dynamic so am generating the the array externally and importing using ajax. This is what I'm Trying:

(generateArray.asp would output {text:'some',weight:10},{text:'thing',weight:8})

Code:

$.ajax({
    url: '/generateArray.asp',
    success: function(data){
        $("#wordCloud").jQCloud([data]);
    }
})

I have tried several dataTypes and all fail.

The problem seems to be that the in the working version the JQCloud plugin receives the array as objects: [object Object],[object Object] where as my ajax version receives/sends it as a string: {text:'some',weight:10},{text:'thing',weight:8}

Is there a way to import the the array and pass it though to the JQCloud function/plugin as a proper array rather than a string or convert the string to an array for processing?

It's worth noting that the return doesn't seem to be recognised as valid JSON data...

Many thanks..

devnull69 · 08-10-2011, 04:17 PM

Quote:

Originally Posted by Keltoi

It's worth noting that the return doesn't seem to be recognised as valid JSON data...

Because it isn't ... it is a comma separated list of JSON objects. So what you need to do is: Get the string, split it at '},', add a } to each string part and JSON.parse it. Attention: This will not work if the string contains nested objects!

Code:

var jsonArray = [];
var jsonStrings = data.split('},');
for(i=0; i<jsonStrings.length; i++) {
   jsonStrings[i] += '}';
   var jsonObject = JSON.parse(jsonStrings[i]);
   jsonArray.push(jsonObject);
}

jsonArray will now be an array of JSON objects ... just as you need it.

Keltoi · 08-10-2011, 04:34 PM

Thanks for the reply devnull69, didn't think it was JSON, indeed the original is just a string so grasping at straws...

That said, is there a specific plugin to run JSON.parse(jsonStrings[i]) as I'm getting the following error in Firebug:

Code:

JSON.parse: expected property name or '}'

Keltoi · 08-10-2011, 05:32 PM

OK, just for referance I've recoded the original string so it's easier to split, I've then rebuilt the array once it's been imported... There must be an easier way but until I can experiment further (or someone can enlighten me); this seems to be working at the moment...
Original import string:

Code:

text:some,weight:10||text:thing,weight:8

Import, split and rebuild:

Code:

$.ajax({
	url: '/generateArray.asp',
	dataType: 'dataArray',
	success: function(data){
		var wArr = data.split('||'), wEle, wTxt, wWgt
		var jsonArray = [];
		for(i = 0; i < wArr.length; i++){
			wEle = wArr[i].split(',')
			wTxt = wEle[0].split(':')
			wWgt = wEle[1].split(':')
			var jsonObject = jQuery.parseJSON('{"text":"' + wTxt[1] + '","weight":' + wWgt[1] + '}');
			jsonArray.push(jsonObject)
		}
		$("#wordCloud").jQCloud(jsonArray)
	}
})

Open to any suggestions on improvement...

If not, thanks for taking a look :-)

Keltoi · 08-11-2011, 10:19 AM

Update
It seems single quotes are not good when trying to parse JSON, this works fine:

Code:

var foo = $.parseJSON('[{"text":"some","weight":10},{"text":"thing","weight":8}]');

So no need to break the string to re-build the array.. Just double quote it..

Working example:
remote script generates:
{"text":"some","weight":10},{"text":"thing","weight":8}
then the JQuery:

Code:

$.ajax({
	url: '/generateArray.asp',
	success: function(data){
		var jsonArray = $.parseJSON('['+data+']'); 
		$("#wordCloud").jQCloud(jsonArray)
	}
})