JSON-Object as string: Use of concat(), eval() and/or JSON.parse()?

Question

What I want to do: I want to display a diagram using Highcharts and the best code style.

Problem: My code is unreadable / hard to debug because I store it within variables.

Okay I have a Javascript-Object containing all the information I need for later use (categories, y axis value and the series itself which is split into positive, neutral and negative).

var testDia = 
{
    name : 'Testname',
    'chartCategories': ['Golf', 'Polo', 'Passat'],
    'chartSeries': 
    {
        'positive': [
                {y:341, url:'http://golf.com?q=positive'},
                {y:487, url:'http://polo.com?q=positive'},
                {y:180, url:'http://passat.com?q=positive'}
        ],
        'neutral': [
                {y:12, url:'http://golf.com?q=neutral'},
                {y:3, url:'http://polo.com?q=neutral'},
                {y:9, url:'http://passat.com?q=neutral'}
        ],
        'negative': [
                {y:222, url:'http://golf.com?q=negative'},
                {y:115, url:'http://polo.com?q=negative'},
                {y:321, url:'http://passat.com?q=negative'}
        ]
    }
}

My approach is to loop over the categories and add positive, neutral and negative to seperate strings which I evaluate later on in the highcharts-setup.

var allPositiveData = '';
var allNeutralData = '';
var allNegativeData = '';

for(var i=0; i < categories.length; i++) {

    var diaPositive = series['positive'][i]['y'];
    var diaNeutral = series['neutral'][i]['y'];
    var diaNegative = series['negative'][i]['y'];

    urlPositive = series['positive'][i]['url'];
    urlNeutral = series['neutral'][i]['url'];
    urlNegative = series['negative'][i]['url'];

    allPositiveData += "{'y': " + diaPositive + ", 'url': '" + urlPositive + "'}, ";
    allNeutralData += "{'y': " + diaNeutral + ", 'url': '" + urlNeutral + "'}, ";
    allNegativeData += "{'y': " + diaNegative + ", 'url': '" + urlNegative + "'}, ";        

} // end of loop

allPositiveData = eval( "[" + allPositiveData.slice(0, -2) + "]" );
allNeutralData = eval( "[" + allNeutralData.slice(0, -2) + "]" );
allNegativeData = eval( "[" + allNegativeData.slice(0, -2) + "]" );

Highcharts-setup

newChart = new Highcharts.Chart({
    chart : {
        renderTo : 'container',
        type: 'column'
    },

    [...] // skipping the rest of the setup

    series: [
    {
        name: 'Positive',
        data: allPositiveData
    }, {
        name: 'Neutral',
        data: allNeutralData
    }, {
        name: 'Negative',
        data: allNegativeData
    }]
});

I figure there are a few ways to achieve what I want but I want to know a better (maybe object orientated) solution.

http://jsfiddle.net/x8455/

"I have a static JSON-Object" — That's a JavaScript object. — Quentin
– Quentin, Commented Feb 19, 2014 at 11:03
I'm really not sure what you are trying to do, but it almost certainly should involve "Just creating objects/arrays" and not "Programatically writing JSON by bashing strings together and then evaling or parsing it". — Quentin
– Quentin, Commented Feb 19, 2014 at 11:05
FYI, questions asking for opinions and discussion as to what is "best" are generally not encouraged. — Adrian Wragg
– Adrian Wragg, Commented Feb 19, 2014 at 11:05
@Quentin That's exactly my problem. I am in the first year of sholarship so my programming solutions are not as nice as they could be :/ — Manticore
– Manticore, Commented Feb 19, 2014 at 11:07

Paweł Fus · Accepted Answer · 2014-02-19 11:32:31Z

1

I think you are trying to do something what you already have done.

You want to get display three series from your JSON, for respective categories, then let's to that:

Your code:

var categories = testDia['chartCategories'];
var series = testDia['chartSeries'];

Great! Now use that variables:

newChart = new Highcharts.Chart({
    chart : {
        renderTo : portletContainer,
        type: 'column'
    },
    ...
    xAxis: {
        categories: categories,
        labels: {
            rotation: -45,
            align: 'right',
        }
    },
    ...
    series: [{
        name: 'Positive',
        data: series.positive // testDia.chartSeries.positive is the same
    }, {
        name: 'Neutral',
        data: series.neutral
    }, {
        name: 'Negative',
        data: series.negative
    }]
});

And working demo: http://jsfiddle.net/x8455/1/

answered Feb 19, 2014 at 11:32

Paweł Fus

45.1k3 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manticore Over a year ago

Thanks Pawel. You are totally right. I missed the forest for the trees ;)

Cerbrus · Accepted Answer · 2014-02-19 11:11:01Z

1

Here's how you should do it.

var allPositiveData = []; // You want an array, so start off with an array.

for(var i=0; i < categories.length; i++) {
    var diaPositive = series['positive'][i]['y'];
    urlPositive = series['positive'][i]['url'];
    allPositiveData.push({'y':diaPositive, 'url':urlPositive}); // Add the element to the array.
}

That's all there is to it. Your Highcharts-setup piece of code can remain the same.

To make the sample a little shorter, I only edited the code for the positive data, the rest is the same, just a different name.

answered Feb 19, 2014 at 11:11

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

1 Comment

Manticore Over a year ago

Thanks Cerbrus for your effort. I learned something thanks to you :)

Collectives™ on Stack Overflow

JSON-Object as string: Use of concat(), eval() and/or JSON.parse()?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related