Tengo un archivo JSON externo como este:
{"colors":[{ "color": "red", "value": "#f00" }, { "color": "green", "value": "#0f0" }, { "color": "blue", "value": "#00f" }]}Quiero filtrar datos para obtener el nombre que da el valor. Este es mi código:
$.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) }); } })Obvio no funciona. ¿Cómo puedo resolver esto? Gracias de antemano a quien me ayude.
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>Como data son un objeto, el método .filter no funcionará, ya que solo funciona con matrices.
Demostración de trabajo en 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>El problema es que en each devolución de llamada, data son un objeto (cada uno de los objetos de colors ), pero está tratando de tratarlo como una matriz.
Parece que quiere encontrar el color con value === "#00f" . Si es así, no necesita tantas capas de bucles, ya ingresó al objeto para obtener la matriz de colors , solo use el filter directamente:
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); }Fragmento actualizado:
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> O si quisiera solo el primer objeto de color, no todos los objetos de color coincidentes, usaría 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); }Fragmento actualizado:
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>