Entrar Ainda não tem acesso?
5
respostas

data.format is not a function criaData.js:17

Referente ao curso JS na Web: Armazenando dados no navegador, no capítulo Ordenando as tarefas e atividade Organizando as tarefas

por Estudante
| 75.4k xp | 46 posts

Bom dia.

Meu código está apresentando o erro: data.format is not a function criaData.js:17.

Segue código do meu criaData:

import { Tarefa } from "./criaTarefa.js"

export const criaData = function (data) {

    const tarefasAtualizadas = JSON.parse(localStorage.getItem('tarefas'))
    const dataTopo = document.createElement("li")
    const conteudo = `<p class="content-data">${data.format('DD/MM/YYYY')}</p>`

    dataTopo.innerHTML = conteudo

    tarefasAtualizadas.forEach((element) => {

        const dia = moment(element.dataFormatada, 'DD/MM/YYYY')

        if (data.diff(dia) == 0) {
            dataTopo.appendChild(Tarefa(element))
        }


    });

    return dataTopo
}

Segue código do meu data.js:

export const removeDatasRepetidas = function (parametro) {

    const datasUnicas = []

    parametro.forEach(element => {

        if (datasUnicas.indexOf(element.dataFormatada) == -1) {

            datasUnicas.push(element.dataFormatada)
        }
    });

    return datasUnicas

}

Segue código do meu carregaTarefa:

import { removeDatasRepetidas } from "../service/data.js"
import { criaData } from "./criaData.js"

export const carregaTarefa = function () {

    const tarefasAtualizadas = JSON.parse(localStorage.getItem('tarefas')) || []

    document.querySelector('[data-list]').innerHTML = ""

    removeDatasRepetidas(tarefasAtualizadas).forEach(function(element) {

        document.querySelector('[data-list]').appendChild(criaData(element))

    })
}

Segue código do meu criaTarefa.js:

import { carregaTarefa } from "./carregaTarefa.js";
import BotaoConclui from "./concluiTarefa.js";
import BotaoDeleta from "./deletaTarefa.js";

export const handleNovoItem = function(evento) {

    evento.preventDefault();

    const tarefasSalvas = JSON.parse(localStorage.getItem('tarefas')) || []

    const valorInput = document.querySelector('[data-form-input]').value
    const data = moment(document.querySelector('[data-form-date]').value)
    const dataFormatada = data.format('DD/MM/YYYY')
    const dadosNovaTarefa = {
        valorInput,
        dataFormatada
    }

    const tarefasAtualizadas = [...tarefasSalvas, dadosNovaTarefa]

    localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))

    document.querySelector('[data-form-input]').value = " "

    carregaTarefa()

}

export const Tarefa = function({valorInput, dataFormatada}) {

    const conteudo = `<p class='content'>${dataFormatada} * ${valorInput}</p>`

    const criaTarefa = document.createElement('li')
    criaTarefa.classList.add("task")    
    criaTarefa.innerHTML = conteudo
    criaTarefa.appendChild(BotaoConclui())
    criaTarefa.appendChild(BotaoDeleta())

    return criaTarefa

}
5 respostas
por Mateus Henrique
| 996.6k xp | 1546 posts
Instrutor

Fala Bruno, tudo bem?

Aparentemente, o parâmetro data, não retorna algo que possua o método format, preciso ver o que retorna desse data:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Poderia dar um console.log e mandar um print? Ou se preferir, enviar o projeto compactado ou no github?

Para compactar uma pasta, basta clicar com o botão direito nela, irá aparecer essa seguinte tela:

Após aparecer essa tela, você pode passar clicar em enviar para que abrirá outra lista, e depois clicar em pasta compactada aonde a setinha está apontando, veja abaixo:

Logo após clicar nessa opção aparecera para você um novo arquivo, que é sua pasta compactada. Basta escolher um nome e pronto, você compactou sua pasta! :)

Agora que você compactou a pasta do seu projeto, precisamos enviar esse arquivo para algum lugar para eu poder baixar, certo? Para isso iremos utilizar o site FileDropper, para acessar clique aqui. Para fazermos o upload do arquivo que compactamos basta clicar em Upload File e escolher o arquivo que compactados.

Após isso, você aguarda a barrinha carregar e será gerado um link para você, basta copia-lo e mandar aqui para a gente.

por Estudante
| 75.4k xp | 46 posts

Bom dia Mateus.

Segue o link do meu projeto do File Dropper:

http://www.filedropper.com/projetoceepbruno

por Mateus Henrique
| 996.6k xp | 1546 posts
Instrutor

Bruno, baixei e rodei o seu projeto, porém ele não retorno esse erro que você havia descrevido, porém retornou outros erros, que pois não encontraram os arquivos encontrados, visto que você não havia colocado a extensçao ".js" no final do nome dos arquivos:

Mostrando que falta a extensão js nas importações

O correto:

Adicionando a extensão na importação

Um outro problema que eu encontrei foi o fato de você exportar o botaoConclui ao invés de BotaoConclui, que é o nome da sua função que retorna o botão:

Mostrando que BotaoConclui foi exportado de forma errada

Correto:

Mostrando o BotaoConclui sendo exportado de forma corretaApós isso funciona tudo normalmente:

Mostrando projeto funcionando normalmenteVeja se resolveu, ou se não mandou o projeto errado sem querer!

por Estudante
| 75.4k xp | 46 posts

Olá Mateus, me desculpe, eu te enviei o projeto antigo. Esses erros eu já até acertei no projeto atual.

Segue o link do projeto atual:

http://www.filedropper.com/projetoceepbrunoatual

por Mateus Henrique
| 996.6k xp | 1546 posts
Instrutor

No arquivo criaData.js, você esqueceu de incluir a seguinte função:

const dataMoment = moment(date, 'DD/MM/YYYY')

Essa função informa a formatação necessária, para depois formatar de fato (quando você declara a variável content).

E então, o seu código completo do arquivo criaData.js deveria ser assim:


import { Tarefa } from "./criaTarefa.js"

export const criaData = function (data) {
    const tarefasAtualizadas = JSON.parse(localStorage.getItem('tarefas'))
    const dataTopo = document.createElement("li")
    const dataMoment = moment(data, 'DD/MM/YYYY')
    const conteudo = `<p class="content-data">${dataMoment.format('DD/MM/YYYY')}</p>`

    dataTopo.innerHTML = conteudo

    tarefasAtualizadas.forEach((element) => {

        const dia = moment(element.dataFormatada, 'DD/MM/YYYY')

        if (dataMoment.diff(dia) == 0) {
            dataTopo.appendChild(Tarefa(element))
        }


    });

    return dataTopo
}
}

Espero ter ajudado, bons estudos! =)