хороший способ вернуть все вложенные ключи глубоко объекта со значениями в JavaScript

Question

Мне нужно получить доступ и вернуть все глубоко вложенные ключи в объекте и вернуть их на основе ключа.

Например, у меня есть

const chatSettings = {
  name: {
    questions: {
      question: 'What\'s your name?',
      fields: [
        {
          field: 'textinput',
          type: 'text',
          key: 'firstname',
          label: 'First name'
        },
        {
          field: 'textinput',
          type: 'text',
          key: 'lastname',
          label: 'Last name'
        },
      ]
    }
  },
  email: {
    questions: {
      question: 'Okay. {{username}}. Now type your email addess',
      fields: [
        {
          field: 'textinput',
          type: 'email',
          key: 'email',
          label: 'Email'
        }
      ]
    }
  }
}

И мне нужно что-то вроде getAllValuesForKey(chatSettings, 'key'), что бы вернуть ['firstname', 'lastname', 'email']

Есть какие-нибудь идеи, как сделать это быстрым способом, учитывая при этом, что некоторые из этих объектов могут даже не иметь этого ключа?

Answer 1

Вы можете использовать рекурсивную функцию с проверкой типа и уменьшить объект.

function getValues(object, key) {
    return object && typeof object === 'object'
        ? Object
            .entries(object)
            .reduce((r, [k, v]) => r.concat(k === key ? v : getValues(v, key)), [])
        : [];
}

var chatSettings = { name: { questions: { question: 'What\'s your name?', fields: [{ field: 'textinput', type: 'text', key: 'firstname', label: 'First name' }, { field: 'textinput', type: 'text', key: 'lastname', label: 'Last name' },] } }, email: { questions: { question: 'Okay. {{username}}. Now type your email addess', fields: [{ field: 'textinput', type: 'email', key: 'email', label: 'Email' }] } } },
    values = getValues(chatSettings, 'key');

console.log(values);

Answer 2

const chatSettings = {
  name: {
    questions: {
      question: 'What\'s your name?',
      fields: [
        {
          field: 'textinput',
          type: 'text',
          key: 'firstname',
          label: 'First name'
        },
        {
          field: 'textinput',
          type: 'text',
          key: 'lastname',
          label: 'Last name'
        },
      ]
    }
  },
  email: {
    questions: {
      question: 'Okay. {{username}}. Now type your email addess',
      fields: [
        {
          field: 'textinput',
          type: 'email',
          key: 'email',
          label: 'Email'
        }
      ]
    }
  }
}

function getAllValuesByKey(obj, key) {
  let values = []
  if(Array.isArray(obj)) {
    obj.forEach(o => {
      let value = getAllValuesByKey(o, key)
      if(value && value.length > 0) {
        values = values.concat(value)
      }
    })
  } else if(typeof obj === 'object') {
    Object.keys(obj).forEach(k => {
      if(k == key) {
        values.push(obj[k])
      }
      if(Array.isArray(obj[k]) || typeof obj[k] == 'object') {
        let value = getAllValuesByKey(obj[k], key)
        if(value && value.length > 0) {
          values = values.concat(value)
        }
      }
    })
  }
  return values
}

console.log(getAllValuesByKey(chatSettings, 'key'))

Answer 3

Вы можете создать рекурсивную функцию с помощью метода reduce и в результате вернуть массив.

const data = {"name":{"questions":{"question":"What's your name?","fields":[{"field":"textinput","type":"text","key":"firstname","label":"First name"},{"field":"textinput","type":"text","key":"lastname","label":"Last name"}]}},"email":{"questions":{"question":"Okay. {{username}}. Now type your email addess","fields":[{"field":"textinput","type":"email","key":"email","label":"Email"}]}}}

function find_deep(data, key) {
  return Object.keys(data).reduce((r, e) => {
    if (typeof data[e] == 'object') r.push(...find_deep(data[e], key))
    if (key == e) r.push(data[e])
    return r
  }, [])
}

console.log(find_deep(data, 'key'))