Данные JSON содержат незашифрованные специальные символы, такие как & # 38,% 7D,% 7B - PullRequest
0 голосов
/ 02 ноября 2018

У меня проблема с некоторыми данными из JSON, и я не могу понять, что я делаю неправильно. 1) Когда я захожу на веб-страницу, например / details / 4, например, я использую следующий фрагмент кода:

 router.get('/details/:id', async function (req, res, next) {
 id = req.params.id;
 var lat,lng,identifier,dimensions,description,Title,Images = [];
 try {
 var  querySql = 'SELECT table1.uid,preview_description,table3.identifier,location_lat,location_lng,width,height, table1.title ' +
 'FROM table1 LEFT JOIN table2 ON table2.uid_foreign = table1.uid ' +
 'LEFT JOIN table3 ON table3.original = table2.uid_local WHERE table1.uid = ' + id + '';
  var result = await pool.query( querySql );
  Object.keys(result).forEach(function(key) {
    var row = result[key];
    lat = row.location_lat;
    lng = row.location_lng;
    dimensions = Math.min(row.width,row.height);
    identifier = IMGPath.concat(row.identifier);
    description = row.preview_description.substring(0,150) + "...";
    if(description.indexOf('\n') && description.indexOf('\n') > 10)     {description = description.substring(0,description.indexOf('\n')-1);}
    Title = row.title;
 });

  querySql =     'SELECT table3.identifier FROM table1 ' +
                 'LEFT JOIN table2 ON table2.uid_foreign = table1.uid ' +
                 'LEFT JOIN table3 ON table3.original = table2.uid_local ' +
                 'WHERE table1.uid = ' + id + ' ' +
                 'AND table3.task_type = "Image.CropScaleMask" ' +
                 'AND name IS NOT NULL; ';
  result = await pool.query( querySql );
  Object.keys(result).forEach(function(key) {
    var row = result[key];
    if (IMGPath.concat(row.identifier).endsWith(".png") ||      IMGPath.concat(row.identifier).endsWith(".jpg")){
    Images.push({"identifier":IMGPath.concat(row.identifier)});}
 });
    } catch(err) {
        console.log(err);
    }
 res.render('details.ejs',{ latitude:lat , longitude:lng , image:identifier , dimension:dimensions , desc:description , title:Title , image:JSON.stringify(Images) });
 });

Как я уже упоминал выше, я использую на стороне сервера NodeJS & ExpressJS, а для рендеринга и получения данных с сервера я использую axios с EJS в качестве шаблона и VueJS для рендеринга.

2) Итак, с этим методом .get все в порядке, кроме изображения. На веб-странице у меня есть следующий фрагмент кода:

   ....
   <div v-for="(resultImages,k) in resultsImages" :key="k" >
   <img v-bind:src="resultImages.identifier" style="width:250px;height:250px;padding:8px;" alt="IMAGE UNAVAILABLE" onerror='this.src="/public/noimage.png";' /><br>
   </div>
   ....
   const details = new Vue({
   el: '#detailsLOC',
   data: {
  resultsONE: [],
  resultsImages: [],
  GeoJsonONE: []
 },
 methods: {
    toMainPage() {
   }
   },
 mounted() {
   axios.all([
       axios.get('/dontmindthisURL')
     ]).then(axios.spread((response1) => {
    this.resultsONE = response1.data;
    this.resultsImages = <%- JSON.stringify(image) %> //this is the last method I've tried
    this.resultsImages = decodeURIComponent(this.resultsImage);
     })).catch( e => {
    console.log(e);
        });
   }
     });

Но когда я открываю страницу / details / ..., я получаю несколько изображений noimage.png, а в devtools (консоль) появляется ошибка 404:

 mywebsite/details/[%7B"identifier":"/path/9/2/img1.jpg"%7D,%7B"identifier":"/path/9/2/img2.jpg"%7D,%7B"identifier":"/path/9/2/img3.jpg"%7D,%7B"identifier":"/path/8/e/img4.jpg"%7D]

Дело в том, что я не понимаю, почему у меня все еще есть эти% 7D,% 7B вещи в данных. И я заметил, что могу избежать этой ошибки 404, если я удалю этот JSON.stringify () из res.send (фрагмент кода nodejs), но после этого я получаю сообщение об ошибке синтаксиса запроса:

   { Error: ER_PARSE_ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '[object Object],[object Object],[object Object],[object Object]' at line 1

Что мне делать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...