javascript - 通过 2 层深的键值查找对象

Question

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

在下面，您可以点击shop-all，23 将被返回，因为 23 是与查询相同的 obj 中的 ID，shop -all... 但是当查询位于 blade-servers 之类的子节点中时 - id: 26 应该返回但不会返回，因为 .find 不是查看 children 节点。

我该如何重写

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

这样它也会查看每个节点的 children 节点？

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

要查找子 ID 或父 ID，您可以使用 reduce 检查父 ID，然后使用 .find 一个匹配的 child ，如果有的话。一个简单的 .find 在这里是不够的:

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);

如果以后添加更多级别，最好改用递归函数。

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>