如何在JavaScript对象中删除空元素及其键？

Question

我得到了以下类型的对象：

{

    personalData: {


                    name:   "Diego",
                    last:   "Aguilar",
                    mail:   "diego@domain.com"
    },

    professionalData: {

                    almaMater:  "BUAP",
                    courses: [

                        {},
                        {
                            name:   "JavaScript Newbies",
                            tags:   ["","",""]
                        }
                    ]
    }
}

因此，在该示例中，professionalData.courses处的空对象应该被删除，因此第二个对象的tags键作为其数组元素是全空的。

一般来说，每当我发现值是空对象或数组元素时，请删除它们。此外，如果某个键获得空数组或对象，也可以删除它们。

也许 jQuery 或 lodash/underscore 可以直接解决这个问题？

这是存储在MongoDB中的对象的示例：

{
    "_id" : ObjectId("537e09c9896e05225cf50cb8"),
    "datosPersonales" : {
        "name" : "Maricela",
        "lastname" : "Aguilar Flores",
        "age" : "22",
        "phone" : "2878710097",
        "mobile" : "2878812505",
        "email" : "af05_@hotmail.com",
        "address" : "Carranza 168 Int 2"
    },
    "datosProfesionales" : {
        "postgraduates" : [
            {
                "degree" : "Especialidad",
                "title" : "Amor",
                "cedula" : "ASFAS5"
            },
            {
                "degree" : "Maestría",
                "title" : "Romance",
                "cedula" : "v"
            }
        ],
        "works" : [
            "Universidad Hispano"
        ],
        "freelances" : [ ],
        "noPsychoWorks" : [ ],
        "almaMater" : "BUAP",
        "course" : "1987",
        "cedula" : "SAFS555FSA",
        "workAreas" : [
            "Clínica",
            "Laboral"
        ],
        "freelance" : "true",
        "noPsychoWork" : "false"
    },
    "interesesProfesionales" : {
        "groups" : [
            "Asociación de Psicólogos de Tuxtepec",
            "Club de Toby"
        ],
        "trainingTopics" : [
            "Real Madrid",
            "Cocina"
        ],
        "belongsToSomewhere" : "true",
        "activities" : [
            "Conferencias y encuentros",
            "Talleres"
        ],
        "trainingAreas" : [
            "Educativa"
        ],
        "hasParticipated" : "true",
        "wantsToBelong" : "true",
        "whyToBelong" : "Futuro"
    }
}

修改

这个丑陋的对象是我的Angular模块中处理不当的结果。 该对象来自Angular控制器的代码：

(function() {


var app = angular.module('PsicologosRegister', ['checklist-model'])

app.controller('PsicologoController', function($scope) {

    this.psycho = psicologo

    this.print = function() {

        console.log(this.psycho)
    }

    this.toMongo = function() {
        $.ajax({
            type:"POST",
            url:"/psychos",
            data:this.psycho        
        })              
    }
})

app.controller('PersonalDataController', function() {

    this.data = datos_Personales

})

app.controller('ProfessionalDataController', function() {

    this.data = datos_Profesionales
})

app.controller('ProfessionalInterestsController', function() {

    this.data = intereses_Profesionales

    this.print = function() {

        console.log(this.psycho)
    }
})              

app.controller('PosgraduateController', function() {


    this.degrees = [

                    'Especialidad',
                    'Maestría',
                    'Doctorado'
    ]

    this.postgraduates = _postgraduates

    this.addPostgraduate = function() {

        this.postgraduates.push({})
    }



})

app.controller('WorkController', function() {

    this.works = _works

    this.addWork = function() {

        this.works.push("")
    }
})      

app.controller('FreelanceController', function() {

    this.freelances = _freelances

    this.addFreelance = function() {

        this.freelances.push("")
    }

    this.noFreelance = function() {
        this.freelances = [""]
    }
})          

app.controller('NoPsychoWorkController', function() {

    this.noPsychoWorks = _noPsychoWorks

    this.addNoPsychoWork = function() {

        this.noPsychoWorks.push("")
    }

    this.notNoPsychoWorks = function() {
        this.noPsychoWorks = [""]
    }           
})  

app.controller('TrainingTopicsController', function() {

    this.trainingTopics = _trainingTopics
    this.add = function() {
        this.trainingTopics.push("")
    }
})

app.controller('GroupsController', function() {

    this.groups = _groups

    this.add = function() {
        this.groups.push("")
    }

    this.doesntBelongToAnywhere = function() {
        this.groups = [""]
    }
})      

var _noPsychoWorks = [""]
var _freelances = [""]
var _works = [""]
var _postgraduates = [{}]
var _trainingTopics = [""]
var _groups = [""]
var _events = [{}]
var datos_Personales = {}
var datos_Profesionales = {postgraduates:_postgraduates, works: _works, freelances:_freelances, noPsychoWorks:_noPsychoWorks}
var intereses_Profesionales = {events:_events,groups:_groups,trainingTopics:_trainingTopics}

var psicologo = {

                    datosPersonales:            datos_Personales,
                    datosProfesionales:         datos_Profesionales,
                    interesesProfesionales:     intereses_Profesionales
}
})()

此数据是使用来自Web表单的输入生成的，使用Angular呈现。对于数组中的元素，我使用ng-repeat。问题是它未知是否会有 freelances ， postgraduates 等等。我开始他们的例如，使用字符串的所有键。

这是我的整个标记：

<div id="formulario">

    <div class="container" id="seccionRegistro1" ng-controller="PersonalDataController as personal">
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <label for="inputNombre" class="col-xs-2 control-label">Nombre(s)</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Nombre(s)" ng-model="personal.data.name" >

                </div>
            </div>

            <div class="form-group">
                <label for="inputApellidos" class="col-xs-2 control-label">Apellidos</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Apellidos" ng-model="personal.data.lastname">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEdad" class="col-xs-2 control-label">Edad</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Edad" ng-model="personal.data.age">
                </div>
            </div>

            <div class="form-group">
                <label for="inputTel" class="col-xs-2 control-label">Teléfono</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Teléfono" ng-model="personal.data.phone">
                </div>
            </div>

            <div class="form-group">
                <label for="inputCel" class="col-xs-2 control-label">Celular</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Celular" ng-model="personal.data.mobile">
                </div>
            </div>

            <div class="form-group">
                <label for="inputMail" class="col-xs-2 control-label">e-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" placeholder="e-mail" ng-model="personal.data.email">
                </div>
            </div>  

            <div class="form-group">
                <label for="inputFB" class="col-xs-2 control-label">Facebook</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Facebook" ng-model="personal.data.fb">
                </div>
            </div>

            <div class="form-group">
                <label for="inputDireccion" class="col-xs-2 control-label">Dirección</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Dirección" ng-model="personal.data.address">
                </div>
            </div>                                            

            <div class="col-xs-offset-2 col-xs-10">
                <input type="button" class="btn btn-primary btnSeccion" id="btnSeccion1" value="Continuar"/>
            </div>

        </form>
    </div>

    <div class="container" id="seccionRegistro2" ng-controller="ProfessionalDataController as professional">
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <label for="inputAlmaMater" class="col-xs-2 control-label">Egresado de</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Egresado de" ng-model="professional.data.almaMater">
                </div>
            </div>              

            <div class="form-group">
                <label for="inputAñoEgreso" class="col-xs-2 control-label">Año de egreso</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Año de egreso" ng-model="professional.data.course">
                </div>
            </div>

            <div class="form-group">
                <label for="inputCedula" class="col-xs-2 control-label">Cédula Profesional</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" placeholder="Cédula Profesional" ng-model="professional.data.cedula">
                </div>
            </div>

            <div class="form-group" ng-controller="PosgraduateController as postgraduate">
                <label for="checkPosgrado" class="col-xs-2 control-label">Estudios de Posgrado</label>
                <div ng-repeat="p in postgraduate.postgraduates track by $index">
                    <div class="padding-between-lines">
                    <label for="checkPosgrado" class="col-xs-2 control-label" ng-show="$index!=0"></label>                          
                    <div class="col-xs-2">
                        <select ng-options="t for t in postgraduate.degrees" ng-model="p.degree" class="form-control"><select>              
                    </div>

                    <div class="col-xs-4">
                        <input type="text" ng-model="p.title" class="form-control inputPosgradoTitulo" placeholder="Título">                        
                    </div>

                    <div class="col-xs-3">
                        <input type="text" ng-model="p.cedula" class="form-control inputPosgradoCedula" placeholder="Cédula">
                    </div>                              

                    <div class="col-xs-1">
                            <input type="button" class="form-control" value="Añadir" ng-click="postgraduate.addPostgraduate()" ng-show="$index==0">
                    </div>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label for="areaTrabajo" class="col-xs-2 control-label">Areas de la psicología en las que se desempeña</label>

                <div class="col-xs-10" >
                    <label class="checkbox-inline" ng-repeat="area in ['Clínica', 'Social', 'Laboral', 'Educativa']">
                    <input type="checkbox" checklist-model="professional.data.workAreas" checklist-value="area"> {{area}}
                    </label>    
                </div>
            </div>

            <div class="form-group" ng-controller="WorkController as work">
                <label for="inputTrabajo" class="col-xs-2 control-label">Institución de trabajo</label>
                <div ng-repeat="w in work.works track by $index">
                <div class="padding-between-lines">
                    <label for="inputTrabajo" class="col-xs-2 control-label" ng-show="$index!=0"></label>
                    <div class="col-xs-9">
                        <input type="text" class="form-control" placeholder="Institución de trabajo" ng-model="work.works[$index]">
                    </div>
                    <div class="col-xs-1">
                        <input type="button" class="form-control" value="Añadir" ng-click="work.addWork()" ng-show="$index==0">
                    </div>                          
                </div>
                </div>

            </div>


            <div class="form-group" ng-controller="FreelanceController as freelance">

                <label for="trabajoIndependiente" class="col-xs-2 control-label">Desarrollo Profesional Independiente</label>

                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" ng-model="professional.data.freelance" name="optionsTrabajoIndependiente" value="true">
                        Sí
                      </label>
                    </div>
                </div>
                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" ng-model="professional.data.freelance" ng-change="freelance.noFreelance()" name="optionsTrabajoIndependiente" value="false">
                        No
                      </label>
                    </div>
                </div>                  

                <div ng-repeat="f in freelance.freelances track by $index">
                <div class="padding-between-lines">
                    <label class="col-xs-4" ng-hide="$index==0"></label>
                    <div class="col-xs-7">
                        <input type="text" class="form-control" placeholder="Desarrollo profesional independiente" ng-model="freelance.freelances[$index]" ng-disabled="professional.data.freelance=='false'">
                    </div>

                    <div class="col-xs-1">
                        <input type="button" class="form-control añadirTrabajoIndependiente" value="Añadir" ng-show="$index==0" ng-click="freelance.addFreelance()" ng-disabled="professional.data.freelance=='false'">
                    </div>                          
                </div>
                </div>

            </div>


            <div class="form-group" ng-controller="NoPsychoWorkController as noPsycho">

                <label class="col-xs-2 control-label">Actividades de trabajo no relacionadas con la psicología</label>

                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" ng-model="professional.data.noPsychoWork" name="optionsTrabajoNoPsicologia" value="true">
                        Sí
                      </label>
                    </div>
                </div>
                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" ng-model="professional.data.noPsychoWork" name="optionsTrabajoNoPsicologia" value="false" ng-change="noPsycho.notNoPsychoWorks()">
                        No
                      </label>
                    </div>
                </div>  

                <div ng-repeat="n in noPsycho.noPsychoWorks track by $index">
                <div class="padding-between-lines">
                    <label class="col-xs-4" ng-hide="$index==0"></label>
                    <div class="col-xs-7">
                            <input type="text" class="form-control" placeholder="Actividad" ng-model="noPsycho.noPsychoWorks[$index]" ng-disabled="professional.data.noPsychoWork=='false'">
                    </div>

                    <div class="col-xs-1">
                        <input type="button" class="añadirTrabajoNoPsicologia form-control" value="Añadir" ng-show="$index==0" ng-click="noPsycho.addNoPsychoWork()" ng-disabled="professional.data.noPsychoWork=='false'">
                    </div>
                </div>
                </div>

            </div>

            <div class="col-xs-offset-2 col-xs-10" ng-controller="PsicologoController as psi">
                <input type="button" class="btn btn-primary btnSeccion" id="btnSeccion2" value="Continuar" ng-click="psi.print()"/>
            </div>

        </form>
    </div>

    <div class="container" id="seccionRegistro3" ng-controller="ProfessionalInterestsController as interests">
        <form class="form-horizontal" role="form">

            <div class="form-group">

                <label for="actividadesInteres" class="col-xs-2 control-label">Actvidades profesionales en las que le gustaría participar</label>

                <div class="col-xs-10" >
                    <label class="checkbox-inline" ng-repeat="area in ['Conferencias y encuentros', 'Cursos', 'Talleres', 'Diplomados', 'Maestría', 'Doctorado']">
                    <input type="checkbox" class="areaTrabajo" checklist-model="interests.data.activities" checklist-value="area"> {{area}}
                    </label>          
                </div>
            </div>

            <div class="form-group">
                <label for="capacitacionInteres" class="col-xs-2 control-label">Areas de la psicología en las que le gustaría capacitarse</label>


                <div class="col-xs-10">
                    <label class="checkbox-inline" ng-repeat="area in ['Clínica', 'Social', 'Laboral', 'Educativa']">
                    <input type="checkbox" class="areaTrabajo" checklist-model="interests.data.trainingAreas" checklist-value="area"> {{area}}
                    </label>
                </div>
            </div>

            <div class="form-group" ng-controller="TrainingTopicsController as trainingTopic">
                <label for="inputNombre" class="col-xs-2 control-label">¿Alguna temática en particular que le gustaría conocer o capacitarse?</label>

                <div ng-repeat="tp in trainingTopic.trainingTopics track by $index">
                    <div class="padding-between-lines">
                        <label class="col-xs-2 control-label" ng-hide="$index==0"></label>
                        <div class="col-xs-9">
                          <input type="text" class="form-control" placeholder="Temática de interés" ng-model="trainingTopic.trainingTopics[$index]">
                        </div>
                        <div class="col-xs-1">
                            <input type="button" class="añadirTemaInteres form-control" value="Añadir" ng-show="$index==0" ng-click="trainingTopic.add()">
                        </div>                                      
                    </div>
                </div>
            </div>

            <div class="form-group" ng-controller="GroupsController as group">

                <label for="checkPosgrado" class="col-xs-2 control-label">¿Pertenece a alguna agrupación relacionada con el campo de la psicología?</label>

                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsPertenenciaAgrupacion" value="true" ng-model="interests.data.belongsToSomewhere">
                        Sí
                      </label>
                    </div>
                </div>
                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsPertenenciaAgrupacion" value="false" ng-model="interests.data.belongsToSomewhere" ng-change="group.doesntBelongToAnywhere()">
                        No
                      </label>
                    </div>
                </div>  

                <div ng-repeat="g in group.groups track by $index">
                    <div class="padding-between-lines">
                        <label class="col-xs-2 control-label" ng-hide="$index==0"></label>
                        <div class="col-xs-7">
                        <input type="text" class="inputAgrupacion form-control" placeholder="Agrupación" ng-model="group.groups[$index]" ng-disabled="interests.data.belongsToSomewhere=='false'">
                        </div>
                        <div class="col-xs-1">
                        <input type="button" class="form-control" value="Añadir" ng-show="$index==0" ng-click="group.add()" ng-disabled="interests.data.belongsToSomewhere=='false'">
                        </div>                                  
                    </div>
                </div>

            </div>

            <div class="form-group">

                <label for="participacionEventos" class="col-xs-2 control-label">¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?</label>

                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsParticipacionEventos" value="true" ng-model="interests.data.hasParticipated">
                        Sí
                      </label>
                    </div>
                </div>
                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsParticipacionEventos" value="false" ng-model="interests.data.hasParticipated">
                        No
                      </label>
                    </div>
                </div>                      

                <div class="col-xs-8">
                    <select multiple class="form-control">
                      <option value="abrazoterapia">Abrazoterapia</option>
                      <option value="tallerMujeres">Taller autoestima mujeres</option>
                    </select>
                </div>
            </div>

            <div class="row">

                <div class="col-xs-6">
                    <h4>Le gustaría participar como miembro activo de la Asociación de Psicólogos de Tuxtepec A.C</h4>
                </div>

                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsMiembro" value="true" ng-model="interests.data.wantsToBelong">
                        Sí
                      </label>
                    </div>
                </div>
                <div class="col-xs-1">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsMiembro" value="false" ng-model="interests.data.wantsToBelong">
                        No
                      </label>
                    </div>
                </div>  

                <div class="col-xs-4">
                    <textarea class="form-control" rows="3" placeholder="¿Por qué?" ng-model="interests.data.whyToBelong"></textarea>
                </div>



            </div>

            <div class="col-xs-offset-2 col-xs-10" ng-controller="PsicologoController as psi">
                <input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Finalizar" ng-click="psi.toMongo()"/>
            </div>

            </form>
        </div>
</div>

Answer 1

为什么不保持简单并创建适用于给定对象的解决方案。您可以随时重构它，然后在此之后提出更优雅的解决方案。但是你需要建立一个工作点才能让你开始。我也建议谨慎创建一个复杂的解决方案 - 毕竟，模式可以改变（无论你告诉他们多少次都赢了）。

我首先要创建单独的方法来单独评估每个部分。例如，创建一个解决方案来处理您的每个父键（datosPersonales，datosProfesionales，interesesProfesionales），这些键只能确定它们是否为空。

接下来，创建一个解决方案来处理这些父母的每个兄弟（研究生将有自己的例程来检查空值，工作会有自己的等等）。

对象中的每个分支都这样做。

一旦你得到了可以评估其中每一个的东西，你就可以通过从最底层开始 up 的方式开始重构（例如，{{ 1}}将是您第一个对象示例中最底层的。）

开始组合似乎做同样工作的方法，并创建适用于每个类似结构的通用方法。

等等..

一旦你得到了一个接近你想要的解决方案，我认为当你准备好说'嘿，有人能帮助我重构这个吗？＆＃34> ;

一个很好的实用工具包可以帮助您解决问题：http://underscorejs.org/#map

希望有所帮助。