restructure json object using javascript

Question

I've this object:

[
    {
        "_token": "lRM32nH7KAnt2xdDkUJBJYniNnANJVhG20BGnjHE",
        "academic[2][id]": "-1",
        "title[2][name]": "Test Title",
        "from_date[2]": "2021-05-16",
        "to_date[2]": "2021-05-17",
        "institute[2]": "Titletest title test title ",
        "title[3][name]": "Test TitleTest Title",
        "from_date[3]": "2021-05-17",
        "to_date[3]": "2021-05-18",
        "institute[3]": "test title test title test title test title "
    }
]

And i want to restructure it to:

[
  {"title": "Test Title", "from_date": "2021-05-17", "to_date": "2021-05-18","institute":"Title"},
  {"title": "Test TitleTest Title", "from_date": "2021-05-17", "to_date": "2021-05-18","institute":"Title"},
  {"title": "Test Title", "from_date": "2021-05-17", "to_date": "2021-05-18","institute":"Title"},
]

How can i do this using javascript? or any simple approach using javascript?

Edit: What I've done so far is:

 const data = new FormData(document.querySelector('#academic-form'));
 const result = [Object.fromEntries(data.entries())][0];

 const academics = [];
 for(var key in result){
   // console.log('key: ' + key);
   console.log('title: ' + result[key]);
   console.log(result[i]);
   academics.push({
       //push values in academics array. 
   });
    
 }

What code have you attempted? You should add that to your question. — Andy
– Andy, Commented May 16, 2021 at 7:13
How about just const result = data.map(item => ({ title: item['title[2][name]'], <othervalues> }));, and then just replace <othervalues> with the additional properties (similar to title)? — ssc-hrep3
– ssc-hrep3, Commented May 16, 2021 at 7:32
the title[2][name] is just for demo there are multiple values which can range from 2 to 10 or 15. What to do in that case? — psycho developer
– psycho developer, Commented May 16, 2021 at 7:39

Andy · Accepted Answer · 2021-05-16 07:49:33Z

1

Assuming you're grouping by the number in the object keys* you can use a regex to break up the object keys into into a label and number, and reduce over the object key/value pairs to create a new object using the number as a new key. You can then use Object.values to create an array from that object.

*Note that this output only produces two objects, not the three indicated in your expected output.

const arr = [{
  "_token": "lRM32nH7KAnt2xdDkUJBJYniNnANJVhG20BGnjHE",
  "academic[2][id]": "-1",
  "title[2][name]": "Test Title",
  "from_date[2]": "202 1-05-16",
  "to_date[2]": "2021-05-17",
  "institute[2]": "Titletest title test title ",
  "title[3][name]": "Test TitleTest Title",
  "from_date[3]": "2021-05-17",
  "to_date[3]": "2021-05-18",
  "institute[3]": "test title test title test title test title "
}];

const regex = /(title|from_date|to_date|institute)(\[\d\])/;

// Iterate over the object grabbing the key and value
const out = Object.entries(arr[0]).reduce((acc, [key, value]) => {

  // Create a match array using the regex on the key
  const match = key.match(regex);

  // If there is a match...
  if (match) {

    // Use the number in the match to create a new
    // key on the accumulator object if it doesn't exist,
    // and set it to an empty object
    acc[match[2]] = acc[match[2]] || {};

    // Now assign a value to the property in that object
    // identified by the match (title, to_date etc)
    acc[match[2]][match[1]] = value;
  }

  // Return the accumulated object for the next iteration
  return acc;
}, {});

console.log(Object.values(out));

answered May 16, 2021 at 7:49

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

2 Comments

psycho developer Over a year ago

Thanks. Worked like a charm. Could you please tell me if there's any simple approach to do this without using regex?

Andy Over a year ago

I couldn't think of one. You need to be able to identify both the key, and a way to differentiate between the objects (the number), and this seemed the easiest solution.

Collectives™ on Stack Overflow

restructure json object using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related