JavaScript で描画する

ブラウザ側で表示を切り替えたい場合は、JSON をそのまま JavaScript に渡します。

JSON を JavaScript に渡す

<mt:ContentField content_field="営業日">
  <mt:ContentFieldValue setvar="schedule_json" />
</mt:ContentField>

<div id="schedule"></div>

<script>
  const schedule = JSON.parse('<mt:Var name="schedule_json" encode_js="1" />');
  console.log(schedule.year, schedule.month, schedule.items);
</script>

encode_js="1" は Movable Type 標準のモディファイアで、引用符や改行を JavaScript の文字列に埋め込める形にエスケープします。シングルクォートで囲んだうえで JSON.parse() に渡してください。

表を組み立てる

<mt:ContentField content_field="営業日">
  <mt:ContentFieldValue setvar="schedule_json" />
</mt:ContentField>

<table id="schedule">
  <thead>
    <tr><th>日付</th><th>営業</th><th>開店</th><th>備考</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  const schedule = JSON.parse('<mt:Var name="schedule_json" encode_js="1" />');
  const tbody = document.querySelector('#schedule tbody');

  (schedule.items || []).forEach((item) => {
    const tr = document.createElement('tr');
    const cells = [
      item.date + '日（' + item.day + '）',
      item.open || '',
      item.openTime || '',
      item.note || ''
    ];
    cells.forEach((text) => {
      const td = document.createElement('td');
      td.textContent = text;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
</script>

入力された値をそのまま innerHTML に渡すと、意図しない HTML が挿入される可能性があります。上の例のように textContent を使うか、エスケープ処理を行ってください。

値の有無に注意する

一度も入力されていない項目はキーが存在しない場合があります。item.note || '' のように既定値を用意してください。

チェックボックスの値は配列です。

const plans = Array.isArray(item.plans) ? item.plans.join('、') : (item.plans || '');

年月の扱い

year は 4 桁、month は 2 桁ゼロ埋めの文字列です。Date オブジェクトを作る場合は、月が 0 始まりであることに注意してください。

const firstDay = new Date(Number(schedule.year), Number(schedule.month) - 1, 1);