如何将数据从对象传递到javascript中的新数组？

Posted 2023-03-22

【中文标题】如何将数据从对象传递到javascript中的新数组？

【英文标题】：How to pass data from object into new array in javascript?

【发布时间】：2022-01-15 19:36:21

【问题描述】：

我只想发送数据对象 var arrImg 中包含的字段之一。我要推送的第一件事是 var arrImg 的图像字段，其中检查为 true 的条件是 crudData:'image':[] 上的新数组图像。然后第二个我想将 var arrImg 的字段名称与检查为 true 的条件推送到 crudData:'name':[] 上的新数组名称中。选中的值首先设置为 false，但当单击输入复选框时将更改为 true。有人理解我要问的情况吗？我是 javascript 新手。谢谢。

这是我的小提琴https://jsfiddle.net/Annisa_Lianda30/d0ber5Lu/24/

这是我的代码：

<script>
export default 
    data() 
        return
            crudData:
                'id': null,
                'name': [],
                'image': [],
                'arrImage': [],
            ,
        
    ,

    imageUpload(e, maxItem)                    
            let input = this.$refs.uploadImage
            let file = input.files
            if(file.length > (maxItem - this.crudData.arrImage.length))
                $('#uploadMultiFile').val('')
                alert('You can only upload max '+maxItem+' items')
             else 
                for(let i = 0; i < file.length; i++)
                    var valueArr = this.crudData.arrImage.map(function(item) return item.fileName )
                    var isDuplicate = valueArr.some(function(item, idx) 
                        return item == file[i].name 
                    )
                    if (isDuplicate) 
                        alert("You've already uploaded this file")
                        continue
                    else
                        var arrImg = 
                            blob: URL.createObjectURL(file[i]),
                            image: file[i],
                            fileName: file[i].name,
                            checked: false,
                            name : null
                        
                        this.crudData.arrImage.push(arrImg)
                        console.log(this.crudData.arrImage)
                    
                
            
        ,
        uploadImage(e)
            this.$refs.uploadImage.click()
        ,
        removeImage(key)
            this.crudData.arrImage.splice(key, 1)
        , 

这是我从 crudData.arrImage 得到的输出： Output Javascript

【参考方案1】：

欢迎来到 SO。希望这段代码 sn-p 可以帮助指导您找到所需的内容。

let checkedImages = this.crudData.arrImage.filter(img => img.checked)
let imageFiles = checkedImages.map(img => img.image)
let names = checkedImages.map(img => img.fileName)
console.log( imageFiles,names )

【讨论】：

你好，你能给我一个更具体的线索吗？因为当我添加这个时，当我查看控制台日志时，我只会得到 Array(0)length: 0[[Prototype]]: Array(0)。

在函数 imageUploaded(e, maxItem)... 的底部，放置此代码，然后运行 ​​console.log( imageFiles,names )。

你能检查我在这个小提琴jsfiddle.net/Annisa_Lianda30/d0ber5Lu/3中的代码吗？

很高兴。现在看看。

我的意思是我想从 arrImg 对象推送 2 个数据。首先是图像字段并检查条件为真（单击复选框后条件为真），该条件位于要推送到 crudData'image':[] 的 arrImg var 中。然后第二个字段名称并检查条件为真（单击复选框后条件为真），它在 var arrImg 中被推送到 crudData:'name':[]