create new json from existing json using AngularJS or Javascript

Question

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);
    });    
});

*"but it is not showing perfect data"* What does it do wrong? What problem are you having fixing it? — T.J. Crowder, Nov 20 '17 at 08:14
JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Nov 20 '17 at 08:14
If you can modify the api result by access the server code, I believe you should do it from the server side. — Aboodz, Nov 20 '17 at 08:21

Zevgon · Accepted Answer · 2017-11-20T08:41:33.973

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));

score 1 · Answer 2 · answered Nov 20 '17 at 08:30

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

score 1 · Answer 3 · answered Nov 20 '17 at 08:31

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);

score 1 · Answer 4 · answered Nov 20 '17 at 08:34

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..

score 1 · Answer 5 · answered Nov 20 '17 at 08:45

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);
});

create new json from existing json using AngularJS or Javascript

5 Answers5