construct json object in Angular with dynamic field names

Question

newbie question: is there a better way to construct json object in Angular? Currently I can only do the following:

var fieldName1 = 'name1';
var fieldValue1 = 'value1';
var fieldName2 = 'name2';
var fieldValue2 = 'value2';

//**failed to compile**
// var result = {{fieldName1:fieldValue1},{fieldName2,fieldValue2}};

var object1 = {};
object1[`${fieldName1}`] = fieldValue1;
var object2 = {};
object2[`${fieldName2}`] = fieldValue2;

var result = {object1, object2};

The field names "name1", "name2" are not static values. The expected result is:

{
  { name1 : "value1" },
  { name2 : "value2" }
}

Vivek Doshi · Accepted Answer · 2018-02-14 05:56:07Z

3

Just Run The Snippet , you will get the idea :

var fieldName1 = 'name1';
var fieldValue1 = 'value1';
var fieldName2 = 'name2';
var fieldValue2 = 'value2';

var object = {};
object[fieldName1] = fieldValue1;
object[fieldName2] = fieldValue2;

console.log(object);

answered Feb 14, 2018 at 5:56

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

Comments

Aakriti.G · Accepted Answer · 2018-02-14 05:46:14Z

1

Use this:

let object = {}
for(let field of allFields){
    object[field] = value
}

Here allFields is an array with all fields.

answered Feb 14, 2018 at 5:46

Aakriti.G

6861 gold badge11 silver badges26 bronze badges

Comments

Chellappan வ · Accepted Answer · 2018-02-14 06:14:04Z

0

Use this if you want to make the array of value into JSON Object.

var fieldName = ['name1','name2'];
var fieldValue =['value1','value2'];
var object = {};
  for(i=0;i<fieldName.length;i++){
    object[fieldName[i]]=fieldValue[i];
   }
  console.log(object);

answered Feb 14, 2018 at 6:14

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Comments

aditya ammanabrolu · Accepted Answer · 2018-02-14 06:31:31Z

0

Try this:

var fieldName1 = 'name1';
var fieldValue1 = 'value1';
var fieldName2 = 'name2';
var fieldValue2 = 'value2';
var object = {};
object[fieldName1] = fieldValue1;
object[fieldName2] = fieldValue2;
object = JSON.stringify(object);
object=object.replace(/"(\w+)"\s*:/g, '$1:');
console.log(object);

answered Feb 14, 2018 at 6:31

aditya ammanabrolu

11 bronze badge

Comments

Rohìt Jíndal · Accepted Answer · 2018-02-14 07:00:12Z

Observation :

expected result in OP is not having a valid JSON.

Solutions :

Array of objects :

var fieldName1 = 'name1';
var fieldValue1 = 'value1';
var fieldName2 = 'name2';
var fieldValue2 = 'value2';

var object1 = {};
var object2 = {};

object1[fieldName1] = fieldValue1;
object2[fieldName2] = fieldValue2;

console.log(new Array(object1, object2));

single object with multiple properties :

var fieldName1 = 'name1';
var fieldValue1 = 'value1';
var fieldName2 = 'name2';
var fieldValue2 = 'value2';

var jsonObject = {};

jsonObject[fieldName1] = fieldValue1;
jsonObject[fieldName2] = fieldValue2;

console.log(jsonObject);

Sudan Shrestha · Accepted Answer · 2019-09-15 09:20:02Z

0

let object = {};
someRequest.forEach((value: string, key: string) => {
    object[key]=value;
})

answered Sep 15, 2019 at 9:20

Sudan Shrestha

1071 gold badge2 silver badges11 bronze badges

1 Comment

Trenton McKinney Over a year ago

The provided answer was flagged for review as a Low Quality Post. Here are some guidelines for How do I write a good answer?. This provided answer may be correct, but it could benefit from an explanation. Code only answers are not considered "good" answers. From review.

Adolfo Rangel · Accepted Answer · 2023-03-15 20:30:39Z

0

For Angular 11 or greater, you need declare the type, example:

type tplotOptions = {
    [key: string]: boolean
}
const plotOptions: tplotOptions = {
    train_1: true,
    train_2: true
}

or

type tplotOptions = {
    [key: string]: string
}
const plotOptions: tplotOptions = {
    train_1: 'data1',
    train_2: 'data2'
}

answered Mar 15, 2023 at 20:30

Adolfo Rangel

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

construct json object in Angular with dynamic field names

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Related