2016-08-15 3 views
0

HTMLテンプレート用のシンプルなWebアプリケーションでJadeを使用しようとしています。私は次のようになりますJSON持っている:私はジェイドで、この応答のリストをループにしようとしているJSONプロパティの存在を確認する翡翠テンプレート

{ 
    "responses": [ 
     { 
      "fieldOne": 1, 
      "fieldTwo": 2, 
      "fieldThree": "Some string" 
     }, 
     { 
      "fieldOne": 10, 
      "field2": 20, 
      "fieldFour": "Some other string" 
     } 
    ] 
} 

を、各応答のためのテーブルの行を作成します。ループが正常に動作しているようだが、問題はいくつかの応答がフィールドを欠いているということで、フィールドがない場合はそのセルに空白を入れたいと思う。 JSONオブジェクト全体にマッピングされる "responseData"というエントリを1つだけ持つマップ(Sparkのマップ)をJadeに渡します。

body 
    div 
     table 
      thead 
       tr 
        th Field One 
        th Field Two 
        th Field Three 
        th Field Four 
      tbody 
       each val in responseData.responses 
        tr 
         td 
          #{val.fieldOne} 
         td 
          #{val.fieldTwo} 
         td 
          #{val.fieldThree} 
         td 
          #{val.fieldFour} 

これは、各応答に4つのフィールドがすべてある場合に機能します。値を読み取ろうとする前に、フィールドが存在するかどうかをチェックする条件に置き換えてください。次のようなものがあります。

これは、fieldFourが存在しない場合、「アクセスできない不明なプロパティフィールド4」を返します。私はvalが特定のプロパティを持っているかどうかをチェックする方法を知りたいです。私は翡翠のチュートリアルを試してみた。localsでブラケット表記などを使って物事を試してみたが役に立たなかった。私はこれがループ内で行われる例を見つけていないので、それが問題になるかもしれません。

私は他のすべてのスタックオーバーフローの問題を見てきました。だから助けてください!ありがとう!

答えて

0

感嘆符!のためにハッシュ#を交換することによって、これを実現することができました。

#はエスケープされ、!は生データです。あなたはここでの違いの作業例を見ることができます - http://naltatis.github.io/jade-syntax-docs/#escaping

ジェイド:

- responseData = { "responses": [{"fieldOne": 1,"fieldTwo": 2,"fieldThree": "Some string"},{"fieldOne": 10,"field2": 20,"fieldFour": "Some other string"}]} 

table 
    thead 
    tr 
     th Field One 
     th Field Two 
     th Field Three 
     th Field Four 
    tbody 
    each val in responseData.responses 
     tr 
     td 
      if val.fieldOne 
      !{val.fieldOne} 
     td 
      if val.fieldTwo 
      !{val.fieldTwo} 
     td 
      if val.fieldThree 
      !{val.fieldThree} 
     td 
      if val.fieldFour 
      !{val.fieldFour} 

私はここで作業バージョンを持っている - http://codepen.io/AdamCCFC/pen/akrjVv

関連する問題