How to create dynamic json object in javascript

Question

I'm setting up columns in angular-ui-grid like this:

            $scope.columns.push({
                displayName: 'TimeStamp', field: 'x', width: $scope.setGridColumnWidth(), sort: {
                    direction: uiGridConstants.DESC,
                    priority: 1
                }
            });

            for (let i = 0; i < view.trend.getTagsList().length; i++)
                $scope.columns.push({ displayName: view.trend.getTagsList()[i].getTitle(), field: 'y' + view.trend.getTagsList()[i].getId(), width: $scope.setGridColumnWidth() });

So if a trend contains 2 tags I'll get a ui-grid with the columns {x, y{id0}, y{id1} }.

Now I'm trying to bind data using:

            $scope.data = [];
            let taglist = view.trend.getTagsList();

            for (let i = 0; i < taglist.length; i++)
                for (let n of taglist[i].getData())
                    $scope.data.push({ x: n.x, 'y' + taglist[i].getId(): n.y });

But I can't dynamically define an attribute in a json using 'y' + taglist[i].getId() instead it wants a fixed value. Anyone knows a neat way to solve this?

Just as side node, you should save view.trend.getTagsList() in a variable. — jcubic
– jcubic, Commented May 17, 2016 at 9:52
@adeneo On the contrary, referring to a simple object of key-value pairs as a "JSON-like object" is nice and descriptive. It is certainly less verbose than "Object instance" or "collection of key-value pairs". — John Weisz
– John Weisz, Commented May 17, 2016 at 9:52
@JohnWhite: On the contrary, it's misleading and perpetuates a misunderstanding that leads to nonsense code and confused thinking (just hang out in the javascript tag for a couple of days). It's an "object." That's all. adeneo is quite right to try to fix it wherever he finds it. — T.J. Crowder
– T.J. Crowder, Commented May 17, 2016 at 9:53
@T.J.Crowder Indeed it is, assuming involved people are confused between an "instance of Object" and a "string containing Javascript object notation" -- which is certainly not the case with even intermediary-level developers (although I perfectly understand what you are trying to hint at). — John Weisz
– John Weisz, Commented May 17, 2016 at 9:57

Paarth · Accepted Answer · 2016-05-17 09:55:04Z

3

You want ES6's dynamic properties.

They would allow you to do something like this

$scope.data.push({ x: n.x, ['y' + view.trend.getTagsList()[i].getId()]: n.y });

You can use a ES6-ES5 transpiler to achieve this. I see you have this tagged with typescript. As of Typescript 1.5 the compiler will handle this. For those stuck on ES5, create the object manually.

let obj = { x: n.x };
obj['y' + view.trend.getTagsList()[i].getId()] = n.y;
$scope.data.push(obj);

edited May 17, 2016 at 9:55

answered May 17, 2016 at 9:49

Paarth

10.5k4 gold badges30 silver badges37 bronze badges

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

Comments

Marc Compte · Accepted Answer · 2016-05-17 09:51:47Z

1

Have you tried initializing first the object? Something like ...

var newObj = {"x": n.x};
eval ('newObj.y'+view.trend.getTagsList()[i].getId()+' = '+ n.y);

A simple test here: https://jsfiddle.net/544vso45/

answered May 17, 2016 at 9:51

Marc Compte

4,8592 gold badges18 silver badges22 bronze badges

2 Comments

President Camacho Over a year ago

Thanks for answer, you're correct but I'll go with @Paarth's answer since it fits my code best.

Marc Compte Over a year ago

Sure, no problem, you choose what fits you better.

Kito · Accepted Answer · 2016-05-17 09:54:55Z

1

If i understand you correctly, you want to dynamically set a key in your object.

You can do that as follows:

var y_final = 'y' + view.trend.getTagsList()[i].getId();
var obj = {};
obj[y_final] = n.y;
obj[x] = n.x;
$scope.data.push(obj);

edited May 17, 2016 at 9:54

answered May 17, 2016 at 9:50

Kito

1,4054 gold badges18 silver badges38 bronze badges

1 Comment

President Camacho Over a year ago

Thanks for answer, you're correct but I'll go with @Paarth's answer since it fits my code best.

Collectives™ on Stack Overflow

How to create dynamic json object in javascript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related