【发布时间】：2021-10-27 19:00:24
【问题描述】：
我对 NodeLists 的一些预期行为有点困惑，希望有人能指出我正确的方向。
所以我有一个隐藏的输入元素，其value 属性包含一个带有一堆 s3 上传数据的 json 字符串。它看起来像这样：
<input
name="uppyResult"
type="hidden"
value="[
{
"successful":[
{
"source":"Dashboard",
"id":"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",
"name":"Screen Shot 2021-07-15 at 4.00.02 PM.png",
"extension":"png",
"meta":{
"relativePath":null,
"name":"Screen Shot 2021-07-15 at 4.00.02 PM.png",
"type":"image/png",
"key":"cache/4870f1e1d9f075c7397b3422f101f7e4.png",
"Content-Disposition":"inline; filename=\"Screen Shot 2021-07-15 at 4.00.02 PM.png\"; filename*=UTF-8''Screen%20Shot%202021-07-15%20at%204.00.02%20PM.png",
"Content-Type":"image/png",
"policy":"eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMDo0M1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvNDg3MGYxZTFkOWYwNzVjNzM5N2IzNDIyZjEwMWY3ZTQucG5nIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cIlNjcmVlbiBTaG90IDIwMjEtMDctMTUgYXQgNC4wMC4wMiBQTS5wbmdcIjsgZmlsZW5hbWUqPVVURi04JydTY3JlZW4lMjBTaG90JTIwMjAyMS0wNy0xNSUyMGF0JTIwNC4wMC4wMiUyMFBNLnBuZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvcG5nIn0sWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MF0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQTNKRVpaRkFOTzNCNlI0VE8vMjAyMTA4MjcvdXMtd2VzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotZGF0ZSI6IjIwMjEwODI3VDIyMjA0M1oifV19",
"x-amz-credential":"whatever/20210827/region/s3/aws4_request",
"x-amz-algorithm":"AWS4-HMAC-SHA256",
"x-amz-date":"20210827T222043Z",
"x-amz-signature":"8478e24c985b7517399dd3278591e283584403c666983b1d6900c3d4c0b594d5"
},
"type":"image/png",
"data":{},
"progress":{
"uploadStarted":1630102841653,
"uploadComplete":true,
"percentage":100,
"bytesUploaded":167201,
"bytesTotal":167201,
"postprocess":null
},
"size":165186,
"isRemote":false,
"remote":"",
"preview":"blob:https://example.com/ab73e53f-7b2c-4a77-aade-07f216b31d27",
"xhrUpload":{
"method":"post",
"formData":true,
"endpoint":"https://example.s3.region.amazonaws.com",
"metaFields":[
"key","Content-Disposition","Content-Type","policy","x-amz-credential","x-amz-algorithm","x-amz-date","x-amz-signature"
],
"headers":{}
},
"response":{
"status":204,
"body":{
"location":null
},
"uploadURL":null
},
"uploadURL":null,"isPaused":false
}
],
"failed":[],
"uploadID":"cksux56ic00013h63szerkigt"
},
{
"successful":[
{
"source":"Dashboard",
"id":"uppy-blackdog/parkerbright/servitude2017/jpg-2v-2v-1e-image/jpeg-24872-1613012190277",
"name":"blackdog_parkerbright_servitude2017.jpg",
"extension":"jpg",
"meta":{
"relativePath":null,
"name":"blackdog_parkerbright_servitude2017.jpg",
"type":"image/jpeg",
"key":"cache/da42d10f2b1f47b004654b257df07a01.jpg",
"Content-Disposition":"inline; filename=\"blackdog_parkerbright_servitude2017.jpg\"; filename*=UTF-8''blackdog_parkerbright_servitude2017.jpg",
"Content-Type":"image/jpeg",
"policy":"eyJleHBpcmF0aW9uIjoiMjAyMS0wOC0yN1QyMzoyMTozMVoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJmcmFjdGlvbmNsdWItZGV2MiJ9LHsia2V5IjoiY2FjaGUvZGE0MmQxMGYyYjFmNDdiMDA0NjU0YjI1N2RmMDdhMDEuanBnIn0seyJDb250ZW50LURpc3Bvc2l0aW9uIjoiaW5saW5lOyBmaWxlbmFtZT1cImJsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZ1wiOyBmaWxlbmFtZSo9VVRGLTgnJ2JsYWNrZG9nX3BhcmtlcmJyaWdodF9zZXJ2aXR1ZGUyMDE3LmpwZyJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjBdLHsieC1hbXotY3JlZGVudGlhbCI6IkFLSUEzSkVaWkZBTk8zQjZSNFRPLzIwMjEwODI3L3VzLXdlc3QtMS9zMy9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDIxMDgyN1QyMjIxMzFaIn1dfQ==",
"x-amz-credential":"whatever/20210827/region/s3/aws4_request",
"x-amz-algorithm":"AWS4-HMAC-SHA256",
"x-amz-date":"20210827T222131Z",
"x-amz-signature":"a17970d6b111ed0acb535342433626ec7d277fd6364517bb3ee9c02de529f0d7"
},
"type":"image/jpeg",
"data":{},
"progress":{
"uploadStarted":1630102891533,
"uploadComplete":true,
"percentage":100,
"bytesUploaded":26864,
"bytesTotal":26864,
"postprocess":null
},
"size":24872,
"isRemote":false,
"remote":"",
"preview":"blob:https://example.com/79066114-d51b-4ef4-b62a-af8ac80ae617",
"xhrUpload":{
"method":"post",
"formData":true,
"endpoint":"https://example.s3.region.amazonaws.com",
"metaFields":[
"key","Content-Disposition","Content-Type","policy","x-amz-credential","x-amz-algorithm","x-amz-date","x-amz-signature"
],
"headers":{}
},
"response":{
"status":204,
"body":{
"location":null
},
"uploadURL":null
},
"uploadURL":null,
"isPaused":false
}
],
"failed":[],
"uploadID":"cksux68zv00033h63tzjc85kg"
}
]"
>
当我将document.getElementsByName("uppyResult") 登录到控制台时，它显示为一个 NodeList。这显然有点像数组，但不是？我需要在此 NodeList 中访问的数据需要单击并滚动才能到达 - 我只需展开 input 并滚动到 defaultValue。
我需要访问此 NodeList 中的每个 successful 对象。可以有一个或多个。请注意，这个有两个。
我的last attempt 在做同样的事情时搞砸了，因为我误解了我想要做的事情。尽管选择的答案确实解决了我所说的问题，但我需要的是对最初的[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)
}
})
【问题讨论】：
-
您的第一个代码块不是有效的 HTML。引号问题。甚至这里突出显示的语法也表明它是错误的。
-
@trincot 现在应该已修复。我将所有的
&quot;更改为"，这样我可以在 linting 时阅读它，然后忘记将其切换回来
标签： javascript json uppy