如何在Vue.js中获取JSON嵌套数组内的Account ID字段

嘿，我来帮你搞定这个嵌套JSON的提取问题！你的数据结构确实有点多层嵌套，但一步步拆解下来其实很简单。

先拆解你的JSON结构 #

首先咱们先理清楚要找的数据在哪个层级：

• 你的接口返回response.data里，result.Accounts.row是一个账号条目数组（每个元素对应一个账号）
• 每个账号条目里的FL数组，是一组键值对：val是字段名称（比如你要找的"ACCOUNT ID"），content就是对应的值

方案1：请求后直接提取单个Account ID #

如果只需要展示第一个账号的ID，可以在axios请求的回调里直接处理数据：

<template>
  <div>
    <p>Account ID: {{ accountId || '未获取到账号ID' }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      accountId: null
    };
  },
  mounted() {
    axios.get('你的接口地址')
      .then(res => {
        // 先拿到账号条目数组
        const accountRows = res.data.result.Accounts.row;
        // 确保数组有内容
        if (accountRows.length > 0) {
          // 在FL数组里找到val为"ACCOUNT ID"的项
          const targetItem = accountRows[0].FL.find(item => item.val === "ACCOUNT ID");
          // 找到后赋值给data里的变量
          if (targetItem) this.accountId = targetItem.content;
        }
      })
      .catch(err => {
        console.error('请求出错啦:', err);
      });
  }
};
</script>

方案2：用计算属性处理（适合保留完整响应数据的场景） #

如果需要保留完整的接口响应数据，用计算属性来动态提取会更灵活：

<template>
  <div>
    <p>Account ID: {{ accountId }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      fullResponse: null
    };
  },
  mounted() {
    axios.get('你的接口地址')
      .then(res => {
        this.fullResponse = res.data;
      })
      .catch(err => {
        console.error('请求出错啦:', err);
      });
  },
  computed: {
    accountId() {
      // 先判断数据是否加载完成
      if (!this.fullResponse) return '加载中...';
      
      const accountRows = this.fullResponse.result.Accounts.row;
      // 处理无账号数据的情况
      if (!accountRows || accountRows.length === 0) return '无账号数据';
      
      // 查找目标字段
      const targetItem = accountRows[0].FL.find(item => item.val === "ACCOUNT ID");
      return targetItem ? targetItem.content : '未找到Account ID';
    }
  }
};
</script>

方案3：展示所有账号的Account ID #

如果接口返回多个账号，要批量提取的话可以用map循环处理：

<template>
  <div>
    <h3>所有账号ID列表</h3>
    <ul>
      <li v-for="(account, idx) in accountList" :key="idx">
        账号{{ account.no }}: {{ account.id }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      accountList: []
    };
  },
  mounted() {
    axios.get('你的接口地址')
      .then(res => {
        const accountRows = res.data.result.Accounts.row;
        // 循环提取每个账号的ID
        this.accountList = accountRows.map(row => {
          const targetItem = row.FL.find(item => item.val === "ACCOUNT ID");
          return {
            no: row.no,
            id: targetItem ? targetItem.content : '未知ID'
          };
        });
      })
      .catch(err => {
        console.error('请求出错啦:', err);
      });
  }
};
</script>

小提示 #

记得处理边界情况哦：比如接口返回为空、row数组为空、FL数组里找不到"ACCOUNT ID"的情况，避免页面报错或者显示空白。

内容的提问来源于stack exchange，提问作者Tim