Hướng dẫn javascript nested object to flat - đối tượng lồng nhau của javascript thành phẳng

Tôi cần phải làm phẳng một đối tượng lồng nhau. Cần một lớp lót. Không chắc thuật ngữ chính xác cho quá trình này là gì. Tôi có thể sử dụng JavaScript hoặc thư viện thuần túy, tôi đặc biệt thích dấu gạch dưới.

Tôi có ...

{
  a:2,
  b: {
    c:3
  }
}

Và tôi muốn ...

{
  a:2,
  c:3
}

Tôi đã thử ...

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Điều này hoạt động nhưng tôi cũng cần điều này để làm việc ...

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Đã hỏi ngày 9 tháng 10 năm 2015 lúc 10:56Oct 9, 2015 at 10:56

danday74danday74danday74

48.3K47 Huy hiệu vàng213 Huy hiệu bạc261 Huy hiệu Đồng47 gold badges213 silver badges261 bronze badges

2

Bạn đi đây:

Object.assign({}, ...function _flatten(o) { return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({[k]: o[k]})))}(yourObject))

Tóm tắt: Tạo một loạt các đối tượng một tài sản, sau đó kết hợp tất cả chúng với

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Điều này sử dụng các tính năng ES6 bao gồm

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Đối với những người không quan tâm đến sự điên rồ một dòng và muốn có thể thực sự đọc nó (tùy thuộc vào định nghĩa của bạn về khả năng đọc):

Object.assign(
  {}, 
  ...function _flatten(o) { 
    return [].concat(...Object.keys(o)
      .map(k => 
        typeof o[k] === 'object' ?
          _flatten(o[k]) : 
          ({[k]: o[k]})
      )
    );
  }(yourObject)
)

Foxhoundn

1.7472 Huy hiệu vàng13 Huy hiệu bạc18 Huy hiệu đồng2 gold badges13 silver badges18 bronze badges

Đã trả lời ngày 9 tháng 10 năm 2015 lúc 11:56Oct 9, 2015 at 11:56

4

Ví dụ có thể đọc được đơn giản hóa, không có sự phụ thuộc

/**
 * Flatten a multidimensional object
 *
 * For example:
 *   flattenObject{ a: 1, b: { c: 2 } }
 * Returns:
 *   { a: 1, c: 2}
 */
export const flattenObject = (obj) => {
  const flattened = {}

  Object.keys(obj).forEach((key) => {
    const value = obj[key]

    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      Object.assign(flattened, flattenObject(value))
    } else {
      flattened[key] = value
    }
  })

  return flattened
}

Đặc trưng

• Không có sự phụ thuộc
• Hoạt động với các giá trị null
• Làm việc với các mảng
• Ví dụ làm việc https://jsfiddle.net/webbertakken/jn613d8p/26/

Đã trả lời ngày 19 tháng 3 năm 2019 lúc 23:50Mar 19, 2019 at 23:50

WebberwebberWebber

4.1814 Huy hiệu vàng26 Huy hiệu bạc32 Huy hiệu Đồng4 gold badges26 silver badges32 bronze badges

2

Dưới đây là một lớp lót thực sự, điên rồ, đặt vật thể lồng nhau một cách đệ quy:

const flatten = (obj, roots=[], sep='.') => Object.keys(obj).reduce((memo, prop) => Object.assign({}, memo, Object.prototype.toString.call(obj[prop]) === '[object Object]' ? flatten(obj[prop], roots.concat([prop]), sep) : {[roots.concat([prop]).join(sep)]: obj[prop]}), {})

Phiên bản Multiline, giải thích:

// $roots keeps previous parent properties as they will be added as a prefix for each prop.
// $sep is just a preference if you want to seperate nested paths other than dot.
const flatten = (obj, roots = [], sep = '.') => Object
  // find props of given object
  .keys(obj)
  // return an object by iterating props
  .reduce((memo, prop) => Object.assign(
    // create a new object
    {},
    // include previously returned object
    memo,
    Object.prototype.toString.call(obj[prop]) === '[object Object]'
      // keep working if value is an object
      ? flatten(obj[prop], roots.concat([prop]), sep)
      // include current prop and value and prefix prop with the roots
      : {[roots.concat([prop]).join(sep)]: obj[prop]}
  ), {})

Một ví dụ:

const obj = {a: 1, b: 'b', d: {dd: 'Y'}, e: {f: {g: 'g'}}}
const flat = flatten(obj)
{
  'a': 1, 
  'b': 'b', 
  'd.dd': 'Y', 
  'e.f.g': 'g'
}

Chúc mừng một ngày một ngày!

Đã trả lời ngày 4 tháng 5 năm 2020 lúc 22:20May 4, 2020 at 22:20

Muratgozelmuratgozelmuratgozel

2.15323 Huy hiệu bạc29 Huy hiệu đồng23 silver badges29 bronze badges

1

Phiên bản ES6 của tôi:

{
  a:2,
  c:3
}

Đã trả lời ngày 19 tháng 6 năm 2021 lúc 13:52Jun 19, 2021 at 13:52

Marco Lackovicmarco LackovicMarco Lackovic

5.6066 Huy hiệu vàng54 Huy hiệu bạc51 Huy hiệu Đồng6 gold badges54 silver badges51 bronze badges

ES6 bản địa, đệ quy:

One-liner

{
  a:2,
  c:3
}

Mở rộng

{
  a:2,
  c:3
}

Cách sử dụng

{
  a:2,
  c:3
}

Đã trả lời ngày 16 tháng 12 năm 2021 lúc 10:41Dec 16, 2021 at 10:41

Metaorymetaorymetaory

711 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

1

Nó không hoàn toàn là một lớp lót, nhưng đây là một giải pháp không yêu cầu bất cứ điều gì từ ES6. Nó sử dụng phương pháp

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

{
  a:2,
  c:3
}

Đã trả lời ngày 15 tháng 10 năm 2015 lúc 21:36Oct 15, 2015 at 21:36

James Brierleyjames BrierleyJames Brierley

4.5691 Huy hiệu vàng21 Huy hiệu bạc38 Huy hiệu đồng1 gold badge21 silver badges38 bronze badges

Tôi thích mã này vì nó dễ hiểu hơn một chút.

EDIT: Tôi đã thêm một số chức năng tôi cần, vì vậy bây giờ nó khó hiểu hơn một chút.

{
  a:2,
  c:3
}

Demo https://stackblitz.com/edit/typescript-flatter

Đối với Insinde A TypeScript Lớp sử dụng:

{
  a:2,
  c:3
}

Đã trả lời ngày 11 tháng 10 năm 2019 lúc 8:10Oct 11, 2019 at 8:10

NoobnoobNoob

5987 Huy hiệu bạc15 Huy hiệu Đồng7 silver badges15 bronze badges

Đây là một chức năng tôi có trong các thư viện chung của mình cho chính xác mục đích này. Tôi tin rằng tôi đã nhận được điều này từ một câu hỏi tương tự Stackoverflow, nhưng không thể nhớ cái nào (chỉnh sửa: cách nhanh nhất để làm phẳng / không được làm cho các đối tượng JSON lồng nhau - cảm ơn Yoshi!)

{
  a:2,
  c:3
}

Điều này sau đó có thể được gọi như sau:

{
  a:2,
  c:3
}

Bạn cũng có thể nối chức năng này vào lớp chuỗi JavaScript tiêu chuẩn như sau:

{
  a:2,
  c:3
}

Trong đó, bạn có thể làm như sau:

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Đã trả lời ngày 9 tháng 10 năm 2015 lúc 11:03Oct 9, 2015 at 11:03

Sk93Sk93Sk93

3.6143 Huy hiệu vàng36 Huy hiệu bạc65 Huy hiệu Đồng3 gold badges36 silver badges65 bronze badges

3

Dưới đây là các giải pháp vani hoạt động cho các mảng, nguyên thủy, biểu thức thường xuyên, chức năng, bất kỳ số cấp độ đối tượng lồng nhau nào và mọi thứ khác tôi có thể ném vào chúng. Đầu tiên ghi đè các giá trị thuộc tính theo cách mà bạn mong đợi từ

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Thứ hai tích lũy các giá trị thành một mảng.

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Ngoài ra, xin vui lòng không bao gồm mã như thế này trong sản xuất vì rất khó để gỡ lỗi.

Đã trả lời ngày 21 tháng 9 năm 2018 lúc 13:02Sep 21, 2018 at 13:02

PKFMPKFMpkfm

4533 Huy hiệu bạc7 Huy hiệu Đồng3 silver badges7 bronze badges

Đây là phiên bản ES6 trong TypeScript. Nó có những câu trả lời tốt nhất được đưa ra ở đây và ở nơi khác. Một số tính năng:

• Hỗ trợ các đối tượng ngày và chuyển đổi chúng thành chuỗi ISO
• Đặt một dấu gạch dưới giữa chìa khóa của cha mẹ và con cái (ví dụ:

  Object.assign({}, ...function _flatten(o) { return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({[k]: o[k]})))}(yourObject))
  

  0 trở thành

  Object.assign({}, ...function _flatten(o) { return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({[k]: o[k]})))}(yourObject))
  

  1

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Một ví dụ:

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Chúc mừng một ngày một ngày!Oct 18, 2021 at 10:39

Đã trả lời ngày 4 tháng 5 năm 2020 lúc 22:20

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

Muratgozelmuratgozel

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

2.15323 Huy hiệu bạc29 Huy hiệu đồng

Phiên bản ES6 của tôi:Dec 16, 2021 at 20:11

Đã trả lời ngày 19 tháng 6 năm 2021 lúc 13:52Julian

Marco Lackovicmarco Lackovic17 silver badges39 bronze badges

5.6066 Huy hiệu vàng54 Huy hiệu bạc51 Huy hiệu Đồngflatten only the first level of the object and merge duplicate object keys into an array:

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "fred")
alert(JSON.stringify(resultObj));

ES6 bản địa, đệ quy:Apr 8, 2020 at 12:03

Mở rộngJohannes

Cách sử dụng2 silver badges3 bronze badges

Đã trả lời ngày 16 tháng 12 năm 2021 lúc 10:41

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

MetaorymetaoryJul 30 at 4:14

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

711 Huy hiệu bạc3 Huy hiệu đồng

Nó không hoàn toàn là một lớp lót, nhưng đây là một giải pháp không yêu cầu bất cứ điều gì từ ES6. Nó sử dụng phương pháp

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

{
  a:2,
  c:3
}

Đã trả lời ngày 15 tháng 10 năm 2015 lúc 21:361 silver badge5 bronze badges

James Brierleyjames Brierley

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

4.5691 Huy hiệu vàng21 Huy hiệu bạc38 Huy hiệu đồngDec 10, 2019 at 14:27

2

Tôi biết nó rất dài, nhưng nó có thể hữu ích cho một số người trong tương lai

Tôi đã sử dụng đệ quy

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Đã trả lời ngày 7 tháng 1 năm 2021 lúc 18:13Jan 7, 2021 at 18:13

Đây là tiện ích mở rộng TypeScript của tôi từ câu trả lời của @Webber. Cũng hỗ trợ ngày:

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Đã trả lời ngày 14 tháng 1 năm 2021 lúc 9:42Jan 14, 2021 at 9:42

RossrossRoss

2.4612 Huy hiệu vàng28 Huy hiệu bạc39 Huy hiệu đồng2 gold badges28 silver badges39 bronze badges

var obj = {"fred":2,"jill":4,"obby":{"john":5}};
var resultObj = _.pick(obj, "john")
alert(JSON.stringify(resultObj));

Đã trả lời ngày 4 tháng 4 lúc 20:35Apr 4 at 20:35

1

Làm thế nào để bạn làm phẳng một đối tượng lồng nhau?

Làm cách nào để làm cho một đối tượng phẳng trong JavaScript?

Làm thế nào để tôi làm phẳng một mảng lồng nhau?

Làm thế nào để bạn làm phẳng một đối tượng trong một mảng?