【问题标题】:How do I loop through a nested array in angular/Ionic如何循环遍历角度/离子中的嵌套数组
【发布时间】:2019-05-25 18:09:14
【问题描述】:

我一直在搜索,但我遇到的所有内容都是在 HTML 中循环,我需要在 .ts 中循环。

我有一个数组,我需要循环并检查输入的值是否与键匹配。如果是,则返回数组内的值

data: any = {
    '1234': {
        site: 'https://example1.com/',
        path: 'uploads',
        link: 'https://example1.com/uploads',
    },
    '5678': {
        site: 'https://example2.com/',
        path: 'uploads',
        link: 'https://example2.com/uploads',
    }
}

我一直在尝试以下各种变化,但收效甚微。我可以打印密钥,但无法获取值(站点、路径、链接)

let pin = '1234';
Object.keys(data).forEach(key => {
    if(key == pin) {
        Object.keys(key).forEach(k => {
            // I'm trying to get something like k.url so I can store it
            console.log(k.url);
        });
    }
});

【问题讨论】:

  • 在 JavaScript 中,数组用方括号括起来([ ]);对象,大括号 ({ })。这个问题最好命名为“循环嵌套对象”。

标签: javascript angular ionic-framework ionic3


【解决方案1】:

您只能使用一个循环来实现这一目标

const pin = '1234';
Object.keys(data).forEach(key => {
    if(key == pin) {
         console.log(data[key].url);
         console.log(data[key].site);
         console.log(data[key].path);
    }
});

【讨论】:

  • 谢谢,正是我需要的。
【解决方案2】:

const data = {
    '1234': {
        site: 'https://example1.com/',
        path: 'uploads',
        link: 'https://example1.com/uploads',
    },
    '5678': {
        site: 'https://example2.com/',
        path: 'uploads',
        link: 'https://example2.com/uploads',
    }
}

const pin = '1234';

const properties = { ...data[pin] };

Object.values(properties).forEach(v => console.log(v));

// This will NOT throw an exception
// Using a non-existing key here
Object.values({...data['fake']}).forEach(v => console.log(v));

// This will throw an exception
// Using a non-existing key here
Object.values(data['fake']).forEach(v => console.log(v));

这可以满足您的需求,并且只使用一个循环。我使用扩展语法来防止未定义。如果您要查找的键不存在,则会返回一个空数组。

【讨论】:

  • 把一个对象展开成一个对象有什么意义?那个代码真的有必要吗?为什么不直接使用data[pin]
  • @georgeawg data[pin] 可能会返回一个对象,如果键不存在,它也可以返回一个未定义的对象。这将转换为Object.values(undefined).forEach(v => console.log(v));,这将是一个例外。使用扩展运算符 undefined 将转换为一个空对象,该对象可以成功地用于循环其值。我已经用一个例子更新了我的答案来说明这一点。谢谢你的好问题!
猜你喜欢
  • 1970-01-01
  • 2018-12-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-31
相关资源
最近更新 更多