create new json from existing json using AngularJS or Javascript - javascript

Category JSON
I am getting this JSON by accessing API and soring it in $scope.categoryList
[
{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
]
SubCategory JSON
I am getting this JSON by accessing API and soring it in $scope.subCategoryList
[
{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
]
I need to design this in below format
[
{
"categoryId" : 1,
"categoryName" : "Men",
"subCategory" : [
{
"subCategoryId": 1,
"subCategoryName": "Footwear"
},
{
"subCategoryId": 3,
"subCategoryName": "Cloths"
},
]
},
{
"categoryId" : 2,
"categoryName" : "Women",
"subCategory" : [
{
"subCategoryId": 2,
"subCategoryName": "Footwear"
}
]
},
{
"categoryId" : 3,
"categoryName" : "Kids",
"subCategory" : []
}
]
I have the code but it is not showing perfect data
$scope.catSubCat = []
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
$scope.subCat = {
'subCategoryId' : '',
'subCategoryName' : ''
}
angular.forEach($scope.categoryList, function(catValue, catKey) {
if(subValue.category_id == catValue.id) {
$scope.subCat.subCategoryId = subValue.id;
$scope.subCat.subCategoryName = subValue.name;
$scope.subCategory = {
'categoryId' : '',
'categoryName' : '',
'subCatName' : []
}
$scope.catVal.categoryId = subValue.category_id;
$scope.catVal.categoryName = catValue.name;
$scope.catVal.subCatName.push($scope.subCat);
}
$scope.catSubCat.push($scope.catVal);
});
});

This should do the trick. Not as clean as 31piy's (wow!) but more efficient. (O(N + M) as opposed to O(N * M))
const categoryList = [
{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
];
const subCategoryList = [
{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
];
const mergeCategoryLists = (categoryList, subCategoryList) => {
// Turn categoryList into an object with categoryId as key
const categoryById = {};
categoryList.forEach((category) => {
categoryById[category.id] = {
categoryName: category.name,
categoryId: category.id,
subCategory: []
};
});
// Add subcategories
subCategoryList.forEach((subCategory) => {
const formattedSubCategory = {
subCategoryId: subCategory.id,
subCategoryName: subCategory.name
};
categoryById[subCategory.category_id].subCategory.push(formattedSubCategory);
});
// Convert categoryById into desired format
return Object.values(categoryById);
};
console.log(mergeCategoryLists(categoryList, subCategoryList));

Check out this logic .
$scope.newArray = angular.copy($scope.categoryList);
$scope.catSubCat = []
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
$scope.subCat = {
'subCategoryId' : '',
'subCategoryName' : ''
}
angular.forEach($scope.newArray, function(catValue, catKey) {
$scope.subCat.subCategoryId = subValue.id;
$scope.subCat.subCategoryName = subValue.name;
if(subValue.category_id == catValue.id) {
if(catValue.subCatName.hasOwnProperty('bye')){
$scope.newArray[catKey].subCatName = [];
$scope.newArray[catKey].subCatName.push($scope.subCat);
}else{
$scope.newArray[catKey].subCatName.push($scope.subCat);
}
}
});
});
Resultant will we in $scope.newArray

You can use Array#map in combination with Array#filter to achieve the desired results:
var categories = [{
"id": 1,
"name": "Men"
},
{
"id": 2,
"name": "Women"
},
{
"id": 3,
"name": "Kids"
}
];
var subcategories = [{
"id": 1,
"category_id": 1,
"name": "Footwear"
},
{
"id": 2,
"category_id": 2,
"name": "Footwear"
},
{
"id": 3,
"category_id": 1,
"name": "Cloths"
}
];
var result = categories.map(cat => {
return {
categoryId: cat.id,
categoryName: cat.name,
subCategory: subcategories
.filter(subc => subc.category_id === cat.id)
.map(subc => {
return {
subCategoryId: subc.id,
subCategoryName: subc.name
};
})
};
});
console.log(result);

var categoryList = [{
"id": 1,
"name": "Men"
}, {
"id": 2,
"name": "Women"
}, {
"id": 3,
"name": "Kids"
}];
var subCategoryList = [{
"id": 1,
"category_id": 1,
"name": "Footwear"
}, {
"id": 2,
"category_id": 2,
"name": "Footwear"
}, {
"id": 3,
"category_id": 1,
"name": "Cloths"
}];
var finalJson = [];
for (var i = 0; i < categoryList.length; i++) {
var obj = {
categoryId: categoryList[i].id,
categoryName: categoryList[i].name,
subCategory: []
};
var subCat = subCategoryList.filter(function(word) {
return word.category_id === categoryList[i].id;
});
for (var j = 0; j < subCat.length; j++) {
var obj2 = {
subCategoryId: subCat[j].id,
subCategoryName: subCat[j].name
};
obj.subCategory.push(obj2);
}
finalJson.push(obj);
}
console.log(finalJson);
Pure Javascript solution to your question, you can replace with
Angular Syntax then..

Use following code:
$scope.catSubCat = []
angular.forEach($scope.categoryList, function(catValue, catKey) {
var catObj = {
'categoryId' : '',
'categoryName' : '',
'subCatName' : []
}
catObj.categoryId = catValue.id;
catObj.categoryId = catValue.name;
angular.forEach($scope.subcategoryList, function(subValue, subKey) {
if(subValue.category_id == catValue.id) {
var subCatObj = {
'subCategoryId' : '',
'subCategoryName' : ''
}
subCatObj.subCategoryId = subValue.category_id;
subCatObj.subCategoryName = catValue.name;
catObj.subCatName.push(subCatObj);
}
});
$scope.catSubCat.push(catObj);
});

Related

Push elements of

This is, I believe a very simple question for a JS programmer. Given the following array of objects named "categories"
[
{
"id": 1,
"name": "FURNITURE",
},
{
"id": 2,
"name": "AUTOMOTIVE",
},
{
"id": 3,
"name": "UPHOLSTERY",
}
]
I want to push the "name" on the "selectedCategories" array below where "id" === "id"
[
{
"id": 1
},
{
"id": 3
}
]
Below is my attempt to solve this, but ... not working..
for (let i = 0; i < selectedCategories.length; i++) {
for(let y = 0; y < categories.length; y++){
selectedCategories.name = categories[y].name
}
}
I believe this is what you are looking for
selectedCategories = selectedCategories.map(el => {
const searchEl = categories.find(e => e.id === el.id);
if (searchEl)
return { ...el, name: searchEl.name }
return el;
});
const categories = [
{
"id": 1,
"name": "FURNITURE",
},
{
"id": 2,
"name": "AUTOMOTIVE",
},
{
"id": 3,
"name": "UPHOLSTERY",
}
];
var selectedCategories = [
{
"id": 1,
},
{
"id": 3,
}
];
selectedCategories = selectedCategories.map(
selectedCategory => categories.find(category => category.id === selectedCategory.id),
);
console.log(selectedCategories);

How to group by and sum an array of objects javascript?

const array = [
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
}
]
var result = [];
array.reduce(function(res, value) {
if (!res['data']['toy'] || !res['data']['toy']['data']) {
res['data'] = {...value['data'] };
result.push(res['data'])
}
if (res['data']['available'] === value['data']['available'] && res['data']['toy']['id'] === value['data']['toy']['id']) {
res['data']['qty'] = parseInt(res['data']['qty']) + parseInt(value['data'].qty)
}
return res;
}, {'data': {}});
console.log(result)
I am working on a js project and I need a bit of help here. From the array, How to get a new array that has qty as the sum of the other qty value which data.toy.id and available same. i.e. I want the below array. My code is not working as excepted. Changes to the same or new code are also fine. Thank you.
const array = [
{
"data": {
"qty": "10",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
}
]
You group the array into an object, where the keys are concatenation of available and id properties and finally transform the object back to an array using Object.values.
const
array = [
{ data: { qty: "5", toy: { id: 3 }, available: "yes" } },
{ data: { qty: "5", toy: { id: 10 }, available: "no" } },
{ data: { qty: "59", toy: { id: 10 }, available: "yes" } },
{ data: { qty: "5", toy: { id: 3 }, available: "yes" } },
],
result = Object.values(
array.reduce((r, { data }) => {
const k = data.available + data.toy.id;
if (r[k]) {
r[k].data.qty = String(Number(r[k].data.qty) + Number(data.qty));
} else {
r[k] = { data };
}
return r;
}, {})
);
console.log(result);
I'd suggest using Array.reduce() to group by a key, which will be combined value of the toy id and the available property.
We'd create a map of all toys based on this key, summing the quantity for each.
Finally, we'll use Object.values() to convert back into an array.
const array = [ { "data": { "qty": "5", "toy": { "id": 3, }, "available": "yes", } }, { "data": { "qty": "5", "toy": { "id": 10, }, "available": "no" } }, { "data": { "qty": "59", "toy": { "id": 10, }, "available": "yes", } }, { "data": { "qty": "5", "toy": { "id": 3, }, "available": "yes", } } ];
const result = Object.values(array.reduce((acc, { data: { qty, toy, available } }) => {
const key = `${toy.id}-${available}`;
acc[key] = acc[key] || { data: { qty: 0, toy, available } };
acc[key].data.qty += Number(qty);
return acc;
}, {}))
console.log('Result:', result)
.as-console-wrapper { max-height: 100% !important; }
You can use Array#reduce() to create arrayHash object using as keys: ${c.data.toy.id}-${c.data.available}
Code:
const array = [{data: {qty: '5',toy: {id: 3,},available: 'yes',},},{data: {qty: '5',toy: {id: 10,},available: 'no',},},{data: {qty: '59',toy: {id: 10,},available: 'yes',},},{data: {qty: '5',toy: {id: 3,},available: 'yes',},},]
const arrayHash = array.reduce((a, { data }) => {
const key = `${data.toy.id}-${data.available}`
a[key] = a[key] || { data: { ...data, qty: 0 } }
a[key].data.qty = (+a[key].data.qty + +data.qty).toString();
return a
}, {})
const result = Object.values(arrayHash)
console.log(result)
I'd use just reduce
const a1 = [
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
}
]
const a2 = a1.reduce((acc, it) => {
let found = acc.find(
dp => dp.data.toy.id === it.data.toy.id && dp.data.available === it.data.available
)
if(found){
found.data.qty = ( Number(found.data.qty) + Number(it.data.qty) ).toString()
}
else acc.push(it)
return acc
}, [])
console.log(JSON.stringify(a2, null,2))

Sort Array of Objects Childs to new Array with Objects

I'm programming a small vue.js App and need to convert an array to a new one and sort them.
The array of objects I get from the backend server looks like that:
var arr =
[
{
"id": 1,
"name": "Name1",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 10
}
}
},
{
"id": 2,
"name": "Name2",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 11
}
}
},
{
"id": 3,
"name": "Name3",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 10
}
}
}
]
console.log(arr)
But I need a new array, that is sorted like that:
var newArr =
[
{
"mainId": 10,
"parents": {
"id": 1,
"name": "Name1"
}
},
{
"mainId": 11,
"parents": [
{
"id": 2,
"name": "Name2"
},
{
"id": 3,
"name": "Name3"
}
]
}
]
What is the best way to implement this?
You could group the items with the help of a Map.
var array = [{ id: 1, name: "Name1", parents: { someOtherTings: "Test", partentOfParent: { mainId: 10 } } }, { id: 2, name: "Name2", parents: { someOtherTings: "Test", partentOfParent: { mainId: 11 } } }, { id: 3, name: "Name3", parents: { someOtherTings: "Test", partentOfParent: { mainId: 10 } } }],
result = Array.from(
array.reduce(
(m, { id, name, parents: { partentOfParent: { mainId } } }) =>
m.set(mainId, [...(m.get(mainId) || []), { id, name }]),
new Map
),
([mainId, parents]) => ({ mainId, parents })
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You just need a combination of map to create a new array and then sort it based on the mainId value
var arr = [{
"id": 1,
"name": "Name1",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 10
}
}
},
{
"id": 2,
"name": "Name2",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 11
}
}
},
{
"id": 3,
"name": "Name3",
"parents": {
"someOtherTings": "Test",
"partentOfParent": {
"mainId": 10
}
}
}
]
const newArr = arr.map(obj => ({
mainId: obj.parents.partentOfParent.mainId,
parents: {
id: obj.id,
name: obj.name
},
})).sort((a, b) => b - a);
console.log(newArr);

Convert array in objects to individual strings

How can I split an array of images among an object?
For example, using the JSON below. How can produce a return string of each itemUrl and it's associated productCode?
This JSON
{
"products": [
{
"productCode": "ID1",
"images": [
{
"id": 1,
"itemUrl": "https://img.com/1.JPG"
},
{
"id": 2,
"itemUrl": "https://img.com/2.JPG"
}
]
},
{
"productCode": "ID2",
"images": [
{
"id": 3,
"itemUrl": "https://img.com/3.JPG"
},
{
"id": 4,
"itemUrl": "https://img.com/4.JPG"
},
{
"id": 5,
"itemUrl": "https://img.com/5.JPG"
}
]
}
]
}
Becomes
https://img.com/1.JPG
https://img.com/2.JPG
https://img.com/3.JPG
https://img.com/4.JPG
https://img.com/5.JPG
Currently, if I were to use
for (const tour of data.products) {
console.log(tour.images[0].itemUrl);
...
the return would obviously return
https://img.com/1.JPG
https://img.com/3.JPG
however, when
let imageEach = tour.images;
let output = [];
imageEach.forEach(item => {
output.push(item.itemUrl);
});
...
I get a return of
[{
https://img.com/1.JPG,
https://img.com/2.JPG
}]
[{
https://img.com/3.JPG
https://img.com/4.JPG
https://img.com/5.JPG
}]
You can try something like this using Array.reduce to iterate over the products and Array.map to go through the items and get the itemUrl:
const data = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] }
const result = data.products.reduce((r,{images}) => {
r.push(...images.map(x => x.itemUrl))
return r
}, [])
console.log(result.join('\n'))
Or even shorter as suggested by #Prassana by using ES6 array spread some more:
const data = { "products": [ { "productCode": "ID1", "images": [ { "id": 1, "itemUrl": "https://img.com/1.JPG" }, { "id": 2, "itemUrl": "https://img.com/2.JPG" } ] }, { "productCode": "ID2", "images": [ { "id": 3, "itemUrl": "https://img.com/3.JPG" }, { "id": 4, "itemUrl": "https://img.com/4.JPG" }, { "id": 5, "itemUrl": "https://img.com/5.JPG" } ] } ] }
const result = data.products.reduce((r,{images}) =>
[...r, ...images.map(x => x.itemUrl)], [])
console.log(result.join('\n'))
Try
var result = [];
for (var i = 0; i < data.products.length; i++) {
for (var j = 0; j < data.products[i].images.length; j++){
result.push(data.products[i].images[j].itemUrl);
}
}
console.log(result);
You need Array.concat
const data = {
"products": [
{
"productCode": "ID1",
"images": [
{
"id": 1,
"itemUrl": "https://img.com/1.JPG"
},
{
"id": 2,
"itemUrl": "https://img.com/2.JPG"
}
]
},
{
"productCode": "ID2",
"images": [
{
"id": 3,
"itemUrl": "https://img.com/3.JPG"
},
{
"id": 4,
"itemUrl": "https://img.com/4.JPG"
},
{
"id": 5,
"itemUrl": "https://img.com/5.JPG"
}
]
}
]
}
let urls = []
data.products.forEach(item => {
urls = urls.concat(item.images.map(img => img.itemUrl))
})
console.log(urls)
You could try this.
let json = {
"products": [
{
"productCode": "ID1",
"images": [
{
"id": 1,
"itemUrl": "https://img.com/1.JPG"
},
{
"id": 2,
"itemUrl": "https://img.com/2.JPG"
}
]
},
{
"productCode": "ID2",
"images": [
{
"id": 3,
"itemUrl": "https://img.com/3.JPG"
},
{
"id": 4,
"itemUrl": "https://img.com/4.JPG"
},
{
"id": 5,
"itemUrl": "https://img.com/5.JPG"
}
]
}
]
}
json.products.forEach(product => {
console.log(product.productCode + ": ")
product.images.forEach(i => console.log(i.itemUrl))
});
// or
json.products.forEach(product => {
product.images.forEach(i => console.log(product.productCode + " : " + i.itemUrl))
});
products.reduce((urls, product, i) => {
const imageURLs = product.images.map(img => img.itemUrl);
urls = urls.concat(imageURLs);
return urls;
}, []);
Try this
You can try my code to produce following result
{
"ID1" : ["https://img.com/1.JPG","https://img.com/2.JPG"],
"ID2" : ["https://img.com/3.JPG","https://img.com/4.JPG","https://img.com/5.JPG"]
}
Below is the code. Lets take your mentioned JSON data as "obj"(a variable)
obj.products.reduce((acc, product)=>{
acc[product.productcode] = product.images.map(img => img.itemUrl)
return acc
}, {})

Javascript Array - adding a value to a particular key

var all_area = [];
$.each(data,function(i,v){
$.each(v.areas,function(a,b){
all_area[i]['id'] = b.id;
all_area[i]['name'] = b.name;
});
});
I want an array that has these data:
all_area[0]['id'] = 1;
all_area[0]['name'] = "test";
all_area[1]['id'] = 2;
all_area[1]['name'] = "test123";
My code is not working. I am getting this error:
Uncaught TypeError: Cannot set property 'id' of undefined
This is the sample data that i am getting from my ajax call:
[
{
"name": "Dubai",
"id": "1",
"areas": [
{
"name": "Deira",
"id": 1,
"extra_fee": 0,
"extra_time": 0,
"min_order": 0
},
{
"name": "Bur Dubai",
"id": 2,
"extra_fee": 5,
"extra_time": 10,
"min_order": 100
}
]
},
{
"name": "Abu Dhabi",
"id": "2",
"areas": [
{
"name": "Shahama",
"id": 3,
"extra_fee": 0,
"extra_time": 0,
"min_order": 0
},
{
"name": "City Center",
"id": 4,
"extra_fee": 5,
"extra_time": 10,
"min_order": 100
}
]
}
]
Thanks.
Initialize the object
$.each(v.areas,function(a,b){
all_area[i] = {};
all_area[i]['id'] = b.id;
all_area[i]['name'] = b.name;
});
OR,
$.each(v.areas,function(a,b){
all_area[i] = {
id : b.id,
name : b.name
};
});

Categories