Associate JSON sub-string with corresponding main parent

Question

Associate JSON sub-string with corresponding main parent

I am working with a JSON string that is generated from an API.

[{"categories":{"category":{"id":"1","Name":"fruit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2","Name":"pears"}}}]

I want to restructure the data so that all child values are pushed to their parent. Here is an example of how I would like the data to look:

[{"categories":{"category":[{"id":"1","name":"fruit"},{"id":"2","name":"veg"}]}},{"products":{"products":[{"id":"1","name":"apple"},{"id":"2","name":"pears"}]}}]

Thank you in advance for your help.

Updated data structure

javascript arrays json object

Answer 1

Answer №1

To transform your data structure, you can create a new object and use the map function. Then, assign the modified data to the new object.

var data = [{"categories":{"category":{"id":"1","Name":"furit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}]
  
var r = {
  categories: {
    category: data.map(o => o.categories.category)
  }
}
console.log(r)

For an updated data structure, utilize a forEach() loop to populate the object with the new data.

var data = [{"categories":{"category":{"id":"1","Name":"furit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2","Name":"pears"}}}]

var r = {categories: {category: []}, products: {product: []}}
data.forEach(function(e) {
  if(e.categories) r.categories.category.push(e.categories.category)
  if(e.products) r.products.product.push(e.products.product)
})

console.log(r)

Answer 2

To transform your data structure, you can create a new object and use the map function. Then, assign the modified data to the new object.

var data = [{"categories":{"category":{"id":"1","Name":"furit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}]
  
var r = {
  categories: {
    category: data.map(o => o.categories.category)
  }
}
console.log(r)

For an updated data structure, utilize a forEach() loop to populate the object with the new data.

var data = [{"categories":{"category":{"id":"1","Name":"furit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2","Name":"pears"}}}]

var r = {categories: {category: []}, products: {product: []}}
data.forEach(function(e) {
  if(e.categories) r.categories.category.push(e.categories.category)
  if(e.products) r.products.product.push(e.products.product)
})

console.log(r)

Answer 3

Answer №2

You can utilize the Array.prototype.reduce() method to condense all the items in your array of category objects into a single categories array, resulting in the desired outcome.

Your code should appear as follows:

var result = data.reduce(function(a, b) {
  a[0].categories.push(b.categories);
  return a;
}, [{
  categories: []
}]);

Alternatively, if you prefer an object as the output instead of an array, you can use the following:

var result = data.reduce(function(a, b) {
  a.categories.push(b.categories);
  return a;
}, {
  categories: []
});

Example:

var data = [{
    "categories": {
      "category": {
        "id": "1",
        "Name": "fruit"
      }
    }
  },
  {
    "categories": {
      "category": {
        "id": "2",
        "Name": "veg"
      }
    }
  }
];

var result = data.reduce(function(a, b) {
  a[0].categories.push(b.categories);
  return a;
}, [{
  categories: []
}]);

console.log(result);

Update:

This update includes adding products to the original object:

var result = data.reduce(function(a, b) {
  if(b.categories)
      a[0].categories.push(b.categories);
   if(b.products)   
       a[0].products.push(b.products);
  return a;
}, [{
  categories: [],
  products : []
}]);

Example:

var data = [{"categories":{"category":{"id":"1","Name":"fruit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2","Name":"pears"}}}]
;

var result = data.reduce(function(a, b) {
  if(b.categories)
      a[0].categories.push(b.categories);
   if(b.products)   
       a[0].products.push(b.products);
  return a;
}, [{
  categories: [],
  products : []
}]);

console.log(result);

Answer 4

You can utilize the Array.prototype.reduce() method to condense all the items in your array of category objects into a single categories array, resulting in the desired outcome.

Your code should appear as follows:

var result = data.reduce(function(a, b) {
  a[0].categories.push(b.categories);
  return a;
}, [{
  categories: []
}]);

Alternatively, if you prefer an object as the output instead of an array, you can use the following:

var result = data.reduce(function(a, b) {
  a.categories.push(b.categories);
  return a;
}, {
  categories: []
});

Example:

var data = [{
    "categories": {
      "category": {
        "id": "1",
        "Name": "fruit"
      }
    }
  },
  {
    "categories": {
      "category": {
        "id": "2",
        "Name": "veg"
      }
    }
  }
];

var result = data.reduce(function(a, b) {
  a[0].categories.push(b.categories);
  return a;
}, [{
  categories: []
}]);

console.log(result);

Update:

This update includes adding products to the original object:

var result = data.reduce(function(a, b) {
  if(b.categories)
      a[0].categories.push(b.categories);
   if(b.products)   
       a[0].products.push(b.products);
  return a;
}, [{
  categories: [],
  products : []
}]);

Example:

var data = [{"categories":{"category":{"id":"1","Name":"fruit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2","Name":"pears"}}}]
;

var result = data.reduce(function(a, b) {
  if(b.categories)
      a[0].categories.push(b.categories);
   if(b.products)   
       a[0].products.push(b.products);
  return a;
}, [{
  categories: [],
  products : []
}]);

console.log(result);

Associate JSON sub-string with corresponding main parent

Updated data structure

Answer №1

Answer №2

Update:

Similar questions

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

The expression req.files consistently comes back as an empty [object]

Ways to retrieve numerous data points from an array of dictionaries?

I could really use some assistance with this project for my friend

What is the jquery alternative to the PHP 'if IP equals' condition?

Issue with child prop not being updated despite changes in parent component

The customized uploading button functions seamlessly on desktop devices, yet encounters issues when used on

HTML code causing an Ajax post request to return a null value

Having issues with socket.io connectivity on my Node server

combination of Vue methods from a separate file

What is the best Haskell library for handling JSON data?

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Utilizing a dynamically created Stripe checkout button

"Learn how to use JavaScript and jQuery to alphabetically sort the default td values in a table

Struggling to retrieve the fake JavaScript data for my Vue.js table

Troubleshooting a Multi-dimensional Array Reference Issue

Easy steps for importing node modules in TypeScript

Do JavaScript have dictionary functionality similar to Python?

Encountering a duplicate key error in ExpressJS collection