エラーJSONオブジェクトをJavaScript ES6テンプレートリテラルで使用しようとしています

Question

初めてテンプレートリテラルを使用しようとしていますが、他のいくつかのリソースを読み込んだ後にデバッグできないというエラーが発生しています。

$.ajax({ 
    // usual things 
    success: function(data) { 
     // add a manual note before looping through the ones returned via ajax 
     var nowNote = { status: `now`, text: `Now`, created_at: null }; 
     var notes = data.notes; 

     var timeline = ` 

      ${noteTemplate({ nowNote })} 

     `; 
     // take out ${timelineTemplate({ notes })} for now 
    } 
}); 

var timelineTemplate = ({ notes }) => { 
    return ` 
     ${notes.map(note => noteTemplate({ 
      note 
     })).join('')} 
    `; 
} 

var noteTemplate = ({ note }) => { 
    return ` 

     ${note.created_at == null ? 
      '' 
     : `<strong>${moment(note.created_at).format('DD/MM/YYYY HH:mm')}</strong>`} 

     <span>${note.text.replace(/(?:\r\n|\r|\n)/g, '<br>')}</span> 
    `; 
} 

コンソール上のエラーメッセージは次のとおりです。

Uncaught TypeError: Cannot read property created_at of undefined when trying to do the comparison of note.created_at with null .

私が私が私が「は根本的に間違って何かをやったと思わせる性質をアクセスするためのドット表記を使用して好きしていないようだ

現時点でデバッグするのも無知です。

基本的に私はちょうどリテラルテンプレートにJSONオブジェクトを渡すと、それはまた、条件文などを使用することができるというながらプロパティをだ使用して、それからコンポーネントを構築したいと思います

Answer 1

あなたの問題、あなたのようにあなたの関数を宣言しているあります：

var noteTemplate = ({ note }) => { 
    return ` 

     ${note.created_at == null ? 
      '' 
     : `<strong>${moment(note.created_at).format('DD/MM/YYYY HH:mm')}</strong>`} 

     <span>${note.text.replace(/(?:\r\n|\r|\n)/g, '<br>')}</span> 
    `; 
} 

だから、noteという名前の属性を持つオブジェクトをspectingています。

[OK]をクリックすると、宣言で中括弧を削除するか、{note: nowNote}だけではなくnote