What is the process for modifying JSON attributes with JavaScript?

Question

What is the process for modifying JSON attributes with JavaScript?

One JSON data set is provided below:

[{ ID: '0001591',
    name: 'EDUARDO DE BARROS THOMÉ',
    class: 'EM1A',
    'phone Pai': '(11) 999822922',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a1b7a0b5bbbde5e2e5e292b5bebdb0bdfcb1bdbf">[email protected]</a>',

  { ID: '0001592',
    name: 'JEAN LUC EUGENE VINSON',
    class: 'EM1A',
    'phone Pai': '(11) 981730534',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046e61656a7461726d6a44606d77706d77706b676f2c676b692c6676">[email protected]</a>',

I'd like it to be displayed as follows:

[{ ID: '0001591',
    name: 'EDUARDO DE BARROS THOMÉ',
    class: 'EM1A',
    Address[
        type:Phone,
        tag:Pai,
        address:'(11) 999822922',
]
Address[
        type:Email,
        tag:Pai,
        address:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2c3a2d383630686f686f1f3833303d30713c3032">[email protected]</a>',
]

 },
  { ID: '0001592',
    name: 'JEAN LUC EUGENE VINSON',
    class: 'EM1A',
Address[
        type:Phone,
        tag:Pai,
        address:'(11) 981730534',
]
Address[
        type:email,
        tag:Pai,
        address:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701a15111e001506191e031f1e30141903041f131b5e131f1d5e1202">[email protected]</a>',
]
     } ]

If you have any suggestions, please feel free to share.

javascript json

Answer 1

Answer №1

Fixing your JSON slightly, let's consider this JS object (although it remains invalid JSON but a valid JS object):

var json = [{ ID: '0001591',
    name: 'EDUARDO DE BARROS THOMÉ',
    class: 'EM1A',
    'phone Pai': '(11) 999822922',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6958394818f89d1d6d1d6a6818a898489c885898b">[email protected]</a>'
  },
  { ID: '0001592',
    name: 'JEAN LUC EUGENE VINSON',
    class: 'EM1A',
    'phone Pai': '(11) 981730534',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08626d6966786d7e61667b67648545405077d5dfdcb8dd4d1c188ccc1dbdccdc9db96dcc0d1904844">[email protected]</a>'
   }];

This array contains two objects, and to access each object, you would use an index like so:

json[0];
json[1];

To access a specific property of an object, use the key, for instance:

json[0].name;
json[0]['name']; // equivalent way to retrieve the property value

To add a property to an object, you can do this:

json[0].Address = []; 
json[0].Address.push({
    type: 'Phone',
    tag: 'Pai',
    address: '(11) 999822922'}); 

json[0].Address.push({
    type: 'Email',
    tag: 'Pai',
    address: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a293f283d33356d6a6d6a1a3d3635383574393537">[email protected]</a>'});

This will result in the desired final object.

If you want to automate this process by reading values such as 'phone Pai' and 'email Pai', you'll need to loop through the array, analyze the keys to determine types and tags, and then add a new property to each object based on the analyzed data.

Answer 2

Fixing your JSON slightly, let's consider this JS object (although it remains invalid JSON but a valid JS object):

var json = [{ ID: '0001591',
    name: 'EDUARDO DE BARROS THOMÉ',
    class: 'EM1A',
    'phone Pai': '(11) 999822922',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6958394818f89d1d6d1d6a6818a898489c885898b">[email protected]</a>'
  },
  { ID: '0001592',
    name: 'JEAN LUC EUGENE VINSON',
    class: 'EM1A',
    'phone Pai': '(11) 981730534',
    'email Pai': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08626d6966786d7e61667b67648545405077d5dfdcb8dd4d1c188ccc1dbdccdc9db96dcc0d1904844">[email protected]</a>'
   }];

This array contains two objects, and to access each object, you would use an index like so:

json[0];
json[1];

To access a specific property of an object, use the key, for instance:

json[0].name;
json[0]['name']; // equivalent way to retrieve the property value

To add a property to an object, you can do this:

json[0].Address = []; 
json[0].Address.push({
    type: 'Phone',
    tag: 'Pai',
    address: '(11) 999822922'}); 

json[0].Address.push({
    type: 'Email',
    tag: 'Pai',
    address: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a293f283d33356d6a6d6a1a3d3635383574393537">[email protected]</a>'});

This will result in the desired final object.

If you want to automate this process by reading values such as 'phone Pai' and 'email Pai', you'll need to loop through the array, analyze the keys to determine types and tags, and then add a new property to each object based on the analyzed data.

What is the process for modifying JSON attributes with JavaScript?

Answer №1

Similar questions

Press the second form submit button after the completion of another Observable

Issue with floating date and time not functioning properly in ICS file for Yahoo Calendar

Issue encountered during the installation of gulp using npm install

The concept of CSS Parent Elements refers to the relationship

The iconbar feature in the mobile menu is experiencing functionality issues

Problems with Vuex getter reactivity when used in conjunction with Vue router

Preventing jQuery parser from turning arrays into objects

Using AJAX, SQL and PHP to send data to a separate page for processing

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

What is the best way to add an element before every child in a react jsx render function?

Extract the list of selected item Id's from the HTML table and transfer them to the Controller

The shared global variable or store feature is currently not functioning as expected in Vue JS

I'm facing a challenge with displaying data on a dynamically created table using VueJS

Is it feasible to utilize the Next.js (App Router) Context API to access this context in every fetch request?

What is the best way to keep a button visible at all times and active without needing to be clicked?

In PATCH requests, JSON data is not transmitted through Ajax

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

Ember - Issue with Page Display

Providing access to information even in the absence of JavaScript functionality

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?