vue удалить дубликаты циклов в таблице

Question

Оригинал

данные «Сая Мемилики» json yang duplikat .. bagaimana удалить данные duplikat berdasarkan id_cms_users данные Дана Менампилкана таблица tersebut ke

Сая Коба Кара https://codepen.io/roverv/pen/YQvdya Тапи Ханьяuntuk satu colums untuk di tampilkan

Переведено

У меня есть дублированные данные json ... как удалить дубликаты данных на основе id_cms_users и отобразить данные в таблице

Я попробовал метод на https://codepen.io/roverv/pen/YQvdya, но только для одного столбца для отображения

<tr  v-for="coba in ayam ">
  <td>{{ coba.id_cms_users }}</td>
  <td>{{ coba.cms_users_name }}</td>
  <td>{{ coba.berminat }}</td>
</tr>

var app = new Vue({
  el: "#app",
  data: function () {
    return {
      ayam: [{
            id: 62,
            id_cms_users: 7,
            cms_users_name: "Imam Prasetyo",
            berminat: 1
        },
        {
            id: 61,
            id_cms_users: 7,
            cms_users_name: "Imam Prasetyo",
            berminat: 1
        },

        {
            id: 56,
            id_cms_users: 20,
            cms_users_name: "Nanda Rusfikri",
            berminat: 2
        }
        ]
    };
  },

});

Answer 1

Используйте метод Array#filter с вычисляемым свойством:

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      ayam: [{
          id: 62,
          id_cms_users: 7,
          cms_users_name: "Imam Prasetyo",
          berminat: 1
        },
        {
          id: 61,
          id_cms_users: 7,
          cms_users_name: "Imam Prasetyo",
          berminat: 1
        },

        {
          id: 56,
          id_cms_users: 20,
          cms_users_name: "Nanda Rusfikri",
          berminat: 2
        }
      ]
    };
  },

  computed: {
    uniqueAyam: function () {
      var existingIds = {};
      return this.ayam.filter(function (user) {
        if (existingIds[user.id_cms_users]) return false;
        return existingIds[user.id_cms_users] = true;
      })
    }
  }
});

body{background:linear-gradient(135deg,#42e695 0,#3bb2b8 100%);font-family:futura,helvetica;background-repeat:no-repeat;height:100vh;display:flex;justify-content:center;padding:2px}table{background:#FAFAFA;padding:20px;border-radius:5px;box-shadow:0 20px 50px -10px rgba(0,0,0,.2)}tr{padding:5px;box-shadow:0 1px 0 #d3d3d3;height:2rem}h1{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.2)}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">

  <h1>Users</h1>
  <table>
  
    <!-- Change `ayam` to `uniqueAyam` -->
    
    <tr v-for="coba in uniqueAyam">
      <td>{{ coba.id_cms_users }}</td>
      <td>{{ coba.cms_users_name }}</td>
      <td>{{ coba.berminat }}</td>
    </tr>
    
  </table>


</div>

Answer 2

Используйте уменьшение, чтобы добавить элемент к результатам, если его там еще нет, просто верните результаты.

const data = [
  {
    id: 62,
    id_cms_users: 7,
    cms_users_name: 'Imam Prasetyo',
    berminat: 1
  },
  {
    id: 61,
    id_cms_users: 7,
    cms_users_name: 'Imam Prasetyo',
    berminat: 1
  },

  {
    id: 56,
    id_cms_users: 20,
    cms_users_name: 'Nanda Rusfikri',
    berminat: 2
  }
];

const uniqueUser = array =>
  array.reduce(
    (results, item) => (results.find(i => i.id_cms_users === item.id_cms_users) ? results : [...results, item]),
    []
  );

console.log(uniqueUser(data));