在 VUE.js 中显示 JSON

Question

我在 Node.js 上发了一个 API，如果我发送一些参数，我会得到响应，它是同一个人，但语言信息不同，我想像第二个例子中那样展示它，但我一直无法弄清楚。

我如何获取数据

[
    {
        "Id": 1,
        "ced": "123",
        "Name": "Andres",
        "NativeLanguage": 1,
        "Level": 100,
        "NameLang": "spanish",
    },
    {
        "Id": 1,
        "ced": "123",
        "Name": "Andres",
        "NativeLanguage": 1,
        "Level": 100,
        "NameLang": "english",
    }
]

我多么想看到它

[
   {
        "Id": 1,
        "ced": "123",
        "Name": "Andres",
   }
   "Idiomas":
     [
       {
         "NativeLanguage": 1,
        "Level": 100,
        "NameLang": "spanish",
       },
       {
         "NativeLanguage": 1,
        "Level": 100,
        "NameLang": "spanish",
       }

     ]

]

export default {
  el: "myFormPerson",
  data() {
    return {
      results:[],
      ced:'',
    }
  },
  methods: {
     submitForm() {
         axios.get('http://localhost:8080/person/' + this.ced)
        .then((response) => {
          this.results = response.data;
         //console.log(this.results);
         })
        .catch(function (error) {
        console.log(error);
        })
        .finally(function () {
        });
        //console.log(this.ced);
     }, 
    }
}

我现在的看法 [1]： https://i.stack.imgur.com/ezHgH.png

Answer 1

而不是毫无意义地尝试在 MySQL 结果中获得您想要的格式（不可能） - 使用 JSON 将其转换为您想要的格式

this.results=Object.values(response.data.reduce((acc,{Id,ced,Name,...rest})=>(acc[Id]||={Id,ced,Name,Idiomas:[]},acc[Id].Idiomas.push({...rest}),acc),{}));

工作示例

 const have = [{ "Id": 1, "ced": "123", "Name": "Andres", "NativeLanguage": 1, "Level": 100, "NameLang": "spanish", }, { "Id": 1, "ced": "123", "Name": "Andres", "NativeLanguage": 1, "Level": 100, "NameLang": "english", } ]; const want = Object.values(have.reduce((acc,{Id,ced,Name,...rest}) => (acc[Id]||={Id,ced,Name,Idiomas:[]},acc[Id].Idiomas.push({...rest}),acc),{})); console.log(want);