js對象平鋪的兩種表現方式

一、常規的平鋪需求。

　　給出一個多維對象

　　

var obj = {
                eureka1: {
                    clinet: {
                        clinetclient: 70,
                        healthcheck1: {
                            enabled: true
                        },
                        serviceUrl: "http://dsfasdf"
                    },
                    instance: {
                        health: "/health",
                        hostname: "${hostname}",
                        prefer: true,
                        statuspath: "/info"
                    },
                    server: {
                        enabledvation: false,
                        peer: 6000
                    }
                },
                eureka2: {
                    health: {
                        status: {
                            order: "DOWN,UP"
                        }
                    }
                }
            }

　　需要轉換的形式為：

      

 

　　js方法：

        

<script>
            var obj = {
                eureka1: {
                    clinet: {
                        clinetclient: 70,
                        healthcheck1: {
                            enabled: true
                        },
                        serviceUrl: "http://dsfasdf"
                    },
                    instance: {
                        health: "/health",
                        hostname: "${hostname}",
                        prefer: true,
                        statuspath: "/info"
                    },
                    server: {
                        enabledvation: false,
                        peer: 6000
                    }
                },
                eureka2: {
                    health: {
                        status: {
                            order: "DOWN,UP"
                        }
                    }
                }
            }

            function haveChildren(data, list) {
                for (let key in data) {
                    if (typeof data[key] === 'object' && isNaN(data[key].length)) {
                        this.haveChildren(data[key], list)
                    } else {
                        list.push({
                            name: key,
                            value: data[key]
                        })
                    }
                }
                return list
            }
            var mydata = haveChildren(obj, []);
            console.log(mydata1);
        </script>

 

二、在開發的過程中，有接到第二種需求

　　表現形式為：

　　

 

　　代碼：

　　

<script>
			var obj = {
				eureka1: {
					clinet: {
						clinetclient: 70,
						healthcheck1: {
							enabled: true
						},
						serviceUrl: "http://dsfasdf"
					},
					instance: {
						health: "/health",
						hostname: "${hostname}",
						prefer: true,
						statuspath: "/info"
					},
					server: {
						enabledvation: false,
						peer: 6000
					}
				},
				eureka2: {
					health: {
						status: {
							order: "DOWN,UP"
						}
					}
				}
			}

			function getObjectData(data, list, keyName) {
				for (let key in data) {
					if (keyName) {
						var str = keyName + '.' + key
					} else {
						var str = key;
					}
					if (typeof data[key] === 'object' && isNaN(data[key].length)) {
						this.getObjectData(data[key], list, str)
					} else {
						list.push({
							name: str,
							value: data[key]
						})
					}
				}
				return list
			}

			var mydata1 = getObjectData(obj, []);
			console.log(mydata1);
		</script>