javascript - 无法显示二级数组 JSON

Question

我有以下数据：

 hotlines: [
  {
    id: '1',
    description: 'Description',
    directories: [
      {
        id: '1',
        contactno: '001',

      },
      {
        id: '2',
        contactno: '002',

      }
    ],
    socialmedias: [
      {
        id: '1',
        socmed: 'facebook',

      },
      {
        id: '2',
        socmed: 'twitter',

      }
    ]
  }
]

我根据转发的 id 使用此脚本处理我想要的记录。

<script>
  export default {
    data: function () {
      var hotlineId = this.$route.params.id;
      var currentHotline;
      var currentDirectories;
      var currentSocialMedias;
      this.$root.hotlines.forEach(function (hotline) {
        if (hotline.id === hotlineId) {
          currentHotline = hotline;
          currentDirectories = currentHotline.currentDirectories;
          currentSocialMedias = currentHotline.currentSocialMedias;
        }
      });
      return {
        hotline: currentHotline,
        directories: currentDirectories,
        socialmedias: currentSocialMedias
      };
    }
  };
</script>

使用下面的代码，我能够显示热线的描述。但我无法显示目录和社交媒体的数据。请指导我解决这个问题。TIA。

     <div class="block block-strong">
        {{hotline.description}}
        </p>
        <p class="row">
          <div class="list links-list">
            <ul>
              {{#each directories}}
              <li><a href="#" class="col button button-fill">{{contactno}}</a></li>
              {{/each}}
            </ul>
          </div>
        </p>
        <p class="row">
          <div class="list links-list">
            <ul>
              {{#each socialmedias}}
              <li><a href="#" class="col button button-fill">{{socmed}}</a></li>
              {{/each}}
            </ul>
          </div>
        </p>
      </div>

标签： javascriptandroidjsoncordovahtml-framework-7

Answer 1

@raul，我按照您的指示进行操作。然后我对我的代码应用以下更改以显示它们。

     <div class="block block-strong">
        {{hotline.description}}
        </p>
        <p class="row">
          <div class="list links-list">
            <ul>
              {{#each directories}}
              <li><a href="#" class="col button button-fill">{{directories.contactno}}</a></li>
              {{/each}}
            </ul>
          </div>
        </p>
        <p class="row">
          <div class="list links-list">
            <ul>
              {{#each socialmedias}}
              <li><a href="#" class="col button button-fill">{{socialmedias.socmed}}</a></li>
              {{/each}}
            </ul>
          </div>
        </p>
      </div>

没有显示描述，然后我在检查时发现了这个错误

未捕获（承诺中）错误：TypeError：无法读取 eval 时未定义的属性“contactno”（component-loader.js:50）