通过2级深的键值查找对象

Question

https://jsfiddle.net/y1tq9563/29/

In the below you can click on shop-all and 23 will be returned because 23 is the ID in the same obj as the the query, shop-all ... BUT when the query is in a child node like blade-servers — id: 26 should return but it doesnt because .find is not looking in the children node.

How do i rewrite

data.find( t => t.url.includes(query).id

so that it will also look in the children node of each?

 const data = [ { "id": 23, "name": "Shop All", "url": "/shop-all/", "children": [] }, { "id": 18, "name": "Servers", "url": "/Servers/", "children": [ { "id": 26, "name": "Blade Servers", "url": "/servers/blade-servers/" }, { "id": 24, "name": "Rack Servers", "url": "/servers/rack-servers/" }, { "id": 25, "name": "Tower Servers", "url": "/servers/tower-servers/" }, { "id": 27, "name": "Workstations", "url": "/servers/workstations/" } ] } ]; $('.btn').click(e=> getID($(e.target).html()) ); function getID(query){ /* reset */ $('.results').html(''); $('.err').html(''); /* search for "query" */ try { const result = data.find( t => t.url.includes(query) ).id; // whats wrong here? $('.results').html(`<div class="res-c">${result}</div>`); } catch(er) { $('.err').html(`<div class="err-c">${er}</div>`) } } 

 body { background: #20262e; color: #fff; font-family: monospace; font-size: 25px; } .res-c { color: #6CE891; padding: 0.5em; margin: 0.5em; border: 2px solid #6CE891; border-radius: 5px; } .err-c { color: #ff4f68; padding: 0.5em; margin: 0.5em; border: 2px solid #ff4f68; border-radius: 5px; } .buttons{ margin: 0.5em; margin-bottom: 1em; } .btn { font-size: 20px; border: 2px solid #fff; border-radius: 5px; padding: 0.5em; } .btn:hover { background: #fff; color: #20262e; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="btn">shop-all</a> <a class="btn">blade-servers</a> </div> <div class="results"></div> <div class="err"></div> 

Maybe I need to map .children:[i] to the parent level?

Answer 1

To find the child ID or the parent ID, you might use reduce to check the parent's ID and then .find a matching child, if any. A plain .find alone won't be enough here:

const result = data.reduce((a, { url, children, id }) => {
  if (a) return a;
  if (url.includes(query)) return id;
  const foundChild = children.find(({ url }) => url.includes(query));
  if (foundChild) return foundChild.id;
}, null);

If you add more levels later, better to use a recursive function instead.

 const data = [ { "id": 23, "name": "Shop All", "url": "/shop-all/", "children": [] }, { "id": 18, "name": "Servers", "url": "/Servers/", "children": [ { "id": 26, "name": "Blade Servers", "url": "/servers/blade-servers/" }, { "id": 24, "name": "Rack Servers", "url": "/servers/rack-servers/" }, { "id": 25, "name": "Tower Servers", "url": "/servers/tower-servers/" }, { "id": 27, "name": "Workstations", "url": "/servers/workstations/" } ] } ]; $('.btn').click(e=> getID($(e.target).html()) ); function getID(query){ /* reset */ $('.results').html(''); $('.err').html(''); /* search for "query" */ try { const result = data.reduce((a, { url, children, id }) => { if (a) return a; if (url.includes(query)) return id; const foundChild = children.find(({ url }) => url.includes(query)); if (foundChild) return foundChild.id; }, null) $('.results').html(`<div class="res-c">${result}</div>`); } catch(er) { $('.err').html(`<div class="err-c">${er}</div>`) } } 

 body { background: #20262e; color: #fff; font-family: monospace; font-size: 25px; } .res-c { color: #6CE891; padding: 0.5em; margin: 0.5em; border: 2px solid #6CE891; border-radius: 5px; } .err-c { color: #ff4f68; padding: 0.5em; margin: 0.5em; border: 2px solid #ff4f68; border-radius: 5px; } .buttons{ margin: 0.5em; margin-bottom: 1em; } .btn { font-size: 20px; border: 2px solid #fff; border-radius: 5px; padding: 0.5em; } .btn:hover { background: #fff; color: #20262e; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="btn">shop-all</a> <a class="btn">blade-servers</a> </div> <div class="results"></div> <div class="err"></div>