1

我对有关 NodeLists 的一些预期行为有点困惑,并希望有人能指出我正确的方向。

所以我有一个隐藏的输入元素,它的value属性包含一个带有一堆 s3 上传数据的 json 字符串。它看起来像这样:

<input 
  name="uppyResult"
  type="hidden"
  value="[
    {
        &quot;successful&quot;:[
            {
            &quot;source&quot;:&quot;Dashboard&quot;,
            &quot;id&quot;:&quot;uppy-screen/shot/2021/07/15/at/4/00/02/pm/png-10-10-1d-1d-10-10-1e-1e-10-1e-image/png-165186-1626390007842&quot;,
            &quot;name&quot;:&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png&quot;,
            &quot;extension&quot;:&quot;png&quot;,
            &quot;meta&quot;:{
                &quot;relativePath&quot;:null,
                &quot;name&quot;:&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png&quot;,
                &quot;type&quot;:&quot;image/png&quot;,
                &quot;key&quot;:&quot;cache/4870f1e1d9f075c7397b3422f101f7e4.png&quot;,
                &quot;Content-Disposition&quot;:&quot;inline; filename=\&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png\&quot;; filename*=UTF-8''Screen%20Shot%202021-07-15%20at%204.00.02%20PM.png&quot;,
                &quot;Content-Type&quot;:&quot;image/png&quot;,
                &quot;policy&quot;:&quot;eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMDo0M1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvNDg3MGYxZTFkOWYwNzVjNzM5N2IzNDIyZjEwMWY3ZTQucG5nIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cIlNjcmVlbiBTaG90IDIwMjEtMDctMTUgYXQgNC4wMC4wMiBQTS5wbmdcIjsgZmlsZW5hbWUqPVVURi04JydTY3JlZW4lMjBTaG90JTIwMjAyMS0wNy0xNSUyMGF0JTIwNC4wMC4wMiUyMFBNLnBuZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvcG5nIn0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MF0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQTNKRVpaRkFOTzNCNlI0VE8vMjAyMTA4MjcvdXMtd2VzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotZGF0ZSI6IjIwMjEwODI3VDIyMjA0M1oifV19&quot;,
                &quot;x-amz-credential&quot;:&quot;whatever/20210827/region/s3/aws4_request&quot;,
                &quot;x-amz-algorithm&quot;:&quot;AWS4-HMAC-SHA256&quot;,
                &quot;x-amz-date&quot;:&quot;20210827T222043Z&quot;,
                &quot;x-amz-signature&quot;:&quot;8478e24c985b7517399dd3278591e283584403c666983b1d6900c3d4c0b594d5&quot;
            },
            &quot;type&quot;:&quot;image/png&quot;,
            &quot;data&quot;:{},
            &quot;progress&quot;:{
                &quot;uploadStarted&quot;:1630102841653,
                &quot;uploadComplete&quot;:true,
                &quot;percentage&quot;:100,
                &quot;bytesUploaded&quot;:167201,
                &quot;bytesTotal&quot;:167201,
                &quot;postprocess&quot;:null
            },
            &quot;size&quot;:165186,
            &quot;isRemote&quot;:false,
            &quot;remote&quot;:&quot;&quot;,
            &quot;preview&quot;:&quot;blob:https://example.com/ab73e53f-7b2c-4a77-aade-07f216b31d27&quot;,
            &quot;xhrUpload&quot;:{
                &quot;method&quot;:&quot;post&quot;,
                &quot;formData&quot;:true,
                &quot;endpoint&quot;:&quot;https://example.s3.region.amazonaws.com&quot;,
                &quot;metaFields&quot;:[
                    &quot;key&quot;,&quot;Content-Disposition&quot;,&quot;Content-Type&quot;,&quot;policy&quot;,&quot;x-amz-credential&quot;,&quot;x-amz-algorithm&quot;,&quot;x-amz-date&quot;,&quot;x-amz-signature&quot;
                ],
                &quot;headers&quot;:{}
            },
            &quot;response&quot;:{
                &quot;status&quot;:204,
                &quot;body&quot;:{
                    &quot;location&quot;:null
                },
                &quot;uploadURL&quot;:null
            },
            &quot;uploadURL&quot;:null,&quot;isPaused&quot;:false
          }
        ],
        &quot;failed&quot;:[],
        &quot;uploadID&quot;:&quot;cksux56ic00013h63szerkigt&quot;
    },

    {
        &quot;successful&quot;:[
            {
                &quot;source&quot;:&quot;Dashboard&quot;,
                &quot;id&quot;:&quot;uppy-blackdog/parkerbright/servitude2017/jpg-2v-2v-1e-image/jpeg-24872-1613012190277&quot;,
                &quot;name&quot;:&quot;blackdog_parkerbright_servitude2017.jpg&quot;,
                &quot;extension&quot;:&quot;jpg&quot;,
                &quot;meta&quot;:{
                    &quot;relativePath&quot;:null,
                    &quot;name&quot;:&quot;blackdog_parkerbright_servitude2017.jpg&quot;,
                    &quot;type&quot;:&quot;image/jpeg&quot;,
                    &quot;key&quot;:&quot;cache/da42d10f2b1f47b004654b257df07a01.jpg&quot;,
                    &quot;Content-Disposition&quot;:&quot;inline; filename=\&quot;blackdog_parkerbright_servitude2017.jpg\&quot;; filename*=UTF-8''blackdog_parkerbright_servitude2017.jpg&quot;,
                    &quot;Content-Type&quot;:&quot;image/jpeg&quot;,
                    &quot;policy&quot;:&quot;eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMTozMVoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvZGE0MmQxMGYyYjFmNDdiMDA0NjU0YjI1N2RmMDdhMDEuanBnIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cImJsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ2JsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjBdLHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUEzSkVaWkZBTk8zQjZSNFRPLzIwMjEwODI3L3VzLXdlc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDgyN1QyMjIxMzFaIn1dfQ==&quot;,
                    &quot;x-amz-credential&quot;:&quot;whatever/20210827/region/s3/aws4_request&quot;,
                    &quot;x-amz-algorithm&quot;:&quot;AWS4-HMAC-SHA256&quot;,
                    &quot;x-amz-date&quot;:&quot;20210827T222131Z&quot;,
                    &quot;x-amz-signature&quot;:&quot;a17970d6b111ed0acb535342433626ec7d277fd6364517bb3ee9c02de529f0d7&quot;
                },
                &quot;type&quot;:&quot;image/jpeg&quot;,
                &quot;data&quot;:{},
                &quot;progress&quot;:{
                    &quot;uploadStarted&quot;:1630102891533,
                    &quot;uploadComplete&quot;:true,
                    &quot;percentage&quot;:100,
                    &quot;bytesUploaded&quot;:26864,
                    &quot;bytesTotal&quot;:26864,
                    &quot;postprocess&quot;:null
                },
                &quot;size&quot;:24872,
                &quot;isRemote&quot;:false,
                &quot;remote&quot;:&quot;&quot;,
                &quot;preview&quot;:&quot;blob:https://example.com/79066114-d51b-4ef4-b62a-af8ac80ae617&quot;,
                &quot;xhrUpload&quot;:{
                    &quot;method&quot;:&quot;post&quot;,
                    &quot;formData&quot;:true,
                    &quot;endpoint&quot;:&quot;https://example.s3.region.amazonaws.com&quot;,
                    &quot;metaFields&quot;:[
                        &quot;key&quot;,&quot;Content-Disposition&quot;,&quot;Content-Type&quot;,&quot;policy&quot;,&quot;x-amz-credential&quot;,&quot;x-amz-algorithm&quot;,&quot;x-amz-date&quot;,&quot;x-amz-signature&quot;
                    ],
                    &quot;headers&quot;:{}
                },
                &quot;response&quot;:{
                    &quot;status&quot;:204,
                    &quot;body&quot;:{
                        &quot;location&quot;:null
                    },
                    &quot;uploadURL&quot;:null
                },
                &quot;uploadURL&quot;:null,
                &quot;isPaused&quot;:false
            }
        ],
        &quot;failed&quot;:[],
        &quot;uploadID&quot;:&quot;cksux68zv00033h63tzjc85kg&quot;
    }
  ]"
>

当我登录document.getElementsByName("uppyResult")到控制台时,它显示为 NodeList。这显然有点像数组,但不是?我需要在此 NodeList 中访问的数据需要单击并滚动才能到达 - 我只需展开input并滚动到defaultValue.

我需要的是访问successful此 NodeList 中的每个对象。可以有一个或多个。请注意,这个有两个。

最后一次尝试做同样的事情失败了,因为我误解了我想要做的事情。尽管所选答案确实解决了我所说的问题,但我需要的是对初始[0]项目执行相同的操作。每一批上传的文件都占用这个数组的一个索引,我需要把它们全部获取。

该答案的旧代码是:

if (reason === 'removed-by-user') {
  const preParsedData = document.getElementsByName("uppyResult")[0].value //this is the problem, i think - i need *all* the elements in the array/NodeList
  const parsedData = JSON.parse(preParsedData)
  const toRemove = file.id
  parsedData.forEach(item => {
    Object.values(item).forEach(array => {
      if (!Array.isArray(array))
        return;
      const index = array.findIndex(elm => elm.id === toRemove)
      if (index > -1)
        array.splice(index, 1)
    });
    if (item.successful.length === 0)
      delete item.successful
      delete item.failed
      delete item.uploadID
    });
    console.log(parsedData)
    document.getElementsByName("uppyResult")[0].value = JSON.stringify(parsedData)
  }
})
4

2 回答 2

2

如果您“需要数组/NodeList 中的所有元素”,则必须通过其他 forEach 调用遍历所有节点。所以,它看起来像:

const inputEls = document.getElementsByName("uppyResult")

inputEls.forEach((node) => {
// here run the code you already have
const preParsedData = node.value
const parsedData = JSON.parse(preParsedData)
....
}
于 2021-08-27T23:34:27.593 回答
1

在解析其中的数据之前,value它必须是一个有效的 JSON 字符串。为此,您必须使用该方法替换&quot;的每个实例,以便它成为要解析的有效 JSON 字符串。".replace()

const preParsedData = document.getElementsByName("uppyResult")[0].value.replace("&quot;","\"");
const parsedData = JSON.parse(preParsedData);
console.log(parsedData);
<html>
<head>
  <title>Title</title>
</head>
<body>
  <input name="uppyResult" type="hidden" value="[
    {
        &quot;successful&quot;:[
            {
            &quot;source&quot;:&quot;Dashboard&quot;,
            &quot;id&quot;:&quot;uppy-screen/shot/2021/07/15/at/4/00/02/pm/png-10-10-1d-1d-10-10-1e-1e-10-1e-image/png-165186-1626390007842&quot;,
            &quot;name&quot;:&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png&quot;,
            &quot;extension&quot;:&quot;png&quot;,
            &quot;meta&quot;:{
                &quot;relativePath&quot;:null,
                &quot;name&quot;:&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png&quot;,
                &quot;type&quot;:&quot;image/png&quot;,
                &quot;key&quot;:&quot;cache/4870f1e1d9f075c7397b3422f101f7e4.png&quot;,
                &quot;Content-Disposition&quot;:&quot;inline; filename=\&quot;Screen Shot 2021-07-15 at 4.00.02 PM.png\&quot;; filename*=UTF-8''Screen%20Shot%202021-07-15%20at%204.00.02%20PM.png&quot;,
                &quot;Content-Type&quot;:&quot;image/png&quot;,
                &quot;policy&quot;:&quot;eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMDo0M1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvNDg3MGYxZTFkOWYwNzVjNzM5N2IzNDIyZjEwMWY3ZTQucG5nIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cIlNjcmVlbiBTaG90IDIwMjEtMDctMTUgYXQgNC4wMC4wMiBQTS5wbmdcIjsgZmlsZW5hbWUqPVVURi04JydTY3JlZW4lMjBTaG90JTIwMjAyMS0wNy0xNSUyMGF0JTIwNC4wMC4wMiUyMFBNLnBuZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvcG5nIn0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MF0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQTNKRVpaRkFOTzNCNlI0VE8vMjAyMTA4MjcvdXMtd2VzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotZGF0ZSI6IjIwMjEwODI3VDIyMjA0M1oifV19&quot;,
                &quot;x-amz-credential&quot;:&quot;whatever/20210827/region/s3/aws4_request&quot;,
                &quot;x-amz-algorithm&quot;:&quot;AWS4-HMAC-SHA256&quot;,
                &quot;x-amz-date&quot;:&quot;20210827T222043Z&quot;,
                &quot;x-amz-signature&quot;:&quot;8478e24c985b7517399dd3278591e283584403c666983b1d6900c3d4c0b594d5&quot;
            },
            &quot;type&quot;:&quot;image/png&quot;,
            &quot;data&quot;:{},
            &quot;progress&quot;:{
                &quot;uploadStarted&quot;:1630102841653,
                &quot;uploadComplete&quot;:true,
                &quot;percentage&quot;:100,
                &quot;bytesUploaded&quot;:167201,
                &quot;bytesTotal&quot;:167201,
                &quot;postprocess&quot;:null
            },
            &quot;size&quot;:165186,
            &quot;isRemote&quot;:false,
            &quot;remote&quot;:&quot;&quot;,
            &quot;preview&quot;:&quot;blob:https://example.com/ab73e53f-7b2c-4a77-aade-07f216b31d27&quot;,
            &quot;xhrUpload&quot;:{
                &quot;method&quot;:&quot;post&quot;,
                &quot;formData&quot;:true,
                &quot;endpoint&quot;:&quot;https://example.s3.region.amazonaws.com&quot;,
                &quot;metaFields&quot;:[
                    &quot;key&quot;,&quot;Content-Disposition&quot;,&quot;Content-Type&quot;,&quot;policy&quot;,&quot;x-amz-credential&quot;,&quot;x-amz-algorithm&quot;,&quot;x-amz-date&quot;,&quot;x-amz-signature&quot;
                ],
                &quot;headers&quot;:{}
            },
            &quot;response&quot;:{
                &quot;status&quot;:204,
                &quot;body&quot;:{
                    &quot;location&quot;:null
                },
                &quot;uploadURL&quot;:null
            },
            &quot;uploadURL&quot;:null,&quot;isPaused&quot;:false
          }
        ],
        &quot;failed&quot;:[],
        &quot;uploadID&quot;:&quot;cksux56ic00013h63szerkigt&quot;
    },

    {
        &quot;successful&quot;:[
            {
                &quot;source&quot;:&quot;Dashboard&quot;,
                &quot;id&quot;:&quot;uppy-blackdog/parkerbright/servitude2017/jpg-2v-2v-1e-image/jpeg-24872-1613012190277&quot;,
                &quot;name&quot;:&quot;blackdog_parkerbright_servitude2017.jpg&quot;,
                &quot;extension&quot;:&quot;jpg&quot;,
                &quot;meta&quot;:{
                    &quot;relativePath&quot;:null,
                    &quot;name&quot;:&quot;blackdog_parkerbright_servitude2017.jpg&quot;,
                    &quot;type&quot;:&quot;image/jpeg&quot;,
                    &quot;key&quot;:&quot;cache/da42d10f2b1f47b004654b257df07a01.jpg&quot;,
                    &quot;Content-Disposition&quot;:&quot;inline; filename=\&quot;blackdog_parkerbright_servitude2017.jpg\&quot;; filename*=UTF-8''blackdog_parkerbright_servitude2017.jpg&quot;,
                    &quot;Content-Type&quot;:&quot;image/jpeg&quot;,
                    &quot;policy&quot;:&quot;eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMTozMVoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvZGE0MmQxMGYyYjFmNDdiMDA0NjU0YjI1N2RmMDdhMDEuanBnIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cImJsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ2JsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjBdLHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUEzSkVaWkZBTk8zQjZSNFRPLzIwMjEwODI3L3VzLXdlc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDgyN1QyMjIxMzFaIn1dfQ==&quot;,
                    &quot;x-amz-credential&quot;:&quot;whatever/20210827/region/s3/aws4_request&quot;,
                    &quot;x-amz-algorithm&quot;:&quot;AWS4-HMAC-SHA256&quot;,
                    &quot;x-amz-date&quot;:&quot;20210827T222131Z&quot;,
                    &quot;x-amz-signature&quot;:&quot;a17970d6b111ed0acb535342433626ec7d277fd6364517bb3ee9c02de529f0d7&quot;
                },
                &quot;type&quot;:&quot;image/jpeg&quot;,
                &quot;data&quot;:{},
                &quot;progress&quot;:{
                    &quot;uploadStarted&quot;:1630102891533,
                    &quot;uploadComplete&quot;:true,
                    &quot;percentage&quot;:100,
                    &quot;bytesUploaded&quot;:26864,
                    &quot;bytesTotal&quot;:26864,
                    &quot;postprocess&quot;:null
                },
                &quot;size&quot;:24872,
                &quot;isRemote&quot;:false,
                &quot;remote&quot;:&quot;&quot;,
                &quot;preview&quot;:&quot;blob:https://example.com/79066114-d51b-4ef4-b62a-af8ac80ae617&quot;,
                &quot;xhrUpload&quot;:{
                    &quot;method&quot;:&quot;post&quot;,
                    &quot;formData&quot;:true,
                    &quot;endpoint&quot;:&quot;https://example.s3.region.amazonaws.com&quot;,
                    &quot;metaFields&quot;:[
                        &quot;key&quot;,&quot;Content-Disposition&quot;,&quot;Content-Type&quot;,&quot;policy&quot;,&quot;x-amz-credential&quot;,&quot;x-amz-algorithm&quot;,&quot;x-amz-date&quot;,&quot;x-amz-signature&quot;
                    ],
                    &quot;headers&quot;:{}
                },
                &quot;response&quot;:{
                    &quot;status&quot;:204,
                    &quot;body&quot;:{
                        &quot;location&quot;:null
                    },
                    &quot;uploadURL&quot;:null
                },
                &quot;uploadURL&quot;:null,
                &quot;isPaused&quot;:false
            }
        ],
        &quot;failed&quot;:[],
        &quot;uploadID&quot;:&quot;cksux68zv00033h63tzjc85kg&quot;
    }
  ]">
</body>
</html>

于 2021-09-08T19:42:55.397 回答