2016-10-31 11 views
0

こんにちは私は、ハブスポットにHTMLコードを生成しているJavaScriptをいくつか持っています。私のクライアントは、コンテンツの編集に簡単にアクセスしたいのですが、これをHubLテンプレートで設定しようとしています。配列変数を出力するためにforループを実行できることがわかりましたが、オブジェクトの配列を出力できるかどうか不思議でした。HubL内のオブジェクトの配列をループするには?

彼らのコード:

{% set languages = ['HTML', 'CSS', 'Javascript', 'Python', 'Ruby', 'PHP,', 'Java'] %} 

{% for language in languages %} 
<li>{{ language }}</li> 
{% endfor %} 

私のコードの簡易版:

{ % set episodes = [{ 
     id: "1", 
     name: "Episdoe 1" 
    }, { 
     id: "2", 
     name: "Episdoe 2" 
    }, { 
     id: "3", 
     name: "Episdoe 3" 
    }, { 
     id: "4", 
     name: "Episdoe 4" 
    }] 
%} 

<ul>{% for episode in episodes %} 
    <li>{{ episode.id }}</li> 
    <li>{{ episode.name}}</li> 
    {% endfor %} 
</ul> 

私は現在、間違った構文を持つために、エラーを取得しています。このエラーは[]内に角カッコがあることから発生しています。私は自分のサイトを見てみたし、Googleの検索を少ししたが、私はオブジェクトの配列を表示する上で何かを見つけることができないようだ。

+1

あなたのコードが間違ってフォーマットされます。オブジェクトのあなたの配列で(1)不足しているコンマはid'キーと値のペア '後。あなたの配列の後で '{%set%}'ステートメントを閉じる前に –

+0

私はそれを修正しますが、それらは実際には例のために入れました。 set episodes = [{id: "1"}、{id: "2"} ...}としてリストアップしていたとき、これらの変更以前はコードが機能しませんでした。 – Jleibham

+0

申し訳ありませんが、あなたは正しかった私のコードを壊していた最後に余分な構文エラーがありました。あなたの助けをありがとう:) – Jleibham

答えて

1

ここでは、(修正を含む)の上方に設けられたオブジェクト/データを用いて機能HubLテンプレートの例です:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>{{ content.html_title }}</title> 
    <meta name="description" content="{{ content.meta_description }}"> 
    {{ standard_header_includes }} 
</head> 
<body> 
    {% set episodes = [ 
     { 
      id: "1", 
      name: "Episdoe 1" 
     }, 
     { 
      id: "2", 
      name: "Episdoe 2" 
     }, 
     { 
      id: "3", 
      name: "Episdoe 3" 
     }, 
     { 
      id: "4", 
      name: "Episdoe 4" 
     } 
    ] %} 

    <ul>{% for episode in episodes %} 
     <li>{{ episode.id }}</li> 
     <li>{{ episode.name}}</li> 
     {% endfor %} 
    </ul> 

    {{ standard_footer_includes }} 
</body> 
</html> 
+0

ありがとうのカーク!あなたが気にしないならもう一つの簡単な質問。クライアントが「ページの編集」ページからオブジェクトを追加できるように、これを実装できますか?だから、これは{%set episodes = [{id:(id)、name:(episode)}のような変数に設定することができます。 明らかに私の構文は間違っていますが、編集して、私のクライアントはこのエピソードを追加するためにこのコードを悩ます必要はありません。 – Jleibham

関連する問題