我有一個像這樣的外部 JSON 檔案：
{"colors":[{
"color": "red",
"value": "#f00"
},
{
"color": "green",
"value": "#0f0"
},
{
"color": "blue",
"value": "#00f"
}]}
我想過濾資料以獲得給出值的名稱。這是我的代碼：
$.ajax({
url: "./data.json",
dataType: "json",
type: "get",
cache: false,
success: function (json){
$(json.colors).each(function(i,data){
let key="value";
let value="#00f";
let result= data.filter(d=>d[key]==value);
console.log(result)
});
}
})
觀察它不起作用。我該如何解決這個問題？提前感謝誰會幫助我。
顯示代碼片段
const json = `{"colors":[{
"color": "red",
"value": "#f00"
},
{
"color": "green",
"value": "#0f0"
},
{
"color": "blue",
"value": "#00f"
}]}`;
function fakeAjax(options) {
setTimeout(() => {
options.success(JSON.parse(json));
}, 800);
}
fakeAjax({
url: "./data.json",
dataType: "json",
type: "get",
cache: false,
success: function (json){
$(json.colors).each(function(i,data){
let key="value";
let value="#00f";
let result= data.filter(d=>d[key]==value);
console.log(result)
});
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>uj5u.com熱心網友回復：
問題在于，在您的each回呼中，data是一個物件（來自 的每個物件colors），但您正試圖將其視為一個陣列。
您似乎想用 找到顏色value === "#00f"。如果是這樣，你不需要那么多層的回圈，你已經進入物件獲取colors陣列，直接使用filter它：
success: function (obj){ // chnaged name, it's not JSON
const key = "value";
const value = "#00f";
const result = obj.colors.filter(color => color[key] === value);
console.log(result);
}
更新片段：
顯示代碼片段
const json = `{"colors":[{
"color": "red",
"value": "#f00"
},
{
"color": "green",
"value": "#0f0"
},
{
"color": "blue",
"value": "#00f"
}]}`;
function fakeAjax(options) {
setTimeout(() => {
options.success(JSON.parse(json));
}, 100);
}
fakeAjax({
url: "./data.json",
dataType: "json",
type: "get",
cache: false,
success: function (obj){ // chnaged name, it's not JSON
let key="value";
let value="#00f";
const result = obj.colors.filter(color => color[key] === value);
console.log(result);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>或者，如果您只想要第一個顏色物件，而不是所有匹配的顏色物件，您可以使用find：
success: function (obj){ // chnaged name, it's not JSON
const key = "value";
const value = "#00f";
const result = obj.colors.find(color => color[key] === value);
console.log(result);
}
更新片段：
顯示代碼片段
const json = `{"colors":[{
"color": "red",
"value": "#f00"
},
{
"color": "green",
"value": "#0f0"
},
{
"color": "blue",
"value": "#00f"
}]}`;
function fakeAjax(options) {
setTimeout(() => {
options.success(JSON.parse(json));
}, 100);
}
fakeAjax({
url: "./data.json",
dataType: "json",
type: "get",
cache: false,
success: function (obj){ // chnaged name, it's not JSON
let key="value";
let value="#00f";
const result = obj.colors.find(color => color[key] === value);
console.log(result);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>uj5u.com熱心網友回復：
作為data一個物件，.filter方法將不起作用，因為它僅適用于陣列。
jQuery 中的作業演示：
// This is what you're receiving in your `success` callback
const json = {
colors: [{
color: "red",
value: "#f00"
},{
color: "green",
value: "#0f0"
},{
color: "blue",
value: "#00f"
}]
};
let key = "value";
let value = "#00f";
const result = $.makeArray(json.colors).filter((data) => data[key] === value);
console.log(result);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>uj5u.com熱心網友回復：
如果您從 ajax 獲取資料，請檢查以下代碼以過濾資料。
$.ajax({
url: "./data.json",
dataType: "json",
type: "get",
cache: false,
success: function (json){
$(json.colors).each(function(i,data){
let key="value";
let value="#00f";
let result = data.filter(function (elem) {return elem[key] === value})[0];
console.log(result)
});
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/434345.html
標籤：javascript jQuery 数组