Creating a fresh JSON structure by utilizing an established one

Question

Creating a fresh JSON structure by utilizing an established one

I have a JSON data that contains sections and rubrics, but I only need the items for a new listing. The new object named 'items' should consist of an array of all the items.

The final JSON output should be sorted by the attribute 'name' and resemble this structure:

{
  "items": [
    {
      "id": 10000006,
      "name": "Boah"
    },
    {
      "id": 10000013,
      "name": "Gut"
    },
    {
      "id": 10000003,
      "name": "Ipsum"
    },
    {
      "id": 10000001,
      "name": "Lorem"
    },
    {
      "id": 10000005,
      "name": "Lorum"
    },
    {
      "id": 10000004,
      "name": "Name"
    },
    {
      "id": 10000002,
      "name": "Stet"
    }
  ]
}

To create the new JSON, I am provided with the following source data:

{
  "sections": [
    {
      "name": "FooBar",
      "rubrics": [
        {
          "name": "Foo",
          "items": [
            {
              "id": 10000001,
              "name": "Lorem"
            },
            {
              "id": 10000002,
              "name": "Stet"
            },
            {
              "id": 10000003,
              "name": "Ipsum"
            }
          ]
        },
        {
          "name": "Bar",
          "items": [
            {
              "id": 10000004,
              "name": "Name"
            },
            {
              "id": 10000005,
              "name": "Lorum"
            },
            {
              "id": 10000006,
              "name": "Boah"
            }
          ]
        }
      ]
    },
    {
      "name": "BlahBloob",
      "rubrics": [
        {
          "name": "Bla",
          "items": [
            {
              "id": 10000013,
              "name": "Gut"
            }
          ]
        },
        {
          "name": "Bloob",
          "items": [
            {
              "id": 10000014,
              "name": "Name"
            },
            {
              "id": 10000015,
              "name": "Lorem"
            }
          ]
        }
      ]
    }
  ]
}

Any suggestions on how to achieve this using plain JavaScript or perhaps TypeScript?

Thank you for taking the time to read my question. Your help is greatly appreciated!

javascript json angular typescript

Answer 1

Answer №1

To retrieve the items, simply loop through each rubric in every section of your source file. Once you have gathered all the items, just sort them based on their names and you're good to go.

This code snippet makes use of ES6 syntax, but can be easily translated into ES5 if required.

function getItems(source) {
  const itemsList = [];

  for (const section of source.sections) {
    for (const rubric of section.rubrics) {
      itemsList.push(...rubric.items);
    }
  }

  itemsList.sort((a, b) => a.name.localeCompare(b.name));

  return { itemsList };
}

Answer 2

To retrieve the items, simply loop through each rubric in every section of your source file. Once you have gathered all the items, just sort them based on their names and you're good to go.

This code snippet makes use of ES6 syntax, but can be easily translated into ES5 if required.

function getItems(source) {
  const itemsList = [];

  for (const section of source.sections) {
    for (const rubric of section.rubrics) {
      itemsList.push(...rubric.items);
    }
  }

  itemsList.sort((a, b) => a.name.localeCompare(b.name));

  return { itemsList };
}

Answer 3

Answer №2

Utilizing a more practical approach involves utilizing the map and reduce functions to select the rubrics and combine them together.

data.sections
  .map(section => section.rubrics) // extracting rubrics
  .reduce((a, b) => a.concat(b)) // merging rubrics
  .map(rubric => rubric.items) // obtaining items from each rubric
  .reduce((a, b) => a.concat(b)) // merging items
  .sort((a, b) => a.name.localeCompare(b.name)); // sorting

Answer 4

Utilizing a more practical approach involves utilizing the map and reduce functions to select the rubrics and combine them together.

data.sections
  .map(section => section.rubrics) // extracting rubrics
  .reduce((a, b) => a.concat(b)) // merging rubrics
  .map(rubric => rubric.items) // obtaining items from each rubric
  .reduce((a, b) => a.concat(b)) // merging items
  .sort((a, b) => a.name.localeCompare(b.name)); // sorting

Answer 5

Answer №3

const transformObject = (oldObj) => {
    let newObj = {
        "items": []
    };

    oldObj.sections.forEach((section) => {
        section.rubrics.forEach((rubric) => {
            rubric.items.forEach((item) => {
                newObj.items.push(item);
            });
        });
    });

    newObj.items = newObj.items.sort((a, b) => {
        if (a.name < b.name) { return -1; }
        if (a.name > b.name) { return 1; }
        return 0;
    });
    return newObj;
}

You can easily convert JSON to objects and vice versa by using the methods JSON.parse() and JSON.stringify().

Answer 6

const transformObject = (oldObj) => {
    let newObj = {
        "items": []
    };

    oldObj.sections.forEach((section) => {
        section.rubrics.forEach((rubric) => {
            rubric.items.forEach((item) => {
                newObj.items.push(item);
            });
        });
    });

    newObj.items = newObj.items.sort((a, b) => {
        if (a.name < b.name) { return -1; }
        if (a.name > b.name) { return 1; }
        return 0;
    });
    return newObj;
}

You can easily convert JSON to objects and vice versa by using the methods JSON.parse() and JSON.stringify().

Answer 7

Answer №4

Here's a potential solution

var data ={
"sections": [
{
"name": "FooBar",
"rubrics": [{"name": "Foo", "items": [{"id": 10000001,"name": "Lorem"}, {"id": 10000002,"name": "Stet"}, {"id": 10000003,"name": "Ipsum"}]
}, {
"name": "Bar",
"items": [{
"id": 10000004,
"name": "Name"
}, {
"id": 10000005,
"name": "Lorum"
}, {
"id": 10000006,
"name": "Boah"
}]
}]
}, {
"name": "BlahBloob",
"rubrics": [{
"name": "Bla",
"items": [{
"id": 10000013,
"name": "Gut"
}]
}, {
"name": "Bloob",
"items": [{
"id": 10000014,
"name": "Name"
}, {
"id": 10000015,
"name": "Lorem"
}]
}]
}]
};
var itemObj = {};
var itemArr = [];
var sections = data.sections;
for(var i=0;i<sections.length;i++)
{
  for(var j=0;j<sections[i].rubrics.length;j++){    
    for(var k=0;k<sections[i].rubrics[j].items.length;k++){      
      var itemObj;
      itemObj['id'] = sections[i].rubrics[j].items[k].id;
      itemObj['name'] = sections[i].rubrics[j].items[k].name;      
      itemArr.push(itemObj);
    }
  }
}
var finalObj = {"items":itemArr};
console.log(finalObj);

JSFiddle Link

Answer 8

Here's a potential solution

var data ={
"sections": [
{
"name": "FooBar",
"rubrics": [{"name": "Foo", "items": [{"id": 10000001,"name": "Lorem"}, {"id": 10000002,"name": "Stet"}, {"id": 10000003,"name": "Ipsum"}]
}, {
"name": "Bar",
"items": [{
"id": 10000004,
"name": "Name"
}, {
"id": 10000005,
"name": "Lorum"
}, {
"id": 10000006,
"name": "Boah"
}]
}]
}, {
"name": "BlahBloob",
"rubrics": [{
"name": "Bla",
"items": [{
"id": 10000013,
"name": "Gut"
}]
}, {
"name": "Bloob",
"items": [{
"id": 10000014,
"name": "Name"
}, {
"id": 10000015,
"name": "Lorem"
}]
}]
}]
};
var itemObj = {};
var itemArr = [];
var sections = data.sections;
for(var i=0;i<sections.length;i++)
{
  for(var j=0;j<sections[i].rubrics.length;j++){    
    for(var k=0;k<sections[i].rubrics[j].items.length;k++){      
      var itemObj;
      itemObj['id'] = sections[i].rubrics[j].items[k].id;
      itemObj['name'] = sections[i].rubrics[j].items[k].name;      
      itemArr.push(itemObj);
    }
  }
}
var finalObj = {"items":itemArr};
console.log(finalObj);

JSFiddle Link

Creating a fresh JSON structure by utilizing an established one

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to utilizing element reference with material UI components in Angular

Aptana - Expose the Declaration

Is it feasible to verify the accuracy of the return type of a generic function in Typescript?

utilizing PHP to transform a JSON string into an array

Issue with Angular Unit Test: Provider for WebSocketAPI is missing

What is the best way to make sure the embedded object fills the entire height of the container div?

When transitioning to an object, Vue.js fails to refresh

Preserve the scroll location while adding new content to a list in AngularJS

Problem with C# HTTP Post Curl functionality

The luminosity of MeshBasicMaterial in Three.js

Ways to intercept a POST request from a different web service

Nodemailer is functioning properly in a local environment, however, it is encountering issues when

The browser displays the jQuery ajax response instead of passing it to the designated callback function

Images Are Failing to Load on the Webpage

Querying JSON data within a PostgreSQL database that contains embedded JSON objects

Typescript - optional type when a generic is not given

When I delete the initial element from the array, the thumbnail image disappears

Fetching JSON data with Ajax is successful, but the information is not being displayed

What is the reason behind the absence of compile time errors when using 'string' functions on an 'any' field type variable in TypeScript?

javascript: update hidden field if date is past January 15th