<html>
<head>
<title>How to remove duplicate value from ArrayList in JavaScript</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1">
<div id="app">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>role</th>
</tr>
</thead>
<tbody>
<tr v-for="NewData in RemoveDuplicate_New">
<td>{{NewData.id }}</td>
<td>{{NewData.Name }}</td>
<td>{{NewData.role }}</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
RemoveDuplicate_New: []
},
created: function () {
var yourData = [
{ "id": "1", "Name": "Rjboy", "role": "Admin" },
{ "id": "2", "Name": "Peter", "role": "Vice-Admin" },
{ "id": "3", "Name": "John", "role": "Admin" },
{ "id": "4", "Name": "Amit", "role": "Member" },
{ "id": "1", "Name": "Rjboy", "role": "Admin" },
{ "id": "3", "Name": "Peter", "role": "Vice-Admin" },
{ "id": "6", "Name": "Mahi", "role": "Admin" }
];
this.RemoveDuplicate_New = this.removeduplicate(yourData);
},
methods: {
removeduplicate: function (data) {
var fullData = [];
var shortData = [];
$(data).each(function (i) {
if (shortData.indexOf($(this)[0].id) === -1) {
shortData.push($(this)[0].id);
fullData.push($(this)[0]);
}
});
return fullData;
}
}
})
</script>
</html>