관련 입력 오류의 복잡한 객체를지도 필드

Question

가정하자 나는 한 다음 필드

<input name="a" /> 
<input name="b[0]" /> 
<input name="b[1]" /> 
<input name="c[d]" /> 
<input name="c[e][f]" /> 

하고 효율적인 방법이 될 것입니다 무엇 각 입력

var errors = { 
    a: 'error a ',  // a's error 
    b: [ 
     'error b0', // b[0]'s error 
     'error b1'  // b[1]'s error 
    ], 
    c: { 
     d: 'error cd ', // c[d]'s error 
     e: { 
      f: 'error cef' // c[e][f]'s error 
     } 
    } 
} 

에 대한 오류를 누른 다음 개체 각 오류를 관련 입력에 매핑 하시겠습니까? 아마 좋은하지 않은 - 내가이 일을 생각할 수

<input name="a" /> 
<div class="error">error a</div> 
<input name="b[0]" /> 
<div class="error">error b0</div> 
<!-- etc --> 

수있는 유일한 방법은 입력보다 name 속성을 반복하고 각각 평가 eval을 사용하는 것입니다. 다음과 같음 :

$(':input').each(function() { 
    var name = this.name.replace(/^([a-z0-9_\-]+)(.*)$/i, 'errors[$1]$2'); 
    var error = eval(name); 

    $(this).after('<div class="error">' + error + '</div>'); 
}); 

더 좋은 방법이 있습니까?

Answer 1

reduce()을 사용하면 현재 입력 요소의 이름으로 각 오류를 가져온 다음 after을 사용하여 현재 입력 요소 뒤에 추가 할 수 있습니다.

var errors = {"a":"error a ","b":["error b0","error b1"],"c":{"d":"error cd ","e":{"f":"error cef"}}} 
 

 
function f(name, obj) { 
 
    return name 
 
    .split(/[[\]]{1,2}/) 
 
    .filter(Boolean) 
 
    .reduce((r, e, i, arr) => { 
 
     return r[e] || (r[e] = arr[i + 1] ? {} : '') 
 
    }, obj) 
 
} 
 

 
$("input").each(function() { 
 
    let error = f($(this).attr('name'), errors) 
 
    if(error.length) $(this).after(`<div class="error">${error}</div>`) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="a" /> 
 
<input name="b[0]" /> 
 
<input name="b[1]" /> 
 
<input name="c[d]" /> 
 
<input name="c[e][f]" />