Show JSON in VUE.js

Question

I made an API on Node.js, If I send some params I get the response, it's the same person but different language info, I would like to present it like in the second example I haven't been able to figure it out.

How I'm getting the data

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

how I want to see it

[
   {
        "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);
     }, 
    }
}

How I see it right now [1]: https://i.sstatic.net/ezHgH.png

how I want to see it - have you tried to change the incoming data to what you need? note: your "how I want to see it" is not quite valid — Jaromanda X
– Jaromanda X, Commented Nov 16, 2022 at 2:07
Also, "how I'm getting the data" ... is it always an array with each object having the same Id? — Jaromanda X
– Jaromanda X, Commented Nov 16, 2022 at 2:09
yes I tried group_concat but I get all data in one column and then I had to split it with js but I just couldn't work it out. — AIAM2601
– AIAM2601, Commented Nov 16, 2022 at 2:10
yes it returns the same person, same id, just different language info — AIAM2601
– AIAM2601, Commented Nov 16, 2022 at 2:12

Jaromanda X · Accepted Answer · 2022-11-16 02:22:19Z

1

Rather than pointlessly trying to get the format you want in the MySQL result (not possible) - work with the JSON to convert it to what you want

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

working example

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);

answered Nov 16, 2022 at 2:22

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show JSON in VUE.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related