Question

类别JSON 我通过访问API并在 $ scope.categoryList

中对其进行测试来获取此JSON

[
  {
    "id": 1,
    "name": "Men"
  },
  {
    "id": 2,
    "name": "Women"
  },
  {
    "id": 3,
    "name": "Kids"
  }
]

SubCategory JSON 我通过访问API并在 $ scope.subCategoryList

中对其进行测试来获取此JSON

[
  {
    "id": 1,
    "category_id": 1,
    "name": "Footwear"
  },
  {
    "id": 2,
    "category_id": 2,
    "name": "Footwear"
  },
  {
    "id": 3,
    "category_id": 1,
    "name": "Cloths"
  }
]

我需要以下面的格式设计

[
    {
        "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" : []
    }
]

我有代码，但没有显示完美的数据

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

Answer 1

这应该可以解决问题。不像31piy那样干净（哇！）但效率更高。（O（N + M）而不是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));

Answer 2

看看这个逻辑。

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

我们将在$scope.newArray

中得到结果

Answer 3

您可以将Array#map与Array#filter结合使用，以达到预期效果：

＆＃13;

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

＆＃13;

Answer 4

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

纯Javascript解决您的问题，您可以替换为 Angular Syntax然后..

Answer 5

使用以下代码：

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

使用AngularJS或Javascript从现有的json创建新的json

5 个答案: