根據嵌套數組項單擊javascript生成動態有效負載

Question

我有這個 JSON 數據：

{
 "data": [
  {
  "category": {
    "documentId": "c8kr0cv012vtr8vm3iug",
    "title": "Art"
  },
  "subcategories": [
    {
      "documentId": "c8kr7nv012vtr8vm3l8g",
      "title": "Architecture"
    },
    {
      "documentId": "c8kr7nv012vtr8vm3lag",
      "title": "Dance"
    },
    {
      "documentId": "c8kr7nv012vtr8vm3lbg",
      "title": "Fashion"
    }
  ]
},
{
  "category": {
    "documentId": "c8kr0cv012vtr8vm3iqg",
    "title": "Business"
  },
  "subcategories": [
    {
      "documentId": "c8kr3d7012vtr8vm3jjg",
      "title": "Crypto"
    },
    {
      "documentId": "c8kr3d7012vtr8vm3jj0",
      "title": "Finance"
    },
    {
      "documentId": "c8kr3d7012vtr8vm3jkg",
      "title": "Marketing"
    }
    ]
   }
  ]
 }

我的移動屏幕上有標簽視圖，因此用戶可以通過選擇取消選擇同時選擇多個子類別，因此如果我從 Art 中選擇 2 個子類別，從 Business 中選擇 2 個子類別，那么預期的帖子有效負載應如下所示

{
"data": [
{
  "category": "c8kr0cv012vtr8vm3iug",
  "subcategories": [
    "c8kr7nv012vtr8vm3l8g",
    "c8kr7nv012vtr8vm3lag"
  ]
},
{
  "category": "c8kr0cv012vtr8vm3iqg",
  "subcategories": [
    "c8kr3d7012vtr8vm3jjg",
    "c8kr3d7012vtr8vm3jj0"
   ]
 }
 ]
 }

所以我的代碼如下

const tempDefaultPayload = dataPayload.map(x => {
    
      if (x.category) {
       x.subcategories?.push(subcategory);
         
        if (userData?.userInterests?.map(v => v.category.documentId === category)) {
          const arrayNewData: any = [];
          const newData: any = userData?.userInterests?.map(i =>
            i.subcategories?.map(k => {
              arrayNewData.push(k?.documentId);
              return k?.documentId;
            }),
          );
          x.subcategories?.push(...arrayNewData);
        }
        return x;
      }
      return x;
    })

當我在上面運行代碼有效載荷時沒有正確傳遞

[
 {
  "category": "c8kr0cv012vtr8vm3iug",
  "subcategories": [
  "c8kr7nv012vtr8vm3l8g",
  "c8kr7nv012vtr8vm3lag",
  "c8kr3d7012vtr8vm3jjg",
  "c8kr3d7012vtr8vm3jj0"
  ]
},
{
"category": "c8kr0cv012vtr8vm3iqg",
"subcategories": [
  "c8kr7nv012vtr8vm3l8g",
  "c8kr7nv012vtr8vm3lag",
  "c8kr3d7012vtr8vm3jjg",
  "c8kr3d7012vtr8vm3jj0"
  ]
}
]

它正在傳遞兩個數組中的所有選定子類別任何想法我該如何解決這個問題？

Answer 1

如果您在數組selectedTags中有選定的標簽 ID，並且您的 json 作為名為data的變量：

const tempDefaultPayload = {
  data: data.data.map(x => {
       "category": x.category.documentId,
       "subcategories": x.subcategories.map(subcat => 
       subcat.documentId).filter(item => selectedTags.includes(item))    
  })
}

游樂場示例