У меня проблема с некоторыми данными из 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
Что мне делать?