To view object array particular value in another page?

Question

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.

diegod · Answer

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(`
      ${value.name}
      ${value.mail}
      ${value.phone}
      
        
          
        
      
    `)
  });
});

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

To view object array particular value in another page?

1 Answers