An Alternative to Data Attribute in Jquery

1859 views javascript
5

i have a webpage where user can select one of different packages to buy from a list. Package details are coming from a database.

HTML Code

<div data-package='2346343' class="retail-package">Cost : 10$</div> 
<div data-package='5465654' class="retail-package">Cost : 20$</div> 
<div data-package='3455675' class="retail-package">Cost : 30$</div> 

Jquery Code

$('.retail-package').on('click', function() {
   $(this).addClass("selected-package");
   var selectedPackage = $(this).data("package");
});

Now above code shows how we(specially i) normally select a particular thing out of a list when clicked, In this procedure, as you can see in HTML Code, i am giving out or showing the pakcageId to users i.e. anyone can do a inspect element in a browser and view or even manipulate the data-package attribute, for safety i do a server side check of selected data.

My Question

Is there a way to hide this data exposure, or is there any other cleaner way to accomplish this, because i have seen people using Angular, Webpack etc able to implement a list selection without giving out or showing any data which can be seen by inspect element feature in a browser.

Note : i am sorry if my question is too basic, if this cannot done using jquery what are other technologies which i can use ?

answered question

You can store pakcageId in javascript array and in onclick get it. However user can see it but not easily.

When a client should send an id to the server, there is no way to do it without the risk (or certainess) that an user can manipulate data. You can hide some infos in js incapsulated variables, or in a custom DOM object proprerty, but the client always can knows the value if he wants. By other hand, he can always send data to server totally bypassing the UI

@LucaRainone .... yes i understand that there is some or the other way a client can find the data but i just wanted to make it hard and my aim of the question was to know the best practice or the technology.

1 Answer

10

You may create a Map where keys are arbitrary, auto-incremented identifiers, and values are package numbers:

const idPackageMap = new Map()

// id generator: whenever you call it, "i" is incremented and returned
const id = (() => {
  let i = 0

  return () => ++i
})()

const addPackage = package =>
  idPackageMap.set(id(), package)

addPackage(2346343)
addPackage(5465654)
addPackage(3455675)

console.log('contents: ', [...idPackageMap.entries()])
console.log('package number for id 2: ', idPackageMap.get(2))

Now, when you insert those <div> elements you may set the arbitrary identifier, and when you need to locate the actual package number is just about using Map#get: idPackageMap.get(1) (change 1 with any arbitrary identifier).

posted this

Have an answer?

JD

Please login first before posting an answer.