Ошибка при преобразовании данных Json в QR-код с использованием библиотеки JS

Я пытаюсь преобразовать данные JSON в QR-код, поэтому, когда пользователь сканирует его, должны отображаться данные JSON. Для этого я использовал библиотеку jquery.qrcode.min.js. Вот пример формата данных JSON:

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

p.s id,tableid,areacode,catid они извлекаются динамически из параметра URL

например www.demo.com?id=4444455551223&tableid=2222221111111444&areacode=A0010&catid=QWAAD

Однако проблема, с которой я столкнулся, заключается в том, что когда я сканирую сгенерированный QR-код с помощью мобильного устройства, в результате отображается только «4444455551223», а не все данные JSON. Есть идеи, как это решить?

Код, используемый для создания QR-кода.

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

        });

Пожалуйста, покажите нам свой код, чтобы мы могли попытаться вам помочь. Невозможно увидеть, что ваш код делает неправильно, если вы не покажете нам свой код.

Ray Wallace 27.05.2024 15:50

@RayWallace Я обновил код

user25271508 27.05.2024 16:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаю, как вы получили свой код, чтобы дать вам хотя бы одно значение в QR-коде. Ваш код в том виде, в котором он есть, для меня вообще не работал.

Было две основные проблемы:

  1. Определения const и var необходимо удалить из тела функции .qrcode().
  2. Установка myJSON была неправильной. В конечном итоге вы не сохранили в нем никаких своих данных.

Вот отредактированный код, который сработал у меня:

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

Согласно вашему предложению, я попробовал со своей стороны, но проблема все равно существует. Мобильное устройство считывает номер телефона вместо данных JSON.

user25271508 28.05.2024 03:49

Очень странно. Идеально сработало для меня. ... Можете ли вы опубликовать полученное изображение QR-кода?

Ray Wallace 28.05.2024 04:03

Когда я запустил свою версию кода, она отобразила этот QR-код: ibb.co/YysZCxX ... Когда я сканирую его, я получаю такой результат: {"id":"4444455551223","tableid":"2222221111111444 ","areacode‌​":"A0010","catid":"Q‌​WAAD"}

Ray Wallace 28.05.2024 04:08

Когда я ставлю большое число, например 4444455551223, оно работает. В качестве идентификатора я использовал 8-значный номер. Пожалуйста, можете ли вы также проверить 8 цифр на своей стороне.

user25271508 28.05.2024 04:21

Я только что удалил 4444 из начала идентификатора, и он тоже работает. Я не вижу в коде ничего, на что бы повлияла длина чисел. Чтобы внести ясность, я использовал: .... www.demo.com/?id=55551223&tableid=2222221111111444&areacode=‌​A0010&catid=QWAAD

Ray Wallace 28.05.2024 04:31

Мое устройство IOS. Когда я сканировал на телефоне Android своих друзей, он работал. Так что я думаю, что-то связанное с IOS

user25271508 28.05.2024 05:00

Другие вопросы по теме