JSON Surgery

I am working with a Javascript library that consumes JSON notation - as a function parameter.
In an attempt to make my code more modular I have modified the calls to accept Javascript Objects.

So whereas the input was this

{ title: {
            text: 'Some Text'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{point.name}: <b>{point.y} yrs.</b>'
        } }

I am creating an object (in an Array, because I want to carry several of them) like this:

genericObject = new Array(
{ title: {
            text: 'Some Text'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{point.name}: <b>{point.y} yrs.</b>'
        } }
);

And then pass the function (that previously took the JSON notation) simply: genericObject[0], a first-class JS object!

That all works well. Additionally, I can make changes to the values genericObject[0]['text'] = 'NEW TEXT'; without difficulty.

The problem I face is with another aspect of all this and it is two-fold.
What I showed above was just a snippet. The entire JSON input includes a reference to an array like this:

{ title: {
            text: 'Chart Text'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{point.name}: <b>{point.y} yrs.</b>'
        },
        series: [{
            type: 'pie',
            name: 'Series Name',
            data: seriesData   //this is an array
        }]
}

And ‘seriesData’ is defined like this:

seriesArray = new Array(
  {name: 'Before Event', 
   y: 115,
   color: '#8E8E93'},
  {name: 'Since Event',
   y: 35,
   color: '#5AC8FA'}
);

Here comes the real question

How can I surgically modify both (or either) of those values of ‘name’ and the values of ‘y’ within that object in the array? The two comma-separated groups are not indexed - are they?
I have tried things like seriesArray[0][0]['name'] = "BLAH" and seriesArray[0]['name'] = "NEW NAME" and even seriesArray[0][].name = "HELP ME" but with no success.

Fundamentally, this is a simple problem. For some reason I just cannot get my head wrapped around the relationship of the fields (attributes?) within the Javascript Objects here.

This works for me:

var seriesArray = new Array(
  {name: 'Before Event', 
   y: 115,
   color: '#8E8E93'},
  {name: 'Since Event',
   y: 35,
   color: '#5AC8FA'}
);

console.log(seriesArray);

seriesArray[0].name = "Test";

console.log(seriesArray);

Thanks @cpradio

But which of the two values of ‘name’ is being accessed? And how do I explicitly change either one?
I need to [ultimately] put a small function call for each of the ‘y’ attributes and change the name(s).

Change the 0 to a 1 for the second instance :smile:

Do you know which instances you need to alter, or do you need to take input and search your array to determine which to alter?

AW SHUCKS!
Now I see where my mind was going completely blank. Buried among all my other code, I was blind to the fact that the array has two elements.

Although it is an array, for some unknown reason, my brain kept seeing it as a single element in the array. HOW TOTALLY DUMB.

But, I needed someone to point me to it. Thanks @cpradio !

1 Like

Is there some partivcular reason why you are using new Array() instead of simply using [] instead (the short way of defining an array)?

It was more as a matter of ‘habit’ (from other languages) than anything else.
But you bring up another important question, @felgall, regarding scope. My habit from using Javascript a lot when it first came into existence and then ignoring it for the remaining [decades?] is to this:

var someVariable = 15;  //global scope
aVariable = "some text";  //local scope only

Is this correct? In the current project - to which these questions refer - I am working “inside” an anonymous function (not by choice). As a result there are some ‘delicate’ issues with scoping of my variables and functions.

I appreciate your guidance on this.

If you don’t declare your variables using var and there is a variable higher up the scope chain with the same name, it will be overwritten by the new value.

Well stated.
I did have a misunderstanding of that.

Thanks.

If you use strict JavaScript (by including "use strict"; at the top of your code) then all variables must be defined using var or let and you will get an error on any that don’t.

1 Like

I haven’t seen it clarified here yet, but the above code is exactly wrong.

var is used to declare a local variable, and without it a global variable is declared.
So the correct code example looks like this:

var someVariable = 15;  //local scope only
aVariable = "some text";  //global scope
1 Like

or like this:

(function() {
"use strict";
var someVariable = 15; // function scope
{
let someOtherVariable = 1; // block scope
}
aVariable = "some text"; // error because aVariable hasn't been defined
})();
1 Like

Doesn’t work in Chrome latest without flags (presumably)

There are a few current browsers that one doesn’t currently work in. Presumably they will have it fixed by March when that command becomes officially a part of JavaScript.

WOW!
I have not done anything serious with Javascript for over a decade. I can see the language has changed (matured?) in the time I have ignored (neglected) it.

You have all helped to raise my level of respect for it and what it has grown to become!
Thanks for the input and advice.

This was prompted by my recent experimentation with Meteor. Honestly, I have eschewed all those “Javascript Frameworks” of late. But this one has such a “Rails” feel to it that it struck a chord with me. (Actually, it struck accord with my sensibilities).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.