Error on converting Json data to QR code using JS library

Question

I'm trying to convert JSON data into a QR code, so when a user scans it, the JSON data should be displayed. I've been using the jquery.qrcode.min.js library for this. Here's an example of the JSON data format:

{"id":"4444455551223","tableid":"2222221111111444","areacode":"A0010","catid":"QWAAD"}

p.s id,tableid,areacode,catid these are fetched dynamically from url parameter

e.g www.demo.com?id=4444455551223&tableid=2222221111111444&areacode=A0010&catid=QWAAD

However, the issue I'm facing is that when I scan the generated QR code with a mobile device, it only shows "4444455551223" as the result, rather than displaying the entire JSON data. Any ideas on how to solve this?

Code used to generate QR code.

          jQuery('#output').qrcode( {  


            const queryString = window.location.search;
      
            const urlParams = new URLSearchParams(queryString);

            const id = urlParams.get('id').toString();

            const  tableid = urlParams.get('tableid').toString();

            const  areacode = urlParams.get('areacode').toString();

            const  catid = urlParams.get('catid').toString();

            var myJSON ={"id":"'+id+'","tableid":"'+tableid+'","areacode":"'+areacode+'","catid":"'+catid+"}';


            // render method: 'canvas', 'image' or 'div'
            //render: 'canvas',

            // version range somewhere in 1 .. 40
            minVersion: 1,
            maxVersion: 40,

            // error correction level: 'L', 'M', 'Q' or 'H'
            ecLevel: 'Q',

            // offset in pixel if drawn onto existing canvas
            left: 0,
            top: 0,

            // size in pixel
            size: 500,

            // code color or image element
            fill: '#000',


            // corner radius relative to module width: 0.0 .. 0.5
            radius: 0,

            // quiet zone in modules
            quiet: 0,
           text: myJSON
 
        } );

        });

Answer 1

I don't know how you got your code to give you even one value in the QR code. Your code as is, was not runnable at all for me.

There were two major problems:

1. Your const and var definitions need to be moved out of the .qrcode() function body.
2. Setting your myJSON was all wrong. You did not end up with any of your data in it.

Here is the edited code that worked for me:

// NOTE Your const a var definitions need to be moved out of the .qrcode() function body

const queryString = window.location.search;

const urlParams = new URLSearchParams(queryString);

// NOTE You do not need the .toString(), the paramaters are already strings
const id = urlParams.get('id').toString();

const  tableid = urlParams.get('tableid').toString();

const  areacode = urlParams.get('areacode').toString();

const  catid = urlParams.get('catid').toString();


// NOTE This line has a misplace ' at the end
// NOTE Even then it does not give you anything useful
//   var myJSON={"id":"'+id+'","tableid":"'+tableid+'","areacode":"'+areacode+'","catid":"'+catid+"}';
var myJSON = JSON.stringify( {id, tableid, areacode, catid} )

jQuery('#output').qrcode( {
  // version range somewhere in 1 .. 40
  minVersion: 1,
  maxVersion: 40,

  // error correction level: 'L', 'M', 'Q' or 'H'
  ecLevel: 'Q',

  // offset in pixel if drawn onto existing canvas
  left: 0,
  top: 0,

  // size in pixel
  size: 500,

  // code color or image element
  fill: '#000',

  // corner radius relative to module width: 0.0 .. 0.5
  radius: 0,

  // quiet zone in modules
  quiet: 0,
  text: myJSON

} );

// NOTE This is an extraneous line
// });