如何循环遍历包含对象和对象数组的嵌套 JSON 对象

问题描述 投票:0回答:1

我正在尝试重新创建 Outlook 的搜索功能。我的整个数据集包含在以下接口中:

export interface Folder{
    id: string | null;
    name: string;
    folders: Folder[] | null;
    emails: Email[]
}

export interface Email {
    id : string;
    conversation_id: string;
    from: Contact;
    to: Contact[];
    cc: Contact[];
    bcc: Contact[];
    subject: string;
    body: string;
    body_preview: string;
    has_attachments: boolean;
    file_attachments: FileAttachment[];
    received_date: Date
}

export interface Contact
{
    email_address : number;
    name : string | null;
}

export interface FileAttachment
{
    id: string;
    file_name: string;
    content_type: string;
    content_bytes: string;
}

如您所见,它是一个具有多层的复杂对象。我有以下 v-text-field,我将使用它来搜索嵌套对象中的字符串:

            <v-text-field
        v-model="search"
        append-inner-icon="mdi-magnify"
        label="Dynamic Search"
        density="compact"
        variant="outlined"
        clearable
        rounded
        hide-details
        single-line
        flat
        color="primaryDarken4"/> 

我更关心电子邮件数组,因为这是目前我在屏幕上显示的唯一内容。我想知道如何对此创建过滤器。老实说,我什至不知道从哪里开始,很挣扎。我应该递归地执行此操作(如果可能),还是应该手动循环每个节点以查找匹配项,如果是,则使用 filter() 或其他东西?基本上,无论搜索框中出现什么文本,如果该电子邮件对象中包含该数据,那么都应该保留它。任何帮助将不胜感激。

javascript typescript search filter
1个回答
0
投票

这个功能会有帮助

function searchForEmails(folder: Folder, searchTerm: string): Email[] {
    const searchTermLwCase = searchTerm.toLowerCase();

    // email filter by search term
    const emailsFiltered = folder.emails.filter(emailData =>
        emailData.subject.toLowerCase().includes(searchTermLwCase) ||
        emailData.body.toLowerCase().includes(searchTermLwCase) ||
        emailData.body_preview.toLowerCase().includes(searchTermLwCase) ||
        emailData.from.name?.toLowerCase().includes(searchTermLwCase) ||
        emailData.to.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase)) ||
        emailData.cc.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase)) ||
        emailData.bcc.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase))
    );

    // searching subfolder recursively
    if (folder.folders) {
        for (const subfolder of folder.folders) {
            emailsFiltered.push(...searchEmails(subfolder, searchTerm));
        }
    }

    return emailsFiltered;
}
© www.soinside.com 2019 - 2024. All rights reserved.