如何将json文件连接到nodejs进行排序
How to connect json file to nodejs for sorting
我之前 json 从未使用过 nodejs 和 ejs,所以请原谅我缺乏知识。我能够从 json 生成一个项目列表,但是当我按下下拉列表进行排序时,除了基于下面的 ejs 按 id 默认排序之外,它没有显示任何输出。我连接错了 json 吗?
节点
router.get('/product', (req,res) =>{
fs.readFile('items.json', function (error, data) {
if (error) {
res.status(500).end()
} else {
res.render('product.ejs', {
user: req.user,
stripePublicKey: stripePublicKey,
items: JSON.parse(data)
})
}
})
})
ejs
<select id="sortMed" onChange="getSelectValue()">
<option onClick="defaultSorting()">Default Sorting</option>
<option onClick="sortingbyPrice()">Sorting by price</option>
<option onClick="sortingbyAlphabet()">Sorting by alphabet</option>
</select>
<div class="row">
<div class="col-4">
<div class="shop-items" id="output">
<% items.medicine.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="../assets/img/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</div>
</div>
javascript
function sortingbyPrice(){
console.log("Sorting price")
const itemsJson = JSON.parse(data)
$.getJSON('items.json', function(data) {
return sorted = items.medicine.sort((medA, medB) => medA.price - medB.price);
});
}
items.json
{
"medicine": [
{
"id": 1,
"name": "Bioderma",
"price": 5000,
"imgName": "product_01.png"
},
{
"id": 2,
"name": "Chanca Piedra",
"price": 2300,
"imgName": "product_02.png"
},
{
"id": 3,
"name": "Umcka",
"price": 4000,
"imgName": "product_03.png"
},
{
"id": 4,
"name": "CetylPure",
"price": 8700,
"imgName": "product_04.png"
},
{
"id": 5,
"name": "CLACORE",
"price": 5600,
"imgName": "product_05.png"
},
{
"id": 6,
"name": "POO-POURRI",
"price": 6800,
"imgName": "product_06.png"
},
{
"id": 7,
"name": "Ibuprofen",
"price": 6800,
"imgName": "product_07.png"
}
]
}
我不太明白 运行 排序时 Json 的结构如何。
无论如何,我已经创建了这个 fiddle,因此您可以检查 json 数组中的正确排序,类似于我期望您在节点后端获得的结果:
https://jsfiddle.net/9gpzwhs0/
console.log("Sorting price")
const itemsJson = [{
medicine: {
price: 2
}
},
{
medicine: {
price: 1
}
}
]
console.log(itemsJson.sort((medA, medB) => medA.medicine.price
- medB.medicine.price));
在排序中,我看到你在做 intems.medicine.sort,而你应该做 items.sort,在排序函数中,return medA.medicine.price
你可以这样排序:
const mockJsonData = {
"medicine": [
{
"id": 1,
"name": "Bioderma",
"price": 5000,
"imgName": "product_01.png"
},
{
"id": 2,
"name": "Chanca Piedra",
"price": 2300,
"imgName": "product_02.png"
},
{
"id": 3,
"name": "Umcka",
"price": 4000,
"imgName": "product_03.png"
},
{
"id": 4,
"name": "CetylPure",
"price": 8700,
"imgName": "product_04.png"
},
{
"id": 5,
"name": "CLACORE",
"price": 5600,
"imgName": "product_05.png"
},
{
"id": 6,
"name": "POO-POURRI",
"price": 6800,
"imgName": "product_06.png"
},
{
"id": 7,
"name": "Ibuprofen",
"price": 6800,
"imgName": "product_07.png"
}
]
}
const sortByPrice = () => {
mockJsonData.medicine.sort((a, b) => a.price - b.price);
}
sortByPrice();
console.log(mockJsonData.medicine);
现在,您已经获得排序的药物列表,使用更新后的值重新渲染 ejs 模板。
res.render('product.ejs', {
user: req.user,
stripePublicKey: stripePublicKey,
items: sortingbyPrice(data) // data from reading JSON file
});
// you sorting function be like
function sortingbyPrice(data){
return itemsJson.medicine.sort((a, b) => a.price - b.price);
}
此外,您可以查看 。
我之前 json 从未使用过 nodejs 和 ejs,所以请原谅我缺乏知识。我能够从 json 生成一个项目列表,但是当我按下下拉列表进行排序时,除了基于下面的 ejs 按 id 默认排序之外,它没有显示任何输出。我连接错了 json 吗?
节点
router.get('/product', (req,res) =>{
fs.readFile('items.json', function (error, data) {
if (error) {
res.status(500).end()
} else {
res.render('product.ejs', {
user: req.user,
stripePublicKey: stripePublicKey,
items: JSON.parse(data)
})
}
})
})
ejs
<select id="sortMed" onChange="getSelectValue()">
<option onClick="defaultSorting()">Default Sorting</option>
<option onClick="sortingbyPrice()">Sorting by price</option>
<option onClick="sortingbyAlphabet()">Sorting by alphabet</option>
</select>
<div class="row">
<div class="col-4">
<div class="shop-items" id="output">
<% items.medicine.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="../assets/img/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</div>
</div>
javascript
function sortingbyPrice(){
console.log("Sorting price")
const itemsJson = JSON.parse(data)
$.getJSON('items.json', function(data) {
return sorted = items.medicine.sort((medA, medB) => medA.price - medB.price);
});
}
items.json
{
"medicine": [
{
"id": 1,
"name": "Bioderma",
"price": 5000,
"imgName": "product_01.png"
},
{
"id": 2,
"name": "Chanca Piedra",
"price": 2300,
"imgName": "product_02.png"
},
{
"id": 3,
"name": "Umcka",
"price": 4000,
"imgName": "product_03.png"
},
{
"id": 4,
"name": "CetylPure",
"price": 8700,
"imgName": "product_04.png"
},
{
"id": 5,
"name": "CLACORE",
"price": 5600,
"imgName": "product_05.png"
},
{
"id": 6,
"name": "POO-POURRI",
"price": 6800,
"imgName": "product_06.png"
},
{
"id": 7,
"name": "Ibuprofen",
"price": 6800,
"imgName": "product_07.png"
}
]
}
我不太明白 运行 排序时 Json 的结构如何。
无论如何,我已经创建了这个 fiddle,因此您可以检查 json 数组中的正确排序,类似于我期望您在节点后端获得的结果:
https://jsfiddle.net/9gpzwhs0/
console.log("Sorting price")
const itemsJson = [{
medicine: {
price: 2
}
},
{
medicine: {
price: 1
}
}
]
console.log(itemsJson.sort((medA, medB) => medA.medicine.price
- medB.medicine.price));
在排序中,我看到你在做 intems.medicine.sort,而你应该做 items.sort,在排序函数中,return medA.medicine.price
你可以这样排序:
const mockJsonData = {
"medicine": [
{
"id": 1,
"name": "Bioderma",
"price": 5000,
"imgName": "product_01.png"
},
{
"id": 2,
"name": "Chanca Piedra",
"price": 2300,
"imgName": "product_02.png"
},
{
"id": 3,
"name": "Umcka",
"price": 4000,
"imgName": "product_03.png"
},
{
"id": 4,
"name": "CetylPure",
"price": 8700,
"imgName": "product_04.png"
},
{
"id": 5,
"name": "CLACORE",
"price": 5600,
"imgName": "product_05.png"
},
{
"id": 6,
"name": "POO-POURRI",
"price": 6800,
"imgName": "product_06.png"
},
{
"id": 7,
"name": "Ibuprofen",
"price": 6800,
"imgName": "product_07.png"
}
]
}
const sortByPrice = () => {
mockJsonData.medicine.sort((a, b) => a.price - b.price);
}
sortByPrice();
console.log(mockJsonData.medicine);
现在,您已经获得排序的药物列表,使用更新后的值重新渲染 ejs 模板。
res.render('product.ejs', {
user: req.user,
stripePublicKey: stripePublicKey,
items: sortingbyPrice(data) // data from reading JSON file
});
// you sorting function be like
function sortingbyPrice(data){
return itemsJson.medicine.sort((a, b) => a.price - b.price);
}
此外,您可以查看