Can I make a change?

LelioFaieta
May 24, 2023
180 views
4 votes
5 Answers

I have a json that is like the following:

[
    {"id":1,"nome":"smartform","url":"smartform.php","label":"Dashboard","icon":"fas fa-th-large","data_attribute":"","parent":"Smartform"},
    {"id":2,"nome":"form_wizard","url":"form_wizard.php","label":"Crea uno Smartform","icon":"fas fa-plus","data_attribute":"data-action="create" data-step="0" data-token="0"","parent":"Smartform"},
    {"id":3,"nome":"fullcalendar","url":"fullcalendar.php","label":"Calendario","icon":"far fa-calendar","data_attribute":"","parent":"Tools"},
    {"id":4,"nome":"gantt","url":"gantt.php","label":"Gantt","icon":"fas fa-stream","data_attribute":"","parent":"Tools"},
    {"id":5,"nome":"timesheet","url":"timesheet.php","label":"Timesheet","icon":"fas fa-hourglass","data_attribute":"","parent":"Tools"},
    {"id":6,"nome":"kanban","url":"kanban.php","label":"Kanban","icon":"fas fa-list-ul","data_attribute":"","parent":"Tools"},
    {"id":7,"nome":"openpoints","url":"items.php?tipo=openpoints","label":"Open Points","icon":"fas fa-keyboard","data_attribute":"","parent":"Risk Management"},
    {"id":8,"nome":"risks","url":"items.php?tipo=risks","label":"Rischi","icon":"fas fa-exclamation","data_attribute":"","parent":"Risk Management"},
    {"id":9,"nome":"issues","url":"items.php?tipo=issues","label":"Issue","icon":"fas fa-fire","data_attribute":"","parent":"Risk Management"},
    {"id":10,"nome":"changerequests","url":"items.php?tipo=changerequests","label":"Change Requests","icon":"fas fa-plus","data_attribute":"","parent":"Risk Management"}
]

I currently parse it with JSON.parse and use it efficiently. What I’d like to do now is the following.
I have a variable whose value is "fullcalendar" (can be any of the "nome" in the json). I want to look for that in the array and return "fullcalendar.php" that is the value of another property of this object.

How do I do it? I am trying to understand if I can do it with filter but don’t see how to implement it. Any suggestion?

Tags: javascript json

Answers

Use .find method to return the object with fullcalendar value in it then print only the url property

const arr = [
    {"id":1,"nome":"smartform","url":"smartform.php","label":"Dashboard","icon":"fas fa-th-large","data_attribute":"","parent":"Smartform"},
    {"id":2,"nome":"form_wizard","url":"form_wizard.php","label":"Crea uno Smartform","icon":"fas fa-plus","data_attribute":"data-action="create" data-step="0" data-token="0"","parent":"Smartform"},
    {"id":3,"nome":"fullcalendar","url":"fullcalendar.php","label":"Calendario","icon":"far fa-calendar","data_attribute":"","parent":"Tools"},
    {"id":4,"nome":"gantt","url":"gantt.php","label":"Gantt","icon":"fas fa-stream","data_attribute":"","parent":"Tools"},
    {"id":5,"nome":"timesheet","url":"timesheet.php","label":"Timesheet","icon":"fas fa-hourglass","data_attribute":"","parent":"Tools"},
    {"id":6,"nome":"kanban","url":"kanban.php","label":"Kanban","icon":"fas fa-list-ul","data_attribute":"","parent":"Tools"},
    {"id":7,"nome":"openpoints","url":"items.php?tipo=openpoints","label":"Open Points","icon":"fas fa-keyboard","data_attribute":"","parent":"Risk Management"},
    {"id":8,"nome":"risks","url":"items.php?tipo=risks","label":"Rischi","icon":"fas fa-exclamation","data_attribute":"","parent":"Risk Management"},
    {"id":9,"nome":"issues","url":"items.php?tipo=issues","label":"Issue","icon":"fas fa-fire","data_attribute":"","parent":"Risk Management"},
    {"id":10,"nome":"changerequests","url":"items.php?tipo=changerequests","label":"Change Requests","icon":"fas fa-plus","data_attribute":"","parent":"Risk Management"}
];

const result = arr.find(x => x.nome == "fullcalendar")
console.log(result.url)

You need to use Array.prototype.find:

const items = [
    {"id":1,"nome":"smartform","url":"smartform.php","label":"Dashboard","icon":"fas fa-th-large","data_attribute":"","parent":"Smartform"},
    {"id":2,"nome":"form_wizard","url":"form_wizard.php","label":"Crea uno Smartform","icon":"fas fa-plus","data_attribute":"data-action="create" data-step="0" data-token="0"","parent":"Smartform"},
    {"id":3,"nome":"fullcalendar","url":"fullcalendar.php","label":"Calendario","icon":"far fa-calendar","data_attribute":"","parent":"Tools"},
    {"id":4,"nome":"gantt","url":"gantt.php","label":"Gantt","icon":"fas fa-stream","data_attribute":"","parent":"Tools"},
    {"id":5,"nome":"timesheet","url":"timesheet.php","label":"Timesheet","icon":"fas fa-hourglass","data_attribute":"","parent":"Tools"},
    {"id":6,"nome":"kanban","url":"kanban.php","label":"Kanban","icon":"fas fa-list-ul","data_attribute":"","parent":"Tools"},
    {"id":7,"nome":"openpoints","url":"items.php?tipo=openpoints","label":"Open Points","icon":"fas fa-keyboard","data_attribute":"","parent":"Risk Management"},
    {"id":8,"nome":"risks","url":"items.php?tipo=risks","label":"Rischi","icon":"fas fa-exclamation","data_attribute":"","parent":"Risk Management"},
    {"id":9,"nome":"issues","url":"items.php?tipo=issues","label":"Issue","icon":"fas fa-fire","data_attribute":"","parent":"Risk Management"},
    {"id":10,"nome":"changerequests","url":"items.php?tipo=changerequests","label":"Change Requests","icon":"fas fa-plus","data_attribute":"","parent":"Risk Management"}
];

function getUrl(nome) {
  return items.find(item => item.nome === nome)?.url;
}

// more flexible option
function getProperty(searchKey, searchValue, returnKey) {
  const item = items.find(item => item[searchKey] === searchValue);
  return item ? item[returnKey] : item;
}

console.log(getUrl('fullcalendar'));
console.log(getProperty('nome', 'fullcalendar', 'url'));

[
    {"id":1,"nome":"smartform","url":"smartform.php","label":"Dashboard","icon":"fas fa-th-large","data_attribute":"","parent":"Smartform"},
    {"id":2,"nome":"form_wizard","url":"form_wizard.php","label":"Crea uno Smartform","icon":"fas fa-plus","data_attribute":"data-action="create" data-step="0" data-token="0"","parent":"Smartform"},
    {"id":3,"nome":"fullcalendar","url":"fullcalendar.php","label":"Calendario","icon":"far fa-calendar","data_attribute":"","parent":"Tools"},
    {"id":4,"nome":"gantt","url":"gantt.php","label":"Gantt","icon":"fas fa-stream","data_attribute":"","parent":"Tools"},
    {"id":5,"nome":"timesheet","url":"timesheet.php","label":"Timesheet","icon":"fas fa-hourglass","data_attribute":"","parent":"Tools"},
    {"id":6,"nome":"kanban","url":"kanban.php","label":"Kanban","icon":"fas fa-list-ul","data_attribute":"","parent":"Tools"},
    {"id":7,"nome":"openpoints","url":"items.php?tipo=openpoints","label":"Open Points","icon":"fas fa-keyboard","data_attribute":"","parent":"Risk Management"},
    {"id":8,"nome":"risks","url":"items.php?tipo=risks","label":"Rischi","icon":"fas fa-exclamation","data_attribute":"","parent":"Risk Management"},
    {"id":9,"nome":"issues","url":"items.php?tipo=issues","label":"Issue","icon":"fas fa-fire","data_attribute":"","parent":"Risk Management"},
    {"id":10,"nome":"changerequests","url":"items.php?tipo=changerequests","label":"Change Requests","icon":"fas fa-plus","data_attribute":"","parent":"Risk Management"}
].filter(ele => ele.nome === "fullcalendar")[0].url

filter
you can get elements that fits your option you provided in filter() function. you can get more in this docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
[0]
If you want one item from it, you should get first item by index slicing. But you need to handle the case that filtered array’s length is 0. then [0] might be undefined.
.url
you can access to property by ..

- ArmanGharavi
- May 24, 2023 at 6:11 pm
- 0 votes
0
You can use the find() method instead of filter() to find the object with a specific value for the "nome" property in your JSON array. Here’s an example:
```
const jsonArray = [
    // Your JSON array here...
];

const searchTerm = "fullcalendar";
const foundObject = jsonArray.find(obj => obj.nome === searchTerm);

if (foundObject) {
    const url = foundObject.url;
    console.log(url); // "fullcalendar.php"
} else {
    console.log("Object not found in the array.");
}
```
In this example, the find() method is used to search for the first object in the jsonArray that has a "nome" property equal to the searchTerm. If a matching object is found, the value of its "url" property is returned. Otherwise, a message indicating that the object was not found is logged.

Using find() is a more efficient choice than filter() in this case because it stops searching as soon as the first matching object is found, rather than iterating over the entire array.
Login or Signup to reply.

While you could access an individual item using find (or filter), it requires iterating over the array each time. It sounds like you want arbitrary access to an item by a string key, which is essentially a map/dict. In this case, I would suggest converting from an array of items to a map of the same items keyed by the ‘nome’ value. Then you could access it directly, and more efficiently since random access to a key is constant time. This would work better assuming you are accessing different values at different time throughout the life of your page/application.

const items = [{
    "id": 1,
    "nome": "smartform",
    "url": "smartform.php",
    "label": "Dashboard",
    "icon": "fas fa-th-large",
    "data_attribute": "",
    "parent": "Smartform"
  },
  {
    "id": 2,
    "nome": "form_wizard",
    "url": "form_wizard.php",
    "label": "Crea uno Smartform",
    "icon": "fas fa-plus",
    "data_attribute": "data-action="create" data-step="0" data-token="0"",
    "parent": "Smartform"
  },
  {
    "id": 3,
    "nome": "fullcalendar",
    "url": "fullcalendar.php",
    "label": "Calendario",
    "icon": "far fa-calendar",
    "data_attribute": "",
    "parent": "Tools"
  },
  {
    "id": 4,
    "nome": "gantt",
    "url": "gantt.php",
    "label": "Gantt",
    "icon": "fas fa-stream",
    "data_attribute": "",
    "parent": "Tools"
  },
  {
    "id": 5,
    "nome": "timesheet",
    "url": "timesheet.php",
    "label": "Timesheet",
    "icon": "fas fa-hourglass",
    "data_attribute": "",
    "parent": "Tools"
  },
  {
    "id": 6,
    "nome": "kanban",
    "url": "kanban.php",
    "label": "Kanban",
    "icon": "fas fa-list-ul",
    "data_attribute": "",
    "parent": "Tools"
  },
  {
    "id": 7,
    "nome": "openpoints",
    "url": "items.php?tipo=openpoints",
    "label": "Open Points",
    "icon": "fas fa-keyboard",
    "data_attribute": "",
    "parent": "Risk Management"
  },
  {
    "id": 8,
    "nome": "risks",
    "url": "items.php?tipo=risks",
    "label": "Rischi",
    "icon": "fas fa-exclamation",
    "data_attribute": "",
    "parent": "Risk Management"
  },
  {
    "id": 9,
    "nome": "issues",
    "url": "items.php?tipo=issues",
    "label": "Issue",
    "icon": "fas fa-fire",
    "data_attribute": "",
    "parent": "Risk Management"
  },
  {
    "id": 10,
    "nome": "changerequests",
    "url": "items.php?tipo=changerequests",
    "label": "Change Requests",
    "icon": "fas fa-plus",
    "data_attribute": "",
    "parent": "Risk Management"
  }
]

const itemsMap = items.reduce((acc, item) => {
  // add it to the map if it has a nome
  if (item.hasOwnProperty('nome')) {
    acc[item.nome] = item;
  }
  return acc;
}, {})

console.log(itemsMap.fullcalendar ? .url)

https://playcode.io/1482928

Please signup or login to give your own answer.

Click here to cancel reply.