无法显示二级数组 JSON答案

【问题标题】：Cannot display the Second Level Array JSON无法显示二级数组 JSON
【发布时间】：2020-08-28 01:33:48
【问题描述】：

我有以下数据：

 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>

【问题讨论】：

标签： javascript android json cordova html-framework-7

【解决方案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：无法读取未定义的属性“contactno” 在 eval (component-loader.js:50)

【讨论】：

【解决方案2】：

在我看来，在您的脚本中，当您分配 currentDirectories 和 currentSocialMedias 时，它应该是

currentDirectories = currentHotline.directories;
currentSocialMedias = currentHotline.socialmedias;

而不是

currentDirectories = currentHotline.currentDirectories;
currentSocialMedias = currentHotline.currentSocialMedias;

所以完整的脚本是：

<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.directories;
          currentSocialMedias = currentHotline.socialmedias;
        }
      });
      return {
        hotline: currentHotline,
        directories: currentDirectories,
        socialmedias: currentSocialMedias
      };
    }
  };
</script>

【讨论】：