2
votes

Fusionner l'objet avec Vuejs et Axios

J'ai deux objets obtenus à partir d'un axios.get et une extraction à partir d'un flux rss et le résultat est quelque chose comme ça: Deux objets

Les objets ont des champs avec des noms différents mais avec la même signification. Par exemple: Title et Full_name font référence au nom de l'objet.

Actuellement, j'ai cette configuration:

let merged = {...this.obj1, ...this.obj2};

var merged = Object.assign( {}, this.obj1, this.obj2);

Je voudrais obtenir un objet comme ceci:

<script>
    export default {
        data() {
            return {
                obj1: {},
                obj2: {} 
            }
        },
        mounted() {
            this.axios
                .get('https://url.com')
                .then((response) => {
                    this.obj1 = response.data;
                  });
            fetch('https://url2.com')
                .then((res) => res.json())
                .then((response) => {
                    this.obj2 = response.items; 
                });
        } 
    }
</script>

Actuellement j'utilise ce code:

Obj3= {name: "Main text 1", desc: "text text 1"},
      {name: "Main text 2", desc: "text text 2"};
      {name: "Main Text 3", desc: "text text 3"};

J'ai essayé ces solutions et le résultat est toujours vide:

Obj1 = {title: "Main text 1", body: "text text 1"},
       {title: "Main text 2", body: "text text 2"};
Obj2 = {full_name: "Main Text 3", description: "text text 3"};

object axios arrays vue.js

3 commentaires

là où vous exécutez let merged = {... ? Assurez-vous de l'exécuter après avoir obtenu la réponse de l'API

Dans une fonction contenue dans "méthodes" qui est exécutée par "créé".

donc, le problème est votre code var merged = Object.assign ({}, this.obj1, this.obj2); s'exécute avant la mise à jour de obj1 ou obj2 par réponse API . Ajout d'une réponse à l'aide des observateurs

4 Réponses :

0
votes

Créez un nouveau nom de tableau en tant que

var newArray[]
var Obj1 = {title: "Main text 1", body: "text text 1"},
           {title: "Main text 2", body: "text text 2"};
var Obj2 = {full_name: "Main Text 3", description: "text text 3"};`enter newArray.Push(Obj1);
newArray.Push(Obj2);

0 commentaires

0
votes

Vous devez mapper la deuxième réponse puis concat sur la première.

var concObject = obj1.concat( obj2.map( item => ({name: item.full_name, desc: item.description}) ) )

NB: D'après votre exemple obj1 et obj2 sont des tableaux.

0 commentaires

2
votes

D'après votre capture d'écran, this.obj1 et this.obj2 sont des Arrays

Donc vous peut les fusionner avec l'opérateur de propagation en utilisant des crochets pour créer un nouveau tableau:

let merged = [...this.obj1, ...this.obj2]

0 commentaires

0
votes

Le problème est votre code var merged = Object.assign ({}, this.obj1, this.obj2); est en cours d'exécution avant la mise à jour de obj1 ou obj2 par l'API réponse.

Vous pouvez regarder obj1 et obj2 . Mettez à jour l'objet fusionné lorsque l'un des obj1 ou obj2 est modifié.

<template>
  <div>Merged Object: {{ merged }}</div>
</template>

<script>
export default {
  data() {
    return {
      obj1: {},
      obj2: {},
        merged: {}
      }
    },
  mounted() {
    this.axios
      .get('https://url.com')
      .then((response) => {
        this.obj1 = response.data;
      });
      fetch('https://url2.com')
        .then((res) => res.json())
        .then((response) => {
          this.obj2 = response.items; 
        });
  },
  watch: { 
    // whenever obj1 changes, this function will run
    obj1(newVal, oldVal) {
      this.merged = Object.assign( {}, newVal, this.obj2);
    },

    // whenever obj2 changes, this function will run
    obj2(newVal, oldVal) {
      this.merged = Object.assign( {}, newVal, this.obj1);
    }

  }
}
</script>

0 commentaires