7
respostas

Arrey em templete String retornando

class FuncionariosView{

    constructor(elemento){

        this._elemento = elemento;
    }

    _template(model){

        return `${model.funcionarios.map(f => `

                    <tr>
                        <td>${f._nome}</td>
                        <td>${f._endereco}</td>
                        <td>${f._salario}</td>
                    <tr>

                `).join('')}`;
    }

    update(model){
        //console.log(model.funcionarios);
        this._elemento.innerHTML = this._template(model);
    }
}
7 respostas

Você não está colocando as crases no começo e final das templates strings.

Por favor, utilize o botão <> INSERIR CÓDIGO no topo da caixa de texto, assim facilita a visualização.

Não havia entendido justamente pelo código não estar envolvido dentro de um bloco de código, mas agora entendi, você está sim usando as crases. Testei seu código e funcionou aqui.

Pode passar o que aparece pra você quando loga model.funcionarios

Desculpa a demora, aparece isso:

Array(0)
length
:
0
__proto__
:
Array(0)
concat
:
ƒ concat()
constructor
:
ƒ Array()
copyWithin
:
ƒ copyWithin()
entries
:
ƒ entries()
every
:
ƒ every()
fill
:
ƒ fill()
filter
:
ƒ filter()
find
:
ƒ find()
findIndex
:
ƒ findIndex()
forEach
:
ƒ forEach()
includes
:
ƒ includes()
indexOf
:
ƒ indexOf()
join
:
ƒ join()
keys
:
ƒ keys()
lastIndexOf
:
ƒ lastIndexOf()
length
:
0
map
:
ƒ map()
pop
:
ƒ pop()
push
:
ƒ push()
reduce
:
ƒ reduce()
reduceRight
:
ƒ reduceRight()
reverse
:
ƒ reverse()
shift
:
ƒ shift()
slice
:
ƒ slice()
some
:
ƒ some()
sort
:
ƒ sort()
splice
:
ƒ splice()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
unshift
:
ƒ unshift()
Symbol(Symbol.iterator)
:
ƒ values()
Symbol(Symbol.unscopables)
:
{copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__
:
Object

Depois aparece isso:

Array(1)
0
:
Array(3)
0
:
Funcionario {_nome: "Douglas", _endereco: "Rua da esquina, 123", _salario: "4500"}
1
:
Funcionario {_nome: "Felipe", _endereco: "Rua da virada, 456", _salario: "5000"}
2
:
Funcionario {_nome: "Silvio", _endereco: "Rua da aresta, 789", _salario: "6000"}
length
:
3
__proto__
:
Array(0)
length
:
1
__proto__
:
Array(0)

Sarah, rodei seu código e funcionou certinho:

class Funcionario {
  constructor (nome, endereco, salario) {
    this._nome = nome
    this._endereco = endereco
    this._salario = salario
  }
}

class FuncionariosView {
  constructor (elemento) {
    this._elemento = elemento
  }

  _template (model) {
    return `${model.funcionarios.map(f => `

                    <tr>
                        <td>${f._nome}</td>
                        <td>${f._endereco}</td>
                        <td>${f._salario}</td>
                    <tr>

                `).join('')}`
  }

  update (model) {
    // console.log(model.funcionarios);
    console.log(this._template(model))
    // this._elemento.innerHTML = this._template(model)
  }
}

const model = {

  funcionarios: [
    new Funcionario('Douglas', 'Rua da esquina, 123', 4500),
    new Funcionario('Felipe', 'Rua da virada, 456', 5000),
    new Funcionario('Silvio', 'Rua da aresta, 789', 6000)
  ]
}

const view = new FuncionariosView()

view.update(model)

Quando executo view.update(model) ele loga no console:

​​​​​                      <tr>​​​​​
​​​​​                          <td>Douglas</td>​​​​​
​​​​​                          <td>Rua da esquina, 123</td>​​​​​
​​​​​                          <td>4500</td>​​​​​
​​​​​                      <tr>​​​​​
​​​​​​​​​​
​​​​​                  ​​​​​
​​​​​​​​​​
​​​​​                      <tr>​​​​​
​​​​​                          <td>Felipe</td>​​​​​
​​​​​                          <td>Rua da virada, 456</td>​​​​​
​​​​​                          <td>5000</td>​​​​​
​​​​​                      <tr>​​​​​
​​​​​​​​​​
​​​​​                  ​​​​​
​​​​​​​​​​
​​​​​                      <tr>​​​​​
​​​​​                          <td>Silvio</td>​​​​​
​​​​​                          <td>Rua da aresta, 789</td>​​​​​
​​​​​                          <td>6000</td>​​​​​
​​​​​                      <tr>​​​​​
​​​​​​​​​​

O erro deve estar vindo de outro lugar.

No outro post que você abriu, você disse:

está me retornando undefined

Mas o que está te retornando undefined? Onde, qual função? O que aparece no seu console como erro?

Não aparece nenhum erro no console.

O undefined aparece dentro das td's da minha tabela que deveria retornar os dados dos funcionários.

Agora eu testei isso, e ele imprimiu a minha tabela com todos os funcionários nos td's:

update(model){
        //console.log(model.funcionarios);
        //console.log(this._template(model));
        let elemento = document.querySelector("#tabela-func");
        elemento.innerHTML = this._template(model);
    }
}

const model = {

  funcionarios: [
    new Funcionario('Douglas', 'Rua da esquina, 123', 4500),
    new Funcionario('Felipe', 'Rua da virada, 456', 5000),
    new Funcionario('Silvio', 'Rua da aresta, 789', 6000)
  ]
}

const view = new FuncionariosView()

view.update(model)

Então provavelmente o problema está no elemento que sua classe está recebendo no construtor, tente fazer um console.log nele:

class FuncionariosView {
  constructor (elemento) {
    console.log(elemento)
    this._elemento = elemento
  }
....