How store a JSON in a QR code using Angular

Question

I'm generating QR codes from my Angular web app. I'm using the npm package ngx-qrcode2 to generate the QR code.

Is there a way with this npm package or another npm package to store a JSON object in the QR. Then read QR,and extract the JSON using the qr reader zxing/ngx-scanner.

Currently, I'm able to achieve this if I convert the JSON to a string, store that string in the QR and then when I read it, a parse it back to a JSON.

This is what I have done so far.

TO GENERATE THE QR CODE https://stackblitz.com/edit/angular-ja13vl

TO READ THE QR CODE https://stackblitz.com/edit/angular-qr-reader

"I'm able to achieve this if I convert the JSON to a string". Does that not solve your question? — molamk
– molamk, Commented Feb 17, 2019 at 7:42
@molamk yes, you are right my friend. I just felt it was a little hackie. This is my first time working with QRs and I didn't know If what I did was the correct or best way to do it — Patricio Vargas
– Patricio Vargas, Commented Feb 17, 2019 at 13:05

jo_va · Accepted Answer · 2019-02-17 09:03:08Z

5

You seem to have found the solution and it seems totally right I think.

Currently I'm able to achieve this if I convert the JSON to a string

As you say, if you want to store raw JSON in the QR code, you have to stringify it first using JSON.stringify(json). When reading the QR code, you have no choice but to parse the string to get the raw JSON back, using JSON.parse(str).

But, you could also compress the JSON and store a string representing this compressed JSON instead. This will allow you to store more information in the QR code.

You can use a library like jsonpack for this, which compresses up to 55% of the original size. You can use it like this:

const qrcode = jsonpack.pack(json);
const json = jsonpack.unpack(qrcode);

You can find more compression ideas for QR codes on this page.

edited Feb 17, 2019 at 9:03

answered Feb 17, 2019 at 8:39

jo_va

14.1k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patricio Vargas Over a year ago

Thanks so much for you answer. It was my first time working with QRs so I didn't know if what I did was correct. Very useful information know that I can even compress a JSON!!! that's awesome. Thanks so much

jo_va Over a year ago

@Patricio Vargas, I am happy it helped! Please consider marking the answer accepted if you think it is appropriate!

Collectives™ on Stack Overflow

How store a JSON in a QR code using Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related