Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
JS how to render a template from a object

I have a string template such as:

template = `<li>${name}<li><li>${address}<li><li>${sex}<li>`

I have defined a object {name: "tom", address: "usa", sex: "male"} in js file.

how can I render the template by the object directly? to get result as:

<li>tom<li><li>usa<li><li>male<li>
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

:)

var obj = {name: "tom", address: "usa", sex: "male"};
var result;
with(obj)
    result = `<li>${name}<li><li>${address}<li><li>${sex}<li>`

or

var obj = {name: "tom", address: "usa", sex: "male"};
var template = "<li>${name}<li><li>${address}<li><li>${sex}<li>";
var result = template.replace(/\${(\w+)}/g, function($0, $1) {
    return obj[$1];
});
about 4 years ago · Juan Pablo Isaza Relatório

0

Use the template literal when you access the object

I also had to fix your HTML to close the LIs

const arr = [
{ name: "tom", address: "usa", sex: "male" },
{ name: "lisa",address: "usa", sex: "female"}
];

document.getElementById('ul').innerHTML = arr
  .map(({ name, address, sex}) => `<li>${name}</li><li>${address}</li><li>${sex}</li>`)
  .join("")
<ul id="ul"></ul>

about 4 years ago · Juan Pablo Isaza Relatório

0

Just add obj. in the template and it should work.

var obj = {name: "tom", address: "usa", sex: "male"};
var template = `<li>${obj.name}<li><li>${obj.address}<li><li>${obj.sex}<li>`;
console.log(template);
// <li>tom<li><li>usa<li><li>male<li>

or you can destructure the object like so:

var obj = {name: "tom", address: "usa", sex: "male"};

// destructure
const { name, address, sex } = obj;

var template = `<li>${name}<li><li>${address}<li><li>${sex}<li>`;
console.log(template);
// <li>tom<li><li>usa<li><li>male<li>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda