多次元配列を書き出す際に一部だけエラーになる（JavaScript）

Question

JavaScriptの多次元配列から情報を取得してhtmlに書き出す際、
一部のデータだけなぜか「Uncaught TypeError」のエラーになります。

console.log();でチェックしてみたところ、情報の取得は問題なく、
書き出す段階でエラーになっているようです。

書き出し部分のコードはおおよそ以下のようなものです。

var fruits = [
   { id: 1, name: 'みかん', price: 100, url:"https://mikannnn.com" },
   { id: 2, name: 'りんご', price: 110, url:"https://ringoooo.com" },
   { id: 3, name: 'なし', price: 120, url:"https://nashiiii.com" },
（〜略〜）
];

var stockList = '';
for (var i=0; i<5;i++){
stockList += 
  '<div class="result">
    <a href="' + fruits[i]['url'] + '" target="_blank">
      <p class="result_title">' + fruits[i]['name'] + '</p>
    </a>
  </div>'
最大5件を書き出すイメージです。「stockList += 」以降は1行で書いていますが、見やすくするため改行を加えています。

　

問題なく書き出せるものは書き出せるのですが、
一部に限って『fruits[i]['url']』からエラーになり、
Uncaught TypeError: Cannot read property 'url' of undefined　の表示になります。

データ型に差異はありませんでした。
全角スペースが混ざっていた、ということもありません。

話が漠然としていて恐縮なのですが、
こういった場合、どういう原因が考えられそうでしょうか。
次にどこを調べてみるべきかも思い当たらず行き詰まっています。

---

・通常のhtmlではなく、特定の環境下における実装になります。また、環境都合のためES6が使えません。

Answer 1

• 文字列のクォートがちゃんと閉じてない
• シングルクォートの途中に改行はいれられない

ヒアドキュメントを試してみて下さい

Comments

[yambejp]

var fruits = [
{ id: 1, name: 'みかん', price: 100, url:"https://mikannnn.com" },
{ id: 2, name: 'りんご', price: 110, url:"https://ringoooo.com" },
{ id: 3, name: 'なし', price: 120, url:"https://nashiiii.com" },
];
var stockList = '';
for (var i=0;i<2;i++){
stockList +=`<div class="result">
<a href="${fruits[i]['url']}" target="_blank">
<p class="result_title">${fruits[i]['name']}</p>
</a>
</div>`;
}
console.log(stockList);

[spangl]

ありがとうございます、検証してみます！