开发者问题收集

拆分数组和删除逗号时出错 - javascript/VueJS

2022-10-06
90
javascript vue.js

控制台错误： 执行已安装钩子期间出现未处理的错误 未捕获（在承诺中）TypeError：无法读取未定义的属性（读取“split”）

它似乎可以正常工作，直到遇到没有大陆数据的组。

这对我来说看起来像是问题，但我不知道如何解决它。

此外，如果可能的话，我希望删除 JSO 中所有文件的重复项和结尾逗号。有没有更好的方法可以将其作为一个函数来完成？

任何帮助都非常感谢 

JSON
      "response": [
{ 
"group": { 
"continent": "ASIA,EUROPE,ASIA,EUROPE,ASIA,ASIA,EUROPE,EUROPE,ASIA,AUSTRALASIA,AUSTRALASIA,EUROPE,",
"location": "AS,AS,AS,AS,EU,AF,EU,AF,AU,AU,AU,AU,", 
}, 
},
{ 
"group": {
"continent": "ASIA,EUROPE,AFRICA,EUROPE,ASIA,AFRICA,EUROPE,",
"location": "AS,AS,AS,AU,AU,", 
}, 
},
{ 
"group": {
"continent": "ASIA,",
}, 
},
{ 
"group": {
"continent": "EUROPE,",
}, 
},
{ 
"group": {
"continent": "ASIA,EUROPE,",
"location": "AU,AU,"
}, 
},
 ....
]
 
methods: {
 removeDuplicates() {
      const  uniques = [];
      this.response.group.continent.split(",").forEach((l) => {
        if ( uniques.indexOf(l) == -1 && l !== "") {
           uniques.push(l);
        }
      });
      console.log(" uniques : " +  uniques);
      this.continent =  uniques.join(", ");
    },
}

mounted() {    
    this.removeDuplicates();
  }
2个回答

TypeError：无法读取未定义的属性（读取“split”）

这意味着 this.response.group.continent 未定义

分析您的数据，您应该使用 this.response[0].group.continent 访问相同的数据

Nitheesh
2022-10-06

错误消息表明 this.response.group 不是字符串，而通过查看您的数据， this.response 是一个 对象数组 。因此，您需要进行迭代才能访问数组中每个对象的 group 属性。使用 Array.forEach 应该可以完成这项工作，而几乎不需要对逻辑进行任何修改： 

const uniques = [];
this.response.forEach(({ group }) => {
  group.continent.split(",").forEach((l) => {
    if ( uniques.indexOf(l) == -1 && l !== "") {
        uniques.push(l);
    }
  });
});

请参阅下面的工作示例（它不是 VueJS 应用程序，但包含与概念验证相同的逻辑）： 

const response = [{
    "group": {
      "continent": "ASIA,EUROPE,ASIA,EUROPE,ASIA,ASIA,EUROPE,EUROPE,ASIA,AUSTRALASIA,AUSTRALASIA,EUROPE,",
      "location": "AS,AS,AS,AS,EU,AF,EU,AF,AU,AU,AU,AU,",
    },
  },
  {
    "group": {
      "continent": "ASIA,EUROPE,AFRICA,EUROPE,ASIA,AFRICA,EUROPE,",
      "location": "AS,AS,AS,AU,AU,",
    },
  },
  {
    "group": {
      "continent": "ASIA,",
    },
  },
  {
    "group": {
      "continent": "EUROPE,",
    },
  },
  {
    "group": {
      "continent": "ASIA,EUROPE,",
      "location": "AU,AU,"
    },
  },
];

const uniques = [];
response.forEach(({
  group
}) => {
  group.continent.split(",").forEach((l) => {
    if (uniques.indexOf(l) == -1 && l !== "") {
      uniques.push(l);
    }
  });
});

console.log("Uniques: " + uniques);
const continent = uniques.join(", ");
console.log(continent);

甚至更好：使用 Set() + Array.prototype.flatMap()

更好的方法就是利用 ES6 功能，例如 Set() ，它存储了唯一条目的列表。然后只需使用 Array.prototype.flatMap + Array.prototype.filter （删除空条目）并将扁平化的大陆数组传递到集合中即可： 

const continents = response.flatMap(({ group }) => group.continent.split(',')).filter(v => !!v);
const uniques = Array.from(new Set(continents));

参见以下示例： 

const response = [{
    "group": {
      "continent": "ASIA,EUROPE,ASIA,EUROPE,ASIA,ASIA,EUROPE,EUROPE,ASIA,AUSTRALASIA,AUSTRALASIA,EUROPE,",
      "location": "AS,AS,AS,AS,EU,AF,EU,AF,AU,AU,AU,AU,",
    },
  },
  {
    "group": {
      "continent": "ASIA,EUROPE,AFRICA,EUROPE,ASIA,AFRICA,EUROPE,",
      "location": "AS,AS,AS,AU,AU,",
    },
  },
  {
    "group": {
      "continent": "ASIA,",
    },
  },
  {
    "group": {
      "continent": "EUROPE,",
    },
  },
  {
    "group": {
      "continent": "ASIA,EUROPE,",
      "location": "AU,AU,"
    },
  },
];

const continents = response.flatMap(({ group }) => group.continent.split(',')).filter(v => !!v);
const uniques = Array.from(new Set(continents));


console.log("Uniques: " + uniques);
const continent = uniques.join(", ");
console.log(continent);
Terry
2022-10-06