javascript - Rendering to DOM w/Mustache

Question

First time posting here.. having serious issues with getting my test to pass.

Here are the prompts I have:

1. renderPokemon

   • Runs the pokemon list of objects through a constructor function
   • Generates the markup needed to add each pokemon object to the DOM.
   • Adds each Pokemon to the

2. Poki constructor function

   • This function will take the results of the API and make sure that they are all in the correct format.

All seems to be working fine till I get to the .push(html) portion. When I run the test, I get back a Received string: "". Any thoughts or ideas would be greatly appreciated! Very new to the mustache and losing my mind on this one..

  "count": 964,
  "next": "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url": "https://pokeapi.co/api/v2/pokemon/2/"
    },
    {
      "name": "venusaur",
      "url": "https://pokeapi.co/api/v2/pokemon/3/"
    },
    {
      "name": "charmander",
      "url": "https://pokeapi.co/api/v2/pokemon/4/"
    },
    {
      "name": "charmeleon",
      "url": "https://pokeapi.co/api/v2/pokemon/5/"
    },
    {
      "name": "charizard",
      "url": "https://pokeapi.co/api/v2/pokemon/6/"
    },
    {
      "name": "squirtle",
      "url": "https://pokeapi.co/api/v2/pokemon/7/"
    },
    {
      "name": "wartortle",
      "url": "https://pokeapi.co/api/v2/pokemon/8/"
    },
    {
      "name": "blastoise",
      "url": "https://pokeapi.co/api/v2/pokemon/9/"
    },
    {
      "name": "caterpie",
      "url": "https://pokeapi.co/api/v2/pokemon/10/"
    },
    {
      "name": "metapod",
      "url": "https://pokeapi.co/api/v2/pokemon/11/"
    }
  ]
};

let $ = createSnippetWithJQuery(`
<script id="template" type="x-tmpl-mustache"><h2>{{ name }}</h2><img src="{{ img_url }}" alt="{{ name }}" /></script><main></main>
`);


const renderPokemon = () => {
  // Solution code here...
  let templateArr = [];
  let $template = $('#template').html();
  pokemon.results.forEach(value => {
    let html = Mustache.render($template, {
    name: value.name,
    img_url: value.url
    });
     templateArr.push(html);
  });
  return templateArr;
}

function Poki(obj) {
  // Solution code here ...
  this.name = obj.name;
  this.img_url = obj.img_url;
  return pokemon;
}

///////////////////////////////////////////////////
// TESTS
//////////////////////////////////////////////////

describe('Testing challenge', () => {
  it('It should return html markup with the character', () => {
    renderPokemon();
    expect($('h2').text()).toContain('ivysaur');
    expect($('img').eq(5).attr('src')).toContain(6);
  });
});

function createSnippetWithJQuery(html) {
  return cheerio.load(html);
}; ```

question from:https://stackoverflow.com/questions/66058418/rendering-to-dom-w-mustache

Answer 1

Waitting for answers