使用 Vuejs 和 Axios 合并对象

Posted 2023-02-22

【中文标题】使用 Vuejs 和 Axios 合并对象

【英文标题】：Merge object with Vuejs and Axios

【发布时间】：2019-07-26 21:22:23

【问题描述】：

我有两个从 axios.get 获取的对象和一个从 rss 提要获取的对象，结果是这样的： Two Object

对象具有不同名称但含义相同的字段。例如：Title 和 Full_name 指的是对象的名称。

目前我有这个配置：

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

我想要一个这样的对象：

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

目前我正在使用此代码：

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

我尝试了这些解决方案，结果总是为空：

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

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

【问题讨论】：

在哪里执行 let merged = ... ？确保在获得 api 响应后执行此操作

在由“created”执行的“methods”中包含的函数中。

所以，问题是您的代码 var merged = Object.assign( , this.obj1, this.obj2); 在 API 响应更新 obj1 or obj2 之前正在执行。使用watchers

添加了答案

【参考方案1】：

问题是您的代码 var merged = Object.assign( , this.obj1, this.obj2); 在通过 API 响应更新 obj1 or obj2 之前正在执行。

你可以watchobj1和obj2。当obj1 或obj2 中的任何一个发生更改时，更新merged 对象。

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

【参考方案2】：

根据你的截图，this.obj1 和 this.obj2 是 Arrays

因此您可以使用括号将它们与扩展运算符合并以创建一个新数组：

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

【参考方案3】：

你应该map第二个回复，然后concat回复第一个。

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

注意：在您的示例中，obj1 和 obj2 是数组。

【参考方案4】：

创建一个新的数组名称为

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