Question 174943 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I make a change?

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:

5

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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'));
    Login or Signup to reply.
  3. 0 
    [
    {"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

    1. 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

    2. [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.

    3. .url
      you can access to property by ..

    Login or Signup to reply.
  4. 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.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search