Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Objetos javascript

Gostaria de saber como atualizo o conteúdo das keys do meu objeto baseado em uma condição. Fiz uma galeria de imagens 'drag e drop' onde o usuário pode organizar como quiser, ou seja, a ordem mudaria a cada interação. Após a importação dos arquivos renderizo uma estrutura de 'div->img' onde a div recebe o seu id dependendo da posição, se ela é a primeira seu id é 0, dessa forma o 'pos' da imagem será 0. Nem todas as vezes os arquivos vem na ordem correta. Ex: pos: 0, name: A, file: One pos: 1, name: C, file: Two pos: 3, name: B, file: Tree

Então na função de organização ao mudar a ordem acredito que seria necessário comparar o nome, e alterar a posição de acordo com o correspondente.

3 respostas

Boa noite, João! Como vai?

Se vc tem um objeto JavaScript assim:

let meuObjeto = {
     pos: 0,
     name: "a",
     file: "a.png"
};

Para alterar, por exemplo, a propriedade name, basta fazer:

meuObjeto.name = "novoNome";

O mesmo vale para qualquer outra propriedade!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

Olá Gabriel! Tudo bem?

É um pouquinho mais complicado que isso, pois tenho uma matriz... E toda vez que o usuário altera ou insere uma foto nova eu preciso passar a posição (pos) para que seja salvo na ordem especifica.

Aqui ta um trechinho de como funciona: https://drive.google.com/file/d/12d5AbBnQnGqacxVhfzxxA31MPWtcndOr/view?usp=sharing

//Quando o usuário solta os arquivos eles são populados
    //e adicionados a uma matriz
    let allFiles = []
    let existsFiles = []
    $('#droparea').on('drop',function(e){
        e.stopPropagation();
        e.preventDefault();
        let newFiles = e.originalEvent.dataTransfer.files        
        for(let i = 0; i < newFiles.length; i++){
            //Verifica se os arquivos já foram adicionados
            if(existsFiles.indexOf(newFiles[i].name) === -1){
                allFiles.push({
                    pos: '',
                    alt: newFiles[i].name,
                    file: newFiles[i],
                })
                //Cria um novo item
                existsFiles.push(newFiles[i].name)
                //Renderiza a imagem
                let reader = new FileReader()
                reader.onload = function(){        
                    $("#gallery").append("<div class='col-6 col-md-3 miniatura text-center'><label>"
                     + i + "</label><img alt='" + newFiles[i].name + "' src='" + reader.result + "'></div>");
                }
                reader.readAsDataURL(newFiles[i])
            }
        }
        setTimeout(function(){ ordenar() }, 100);
    });

function ordenar() {
    let gallery = document.getElementById('gallery')
    let labels = gallery.getElementsByTagName('label')
    for(let i = 0; i < labels.length; i++){
        labels[i].textContent = i 
    }
}
solução!

João, no caso de um array o princípio é o mesmo! Por exemplo, para mudar a propriedade name de um elemento da posição 1 de um array, ficaria assim:

let meuArray = // recebe o array de objetos.
meuArray[1].name = "novoNome";