个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个数据问题，我发现在如何搜索(或什至标题这个问题)方面有困难。我没有机会大量接触 JS 的数据相关任务，我想学习最好的方法。如果您能解释一下您在回答中使用的方法，我将不胜感激。
我们有一个 RESTful 服务，它返回一个非常通用的数据结构，允许它根据用例而有所不同。用户可以从中选择过滤器(下拉菜单)以返回整个数据集中的结果子集。当用户从数据结构的中间选择一个过滤器时，它应该返回所有关联的父属性，以及 items 属性的直接子属性(供下一级过滤选择)。
目前，我所做的只是创建一个辅助函数来迭代传递的数据，即数据的当前级别。如果该值存在于该级别，则将其推送到列表(并通过再次调用该方法继续迭代，直到没有更多子项为止)。问题是这创建了一个平面结构，我失去了与其 parent 的所有联系，它返回每个对象中的所有 child 。 Here is a CodePen 从那。如果我试图欺骗 parent 并以某种方式过滤 child ，我觉得这种方法会引出一个兔子洞。
const data = {
level : 'Level 1',
items : [
{
name : 'Some Business Name',
id : '123',
data : null,
child : {
level : 'Level 2',
items : [
{
name : 'Some Sub-Business Name',
id : '1234',
data : null,
child : {
level : 'Level 3',
items : [
{
name : 'Some Area Name',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
},
{
name : 'Some Product Name 2',
id : '12345678',
data : [9, 5, 35, 5764, 335],
child : null
}
]
}
},
{
name : 'Some Local Name 2',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 3',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
},
{
name : 'Some Product Name 4',
id : '12345678',
data : [9, 5, 35, 5764, 335],
child : null
}
]
}
}
]
}
},
{
name : 'Some Area Name 2',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name 3',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 5',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
}
]
}
}
]
}
}
]
}
}
]
}
},
{
name : 'Some Business Name 2',
id : '123',
data : null,
child : {
level : 'Level 2',
items : [
{
name : 'Some Sub-Business Name 2',
id : '1234',
data : null,
child : {
level : 'Level 3',
items : [
{
name : 'Some Area Name 3',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name 4',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 6',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
},
{
name : 'Some Product Name 7',
id : '12345678',
data : [9, 5, 35, 5764, 335],
child : null
}
]
}
}
]
}
}
]
}
},
{
name : 'Some Sub-Business Name 3',
id : '1234',
data : null,
child : {
level : 'Level 3',
items : [
{
name : 'Some Area Name 5',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name 5',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 8',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
}
]
}
}
]
}
}
]
}
}
]
}
}
]
};
const arr = [];
function getMatch(data, filters) {
if (data && data.items.length) {
let _thisItem;
for (let i = 0, j = data.items.length; i < j; i += 1) {
_thisItem = data.items[i];
for (let x = 0, y = filters.length; x < y; x += 1) {
if (_thisItem.name === filters[x]) {
arr.push(_thisItem);
}
}
if (_thisItem.child) {
getMatch(_thisItem.child, filters);
}
}
}
}
const filterList = [
['Some Business Name', 'Some Business Name 2'],
['Some Sub-Business Name', 'Some Sub-Business Name 2'],
['Some Area Name', 'Some Area Name 3'],
['Some Local Name 2', 'Some Local Name 4']
];
getMatch(data, [].concat(...filterList));
console.log(arr)
/*
Output:
0: {name: "Some Business Name", id: "123", data: null, child: {…}}
1: {name: "Some Sub-Business Name", id: "1234", data: null, child: {…}}
2: {name: "Some Area Name", id: "12345", data: null, child: {…}}
3: {name: "Some Local Name 2", id: "123456", data: null, child: {…}}
4: {name: "Some Business Name 2", id: "123", data: null, child: {…}}
5: {name: "Some Area Name 4", id: "12345", data: null, child: {…}}
6: {name: "Some Local Name 4", id: "123456", data: null, child: {…}}
Would like to see eventually:
{
level : 'Level 1',
items : [
{
name : 'Some Business Name',
id : '123',
data : null,
child : {
level : 'Level 2',
items : [
{
name : 'Some Sub-Business Name',
id : '1234',
data : null,
child : {
level : 'Level 3',
items : [
{
name : 'Some Area Name',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name',
id : '123456',
data : null,
child : null // removed because only the immediate parent was selected, but not this item
},
{
name : 'Some Local Name 2',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 3',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
},
{
name : 'Some Product Name 4',
id : '12345678',
data : [9, 5, 35, 5764, 335],
child : null
}
]
}
}
]
}
},
{
name : 'Some Area Name 2',
id : '12345',
data : null,
child : null // removed because only the immediate parent was selected, but not this item
}
]
}
}
]
}
},
{
name : 'Some Business Name 2',
id : '123',
data : null,
child : {
level : 'Level 2',
items : [
{
name : 'Some Sub-Business Name 2',
id : '1234',
data : null,
child : {
level : 'Level 3',
items : [
{
name : 'Some Area Name 3',
id : '12345',
data : null,
child : {
level : 'Level 4',
items : [
{
name : 'Some Local Name 4',
id : '123456',
data : null,
child : {
level : 'Level 5',
items : [
{
name : 'Some Product Name 6',
id : '1234567',
data : [2, 35, 235, 35554, 55554],
child : null
},
{
name : 'Some Product Name 7',
id : '12345678',
data : [9, 5, 35, 5764, 335],
child : null
}
]
}
}
]
}
}
]
}
},
{
name : 'Some Sub-Business Name 3',
id : '1234',
data : null,
child : null // removed because only the immediate parent was selected, but not this item
}
]
}
}
]
};
*/
每个级别的项目可以有大量的项目，我只是缩短了这个例子的数据。
正如您从上面的输出中看到的那样，我拥有所有子项目的当前级别，但我想保持相同的结构并且只删除不在过滤器列表中的子项目。
Lodash/Underscore/ES2016 没问题。感谢您提供任何帮助，我提前感谢您提供的任何见解。
最佳答案
我花了点时间引用了别人的代码(Shibo Zhao)，写了如下代码，可以满足查询某个元素的条件，如果想多搜索，部分查询合并对象后应该可行，祝你好运。(我是中国人，英语很糟糕，所以我的代码不是)
function findPathBFS(source, goal) {
const dataSource = JSON.parse(JSON.stringify(source))
const res = []
res.push(...dataSource)
for (let i = 0; i < res.length; i++) {
res[i].num = i
}
for (let i = 0; i < res.length; i++) {
const curData = res[i]
if (curData.name === goal) {
const result = []
return (function findParent(data) {
result.unshift({name:data.name,num:data.num});
if (data.parent) return findParent(data.parent)
return result
})(curData)
}
if (curData.child) {
res.push(...curData.child.items.map((d,i) => {
d.parent = curData;
d.num = i;
return d
}))
}
}
return []
}
let array = findPathBFS(data.items, 'Some Area Name 3');
console.log(array);
const newData = prune();
console.log(newData)
function prune(){
let count=0;
const currentData = JSON.parse(JSON.stringify(data));
const items = currentData.items;
const arr = array.map(e=>e.num);
_prune(items,count,arr);
return currentData;
}
function _prune(items,count,arr){
const item = JSON.parse(JSON.stringify(items[arr[count]]));
items.length=1;
items[0]=item;
count++;
if(count<arr.length){
_prune(items[0].child.items,count,arr)
}
if(count===arr.length){
if(items[0]&&items[0].child){
for(let _item in items[0].child.items){
_item.child=null;
}
}
}
}
关于javascript - 过滤深度嵌套的数据并返回所有父/直接子项 JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49179891/
25
4
0
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
在编码时，我问了自己这个问题: 这样更快吗: if(false) return true; else return false; 比这个？ if(false) return true; return
如何在逻辑条件下进行“返回”？ 在这样的情况下这会很有用 checkConfig() || return false; var iNeedThis=doSomething() || return fa
这是我的正则表达式 demo 如问题所述: 如果第一个数字是 1 则返回 1 但如果是 145 则返回 145 但如果是 133 则返回 133 样本数据a: K'8134567 K'81345678
在代码高尔夫问答部分查看谜题和答案时，我遇到了 this solution返回 1 的最长和最晦涩的方法 引用答案， int foo(void) { return! 0; } int bar(
我想在下面返回 JSON。 { "name": "jackie" } postman 给我错误。说明 Unexpected 'n' 这里是 Spring Boot 的新手。 1日龄。有没有正确的方法来
只要“is”返回 True，“==”不应该返回 True 吗？ In [101]: np.NAN is np.nan is np.NaN Out[101]: True In [102]: np.NAN
我需要获取所有在 6 号或 7 号房间或根本不在任何房间的学生的详细信息。如果他们在其他房间，简单地说，我不希望有那个记录。 我的架构是: students(roll_no, name,class,.
我有一个表单，我将它发送到 php 以通过 ajax 插入到 mysql 数据库中。一切顺利，php 返回 "true" 值，但在 ajax 中它显示 false 消息。 在这里你可以查看php代码:
我在 Kotlin 中遇到了一个非常奇怪的无法解释的值比较问题，以下代码打印 假 data class Foo ( val a: Byte ) fun main() { val NUM
请注意，这并非特定于 Protractor。问题在于 Angular 2 的内置 Testability service Protractor 碰巧使用。 Protractor 调用 Testabil
在调试窗口中，以下表达式均返回 1。 Application.WorksheetFunction.CountA(Cells(4 + (i - 1) * rows_per_record, 28) & "
我在本地使用 jsonplaceholder ( http://jsonplaceholder.typicode.com/)。我正在通过 extjs rest 代理测试我的 GET 和 POST 调用
这是 Postman 为成功调用我的页面而提供的(修改后的)代码段。 var client = new RestClient("http://sub.example.com/wp-json/wp/v2
这个问题在这里已经有了答案: What to do with mysqli problems? Errors like mysqli_fetch_array(): Argument #1 must
我想我对 C 命令行参数有点生疏。我查看了我的一些旧代码，但无论这个版本是什么，都会出现段错误。 运行方式是 ./foo -n num(其中 num 是用户在命令行中输入的数字) 但不知何故它不起作用
我已经编写了一个类来处理命名管道连接，如果我创建了一个实例，关闭它，然后尝试创建另一个实例，调用 CreateFile() 返回 INVALID_HANDLE_VALUE，并且 GetLastErro
即使 is_writable() 返回 true，我也无法写入文件。当然，该文件存在并且显然是可读的。这是代码: $file = "data"; echo file_get_contents($fil
下面代码中的变量 $response 为 NULL，尽管它应该是 SOAP 请求的值。 (潮汐列表)。当我调用 $client->__getLastResponse() 时，我从 SOAP 服务获得了
我一直在网上的不同论坛上搜索答案，但似乎没有与我的情况相符的... 我正在使用 Windows 7，VS2010。 我有一个使用定时器来调用任务栏刷新功能的应用程序。在该任务栏函数中包含对 LoadI
我是一名优秀的程序员,十分优秀！