This is my exercise image

I am looking for click the eye image to show the particular div array data only.

Please give me a solution using jQuery or javascript to filter the array of objects. I don't have any idea how to do this.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div  id="R1"></div>
<script>
$('documnet').ready(function(){
    var user={data:[
        {'id':1,'name':'Michael', 'mail':'abcd.gmail.com', 'phone':'11101989','image':'im/img1.png'},
        {'id':2,'name':'Mila', 'mail':'abcd.gmail.com', 'phone':'1011989','image':'im/img1.png'},
        {'id':3,'name':'Paul', 'mail':'abcd.gmail.com', 'phone':'10141990','image':'im/img1.png'},
        {'id':4,'name':'Dennis', 'mail':'abcd.gmail.com', 'phone':'11291993','image':'im/img1.png'},
        {'id':5,'name':'Tim', 'mail':'abcd.gmail.com', 'phone':'3121991','image':'im/img1.png'},
        {'id':6,'name':'Erik', 'mail':'abcd.gmail.com', 'phone':'10311995','image':'im/img1.png'}
        ],
    }
    $.each(user.data,function(key,value){
        $('#R1').append(`
            <div class=col-md-3><div >${value.name}</div></div>
            <div class=col-md-3><div >${value.mail}</div></div>
            <div class=col-md-3><div >${value.phone}</div></div>
            <div class=col-md-3><div  onclick=view()>
            <img style="width:20px"  src='${value.image}'></img></div></div>
            `)
    });
});
function view(){
    alert('hai');
}
</script>

CodePudding user response：

It's not perfectly clear what you are trying to achieve and you already asked the same question here: Filter the array jQuery

By the way, in case you meant to determine which is the item in the users array corresponding to the clicked row in the table, I'm sharing a demo using a solution to get there somehow.

The point is having the click event handler determine which is the clicked row (by doing window.event.currentTarget) and fetching the id corresponding to the user shown on that row.

Such id was included in the row when you are crafting the table using a data attribute that will be retrieved using el.dataset['id'] and that's enough to intercept the corresponding item in the original array by using .filter().

This is the demo:

var user = {
  data: [
    {
      'id': 1,
      'name': 'Michael',
      'mail': 'abcd.gmail.com',
      'phone': '11101989',
      'image': 'im/img1.png'
    },
    {
      'id': 2,
      'name': 'Mila',
      'mail': 'abcd.gmail.com',
      'phone': '1011989',
      'image': 'im/img1.png'
    },
    {
      'id': 3,
      'name': 'Paul',
      'mail': 'abcd.gmail.com',
      'phone': '10141990',
      'image': 'im/img1.png'
    },
    {
      'id': 4,
      'name': 'Dennis',
      'mail': 'abcd.gmail.com',
      'phone': '11291993',
      'image': 'im/img1.png'
    },
    {
      'id': 5,
      'name': 'Tim',
      'mail': 'abcd.gmail.com',
      'phone': '3121991',
      'image': 'im/img1.png'
    },
    {
      'id': 6,
      'name': 'Erik',
      'mail': 'abcd.gmail.com',
      'phone': '10311995',
      'image': 'im/img1.png'
    }
  ],
}

$('document').ready(function() {
  
  $.each(user.data, function(key, value) {
    $('#R1').append(`
      <div class=col-md-3><div >${value.name}</div></div>
      <div class=col-md-3><div >${value.mail}</div></div>
      <div class=col-md-3><div >${value.phone}</div></div>
      <div class=col-md-3>
        <div  onclick="view()">
          <img style="width:20px" data-id="${value.id}" src='${value.image}' />
        </div>
      </div>
    `)
  });
});

function view() {
  const el = window.event.currentTarget;
  const view = el.querySelector('[data-id]');      
  const id = view.dataset['id'];
  const clickedUser = user.data.filter( (item) => item.id == id );
  console.log(clickedUser);
}

div.card{
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="R1"></div>