如何將自定義JSON物件添加到特定位置已存在的JSON陣列？

我的專案資料結構如下所示：

[
   {
      "accepted":true,
      "name":"abedingfield1m",
      "sent_from":"40fbdd06dfbb18c4167f751450f2885bdf3b04242e530427c85c67e20ae94de2",
      "uid":"27837d62aab82df792f1301c84c8c2576ff11f41fd6d9bdb1828a5182d54d135"
   },
   {
      "accepted":true,
      "name":"abillsonm",
      "sent_from":"9c30eeb77d8b0d836ed857b2fb9f1c52d030af833bfb5e48427bbb6d0892d297",
      "uid":"c2ad87a0f4619bb881baa3f34157fa78f14b868f01c66af975eb5faaa21eed2e"
   },
   {
      "accepted":true,
      "name":"adronsfieldp",
      "sent_from":"459f863964fdccf0ef7e959bd7040cf04a6a3b40dcee75ddc1bc31ebaac2f96e",
      "uid":"8aaf4827f55168af31f751df6b1a603ca5f9335b048919a12a9fab5924fa7243"
   },
   {
      "accepted":true,
      "name":"ahubatsch21",
      "sent_from":"db5309981596ab110553cc6a46ba105dc5a3a787580066338f0a456f0db9c8ea",
      "uid":"f120ca8837b0973451061b8f7912f927e95d53e304e42de9b0ac732c78aceeab"
   },
   
   {
      "accepted":true,
      "name":"brochell2e",
      "sent_from":"a9e8087d5ca61463c45c22ee25016556e6a780876cb9ef96a8c080544b9bfc8a",
      "uid":"52fdf2869ff44160a2417076a5005aa2ae9a883835f82c1a5e92ad1a5c2e1683"
   },
   {
      "accepted":false,
      "name":"bsandyfirth2i",
      "sent_from":"13363fc0a479bf657925d3d62a7db49bf3c156d8283294cb02abe7ba3d7fc828",
      "uid":"73a4d912b3a30485fb3085dbce77a200964a5dd384650a4a2216763526966ef2"
   },
   {
      "accepted":true,
      "name":"cbuntin2a",
      "sent_from":"1c663d8a83fac324210eca96271be361f361222420326b5e9cf7c74223925fd7",
      "uid":"f0cc885efef3cfdc22c24eb5905e829699cc5cd137f56d40e67787fe38cd5ba8"
   },
   {
      "accepted":true,
      "name":"cgeggien",
      "sent_from":"0166a92b31d630d9810403f67765c0b83273377d5a41254021596690e7b13314",
      "uid":"9874eeaa37ceb848314114b4a009fef4a06bfb9131f78a2faf498b09d0972528"
   },
   {
      "accepted":false,
      "name":"cgillson25",
      "sent_from":"7458f5b441871d7aa97268dcc6db27745efbdafeefa9e26da83c37151ade1aff",
      "uid":"4b8ef710952228cd1175c4627092a5492ec6b486a3a716e7798c4b171a3c3d71"
   },
   {
      "accepted":false,
      "name":"ddunkerly1j",
      "sent_from":"f0f01fd6f032c15aba7cdbef0de360db07c846492b672f223b47ee296a7b06ea",
      "uid":"92d2ecfd7ba0624ae193f2cebbdea2648f89f7eaa76455721e24196df296a749"
   },
   {
      "accepted":true,
      "name":"dgaw1f",
      "sent_from":"510e5a02b6d6eff3c1ae43ab0cab5048e8f939dca602a67c66fb05652695cf64",
      "uid":"7bfc91e8723427fd0a229b53d620e3eb0b764fc2b36809ac30e8b36aa645de7e"
   },
   {
      "accepted":false,
      "name":"dgermon2k",
      "sent_from":"bf620dff7061c8e85e0a4384d1718688fe203b2e587b5a31a86e36915f60c9c1",
      "uid":"41f6cbe2317c4cf05c5445a232a8af6f7e5346d9325f4f1350387b641c5716ce"
   },
   {
      "accepted":true,
      "name":"dkillingsworthl",
      "sent_from":"529ded15447af896610c9a2d47d336e80e5240428a9afa9bcb4545e39b6559c4",
      "uid":"7cfc9406eb3f3a4894ec760122ee83218bb64b195b6b0cf014c4401af8b3b21a"
   },
   {
      "accepted":true,
      "name":"dmoorrud19",
      "sent_from":"a9ac512c2c645978b66d2fd69e50c0ab2ed4ed609f008aea259b6fc893e7658d",
      "uid":"68f19bfb2c8cd6dad2940570f91f537cc3a2cbe16a812a8c61d1bac151cc6a6f"
   },
   {
      "accepted":false,
      "name":"eceelys",
      "sent_from":"3247a0b074b202b60d83814ef46a5585d6cb95e54b0a8e8f057453e082085648",
      "uid":"dad9db20cd5594f3ce5e3f26c3c105408320afe6735227732f84a259da1d8b0a"
   },
   {
      "accepted":false,
      "name":"eferrierioj",
      "sent_from":"9b410837d287b1b3dc18f5c5549e072359ac6406989d67632a3a8f37401c1d5f",
      "uid":"692166c771b5f5e6634532e3d9b3708e2e4f0c2c895cb8ecc4ab13eb6826a16c"
   }
]

我需要在以特定字母開頭的每組名稱的開頭添加一個自定義 JSON 物件，如下所示：

{
      "type": "group_header",
      "name": "A",

},

最終輸出應該是這樣的：

[
   {
      "type": "group_header",
      "name": "A",

   },
   {
      "accepted":true,
      "name":"abedingfield1m",
      "sent_from":"40fbdd06dfbb18c4167f751450f2885bdf3b04242e530427c85c67e20ae94de2",
      "uid":"27837d62aab82df792f1301c84c8c2576ff11f41fd6d9bdb1828a5182d54d135"
   },
   {
      "accepted":true,
      "name":"abillsonm",
      "sent_from":"9c30eeb77d8b0d836ed857b2fb9f1c52d030af833bfb5e48427bbb6d0892d297",
      "uid":"c2ad87a0f4619bb881baa3f34157fa78f14b868f01c66af975eb5faaa21eed2e"
   },
   {
      "accepted":true,
      "name":"adronsfieldp",
      "sent_from":"459f863964fdccf0ef7e959bd7040cf04a6a3b40dcee75ddc1bc31ebaac2f96e",
      "uid":"8aaf4827f55168af31f751df6b1a603ca5f9335b048919a12a9fab5924fa7243"
   },
   {
      "accepted":true,
      "name":"ahubatsch21",
      "sent_from":"db5309981596ab110553cc6a46ba105dc5a3a787580066338f0a456f0db9c8ea",
      "uid":"f120ca8837b0973451061b8f7912f927e95d53e304e42de9b0ac732c78aceeab"
   },
   {
      "type": "group_header",
      "name": "B",

   },
   
   {
      "accepted":true,
      "name":"brochell2e",
      "sent_from":"a9e8087d5ca61463c45c22ee25016556e6a780876cb9ef96a8c080544b9bfc8a",
      "uid":"52fdf2869ff44160a2417076a5005aa2ae9a883835f82c1a5e92ad1a5c2e1683"
   },
   {
      "accepted":false,
      "name":"bsandyfirth2i",
      "sent_from":"13363fc0a479bf657925d3d62a7db49bf3c156d8283294cb02abe7ba3d7fc828",
      "uid":"73a4d912b3a30485fb3085dbce77a200964a5dd384650a4a2216763526966ef2"
   },
   {
      "type": "group_header",
      "name": "C",

   },
   {
      "accepted":true,
      "name":"cbuntin2a",
      "sent_from":"1c663d8a83fac324210eca96271be361f361222420326b5e9cf7c74223925fd7",
      "uid":"f0cc885efef3cfdc22c24eb5905e829699cc5cd137f56d40e67787fe38cd5ba8"
   },
   {
      "accepted":true,
      "name":"cgeggien",
      "sent_from":"0166a92b31d630d9810403f67765c0b83273377d5a41254021596690e7b13314",
      "uid":"9874eeaa37ceb848314114b4a009fef4a06bfb9131f78a2faf498b09d0972528"
   },
   {
      "accepted":false,
      "name":"cgillson25",
      "sent_from":"7458f5b441871d7aa97268dcc6db27745efbdafeefa9e26da83c37151ade1aff",
      "uid":"4b8ef710952228cd1175c4627092a5492ec6b486a3a716e7798c4b171a3c3d71"
   },
   {
      "type": "group_header",
      "name": "D",
   },
   {
      "accepted":false,
      "name":"ddunkerly1j",
      "sent_from":"f0f01fd6f032c15aba7cdbef0de360db07c846492b672f223b47ee296a7b06ea",
      "uid":"92d2ecfd7ba0624ae193f2cebbdea2648f89f7eaa76455721e24196df296a749"
   },
   {
      "accepted":true,
      "name":"dgaw1f",
      "sent_from":"510e5a02b6d6eff3c1ae43ab0cab5048e8f939dca602a67c66fb05652695cf64",
      "uid":"7bfc91e8723427fd0a229b53d620e3eb0b764fc2b36809ac30e8b36aa645de7e"
   },
   {
      "accepted":false,
      "name":"dgermon2k",
      "sent_from":"bf620dff7061c8e85e0a4384d1718688fe203b2e587b5a31a86e36915f60c9c1",
      "uid":"41f6cbe2317c4cf05c5445a232a8af6f7e5346d9325f4f1350387b641c5716ce"
   },
   {
      "accepted":true,
      "name":"dkillingsworthl",
      "sent_from":"529ded15447af896610c9a2d47d336e80e5240428a9afa9bcb4545e39b6559c4",
      "uid":"7cfc9406eb3f3a4894ec760122ee83218bb64b195b6b0cf014c4401af8b3b21a"
   },
   {
      "accepted":true,
      "name":"dmoorrud19",
      "sent_from":"a9ac512c2c645978b66d2fd69e50c0ab2ed4ed609f008aea259b6fc893e7658d",
      "uid":"68f19bfb2c8cd6dad2940570f91f537cc3a2cbe16a812a8c61d1bac151cc6a6f"
   },
   {
      "type": "group_header",
      "name": "E",
   },
   {
      "accepted":false,
      "name":"eceelys",
      "sent_from":"3247a0b074b202b60d83814ef46a5585d6cb95e54b0a8e8f057453e082085648",
      "uid":"dad9db20cd5594f3ce5e3f26c3c105408320afe6735227732f84a259da1d8b0a"
   },
   {
      "accepted":false,
      "name":"eferrierioj",
      "sent_from":"9b410837d287b1b3dc18f5c5549e072359ac6406989d67632a3a8f37401c1d5f",
      "uid":"692166c771b5f5e6634532e3d9b3708e2e4f0c2c895cb8ecc4ab13eb6826a16c"
   }
]

引導我完成這個。我想要一個 JS 函式，它將采用 JSON 并回傳所描述的輸出格式。

提前致謝！

uj5u.com熱心網友回復：

如果您想使用功能方法，您還可以使用reduce對值進行分組。

data
  .reduceRight(
    (groups, current, currentIndex, array) => {
      if (
        groups[0] &&
        groups[0][0].name.startsWith(current.name[0].toUpperCase())
      ) {
        groups[0].push(current);
      } else {
        groups.unshift([
          { type: 'group_header', name: current.name[0].toUpperCase() },
          current,
        ]);
      }
      return groups;
    },
    []
  )
  .flat()

這里reduceRight方法從一個空陣列開始。如果當前元素的名稱與最后一個組的名稱匹配，則將其附加到最后一個組，否則將附加一個帶有標題和第一個值的新組。這會生成一組組，因此我們需要將其展平。

uj5u.com熱心網友回復：

function addGroupHeader(arr) {
  let group = null;
  for(let i = 0; i < arr.length; i  ) {
    if(arr[i].name.charAt(0).toLowerCase() !== group) {
      group = arr[i].name.charAt(0).toLowerCase();
      arr.splice(i, 0, {type: "group_header", name: arr[i].name.charAt(0)})
    }
  }
}

uj5u.com熱心網友回復：

    function sortedArr(arr) {
       let newArr = [], prevNameGroup = null;
    arr.sort((a, b) => a.name - b.name).forEach((item, index) => {
        if(item.name[0] != prevNameGroup)
            newArr.push({ type: "group_header", name: item.name[0] })
        prevNameGroup = item.name[0]
        newArr.push(item)
    })
    return newArr;
    }

    const arr =[
       {
          "accepted":true,
          "name":"abedingfield1m",
          "sent_from":"40fbdd06dfbb18c4167f751450f2885bdf3b04242e530427c85c67e20ae94de2",
          "uid":"27837d62aab82df792f1301c84c8c2576ff11f41fd6d9bdb1828a5182d54d135"
       },
       {
          "accepted":true,
          "name":"abillsonm",
          "sent_from":"9c30eeb77d8b0d836ed857b2fb9f1c52d030af833bfb5e48427bbb6d0892d297",
          "uid":"c2ad87a0f4619bb881baa3f34157fa78f14b868f01c66af975eb5faaa21eed2e"
       },
       {
          "accepted":true,
          "name":"adronsfieldp",
          "sent_from":"459f863964fdccf0ef7e959bd7040cf04a6a3b40dcee75ddc1bc31ebaac2f96e",
          "uid":"8aaf4827f55168af31f751df6b1a603ca5f9335b048919a12a9fab5924fa7243"
       },
       {
          "accepted":true,
          "name":"ahubatsch21",
          "sent_from":"db5309981596ab110553cc6a46ba105dc5a3a787580066338f0a456f0db9c8ea",
          "uid":"f120ca8837b0973451061b8f7912f927e95d53e304e42de9b0ac732c78aceeab"
       },
       
       {
          "accepted":true,
          "name":"brochell2e",
          "sent_from":"a9e8087d5ca61463c45c22ee25016556e6a780876cb9ef96a8c080544b9bfc8a",
          "uid":"52fdf2869ff44160a2417076a5005aa2ae9a883835f82c1a5e92ad1a5c2e1683"
       },
       {
          "accepted":false,
          "name":"bsandyfirth2i",
          "sent_from":"13363fc0a479bf657925d3d62a7db49bf3c156d8283294cb02abe7ba3d7fc828",
          "uid":"73a4d912b3a30485fb3085dbce77a200964a5dd384650a4a2216763526966ef2"
       },
       {
          "accepted":true,
          "name":"cbuntin2a",
          "sent_from":"1c663d8a83fac324210eca96271be361f361222420326b5e9cf7c74223925fd7",
          "uid":"f0cc885efef3cfdc22c24eb5905e829699cc5cd137f56d40e67787fe38cd5ba8"
       },
       {
          "accepted":true,
          "name":"cgeggien",
          "sent_from":"0166a92b31d630d9810403f67765c0b83273377d5a41254021596690e7b13314",
          "uid":"9874eeaa37ceb848314114b4a009fef4a06bfb9131f78a2faf498b09d0972528"
       },
       {
          "accepted":false,
          "name":"cgillson25",
          "sent_from":"7458f5b441871d7aa97268dcc6db27745efbdafeefa9e26da83c37151ade1aff",
          "uid":"4b8ef710952228cd1175c4627092a5492ec6b486a3a716e7798c4b171a3c3d71"
       },
       {
          "accepted":false,
          "name":"ddunkerly1j",
          "sent_from":"f0f01fd6f032c15aba7cdbef0de360db07c846492b672f223b47ee296a7b06ea",
          "uid":"92d2ecfd7ba0624ae193f2cebbdea2648f89f7eaa76455721e24196df296a749"
       },
       {
          "accepted":true,
          "name":"dgaw1f",
          "sent_from":"510e5a02b6d6eff3c1ae43ab0cab5048e8f939dca602a67c66fb05652695cf64",
          "uid":"7bfc91e8723427fd0a229b53d620e3eb0b764fc2b36809ac30e8b36aa645de7e"
       },
       {
          "accepted":false,
          "name":"dgermon2k",
          "sent_from":"bf620dff7061c8e85e0a4384d1718688fe203b2e587b5a31a86e36915f60c9c1",
          "uid":"41f6cbe2317c4cf05c5445a232a8af6f7e5346d9325f4f1350387b641c5716ce"
       },
       {
          "accepted":true,
          "name":"dkillingsworthl",
          "sent_from":"529ded15447af896610c9a2d47d336e80e5240428a9afa9bcb4545e39b6559c4",
          "uid":"7cfc9406eb3f3a4894ec760122ee83218bb64b195b6b0cf014c4401af8b3b21a"
       },
       {
          "accepted":true,
          "name":"dmoorrud19",
          "sent_from":"a9ac512c2c645978b66d2fd69e50c0ab2ed4ed609f008aea259b6fc893e7658d",
          "uid":"68f19bfb2c8cd6dad2940570f91f537cc3a2cbe16a812a8c61d1bac151cc6a6f"
       },
       {
          "accepted":false,
          "name":"eceelys",
          "sent_from":"3247a0b074b202b60d83814ef46a5585d6cb95e54b0a8e8f057453e082085648",
          "uid":"dad9db20cd5594f3ce5e3f26c3c105408320afe6735227732f84a259da1d8b0a"
       },
       {
          "accepted":false,
          "name":"eferrierioj",
          "sent_from":"9b410837d287b1b3dc18f5c5549e072359ac6406989d67632a3a8f37401c1d5f",
          "uid":"692166c771b5f5e6634532e3d9b3708e2e4f0c2c895cb8ecc4ab13eb6826a16c"
       }
    ]

    console.log(sortedArr(arr))

uj5u.com熱心網友回復：

創建新陣列并回圈遍歷您的 json 物件陣列并組合標題和資料。像這樣的東西。

let newArray = []
for(i=0; i<data.length; i  ){
    let item = {
        "type": "group_header",
        "name": 'A',
     }
    newArray.push(item)
    newArray.push(data[i])
}

只需找到一種如何更改標題名稱的方法。

標籤：javascriptjson

上一篇：mysql中的json_search和json_remove

下一篇：如何從WOPIAPI將辦公檔案回傳到OfficeOnline？