JSON 개체에서 선택 양식 속성 만들기

VanCoon

내 json 개체의 키와 값에서 선택 드롭 다운을 만들려고하지만 키 값 쌍을 함께 가져올 수는 없지만 키 이름 자체를 얻는 데만 성공했습니다. 아래는 내가 지금까지 완료 할 수 있었던 것입니다.

다음은 선택 옵션이 표시되는 방식입니다.

 <select id="optSelect">
    <option value="key1">value1</option> <!-- should come from name1 -->
    <option value="key1">value2</option> <!-- should come from name2 -->
 </select>

각 키의 값을 유지하기 위해 다른 배열을 만든 다음 선택 옵션을 작성할 때 그에 따라 참조해야합니까? 아니면 다른 방법이나 방법이 있습니까?

    var someObject = {
        "Name1": {
            "key1": "value1",
        },
        "Name2": {
            "key1": "value2",
        }
    }


    var objArray = [];

    for(var i in someObject){
        var key = someObject[i];
        for(var x in key1){
            var nextKey = x;
            var nextVal = key1[x];
            someObject.push(nextKey);
        }
    }

    var optionSelect = document.getElementById("optSelect"),
        selectList = document.createElement("select");

    selectList.id = "mySelect";
    optionSelect.appendChild(selectList);

    for (var i = 0; i < objArray.length; i++) {
        var option = document.createElement("option");
        option.value = objArray[i]; // need to get key1 in here for each value in someObject
        option.text = objArray[i]; // need to get value 1 or 2 etc in here for each value name in someObject
        selectList.appendChild(option);
    }
Dij

for(var x in key1){, 여기서 key1은 정의되어 있지 않으므로 수정해야합니다. 그런 다음 objArray에 모든 키 값 쌍을 저장해야합니다. 값만 밀어 넣으면 나중에 사용하기가 어려워집니다. 에서 개체를 푸시 할 수 있습니다 objArray. 또한 selectList를 만든 다음 optionSelect에 추가하는 이유는 다음과 같습니다. optionSelect에 옵션을 직접 추가 할 수 있습니다.

 var someObject = {
        "Name1": {
            "key1": "value1",
        },
        "Name2": {
            "key1": "value2",
        }
    }


    var objArray = [];

    for(var i in someObject){
        var key1 = someObject[i];
        for(var x in key1){
            objArray.push({'key' : x, 'val' : key1[x]});
        }
    }

    var optionSelect = document.getElementById("optSelect"),
        selectList = document.createElement("select");

    selectList.id = "mySelect";
    optionSelect.appendChild(selectList);

    for (var i = 0; i < objArray.length; i++) {
        var option = document.createElement("option");
        
        option.value = objArray[i].key; // need to get key1 in here for each value in someObject
        option.text = objArray[i].val; // need to get value 1 or 2 etc in here for each value name in someObject
        optionSelect.appendChild(option);
    }
<select id="optSelect">

 </select>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

선택에 따라 동적 선택 양식 만들기

분류에서Dev

Ember 2.2에서 양식 선택 목록 만들기

분류에서Dev

식에 linq 속성 선택기 추가

분류에서Dev

다른 기존 개체에서 선택한 특성 만 사용하여 새 javascript 개체 만들기

분류에서Dev

양식에 대한 임시 속성 만들기 및 사용

분류에서Dev

codeigniter 양식 선택 만들기

분류에서Dev

선택 양식의 Django 액세스 객체 속성

분류에서Dev

양식에서 선택 끌기

분류에서Dev

만들기보기에서만 Django 양식 유효성 검사

분류에서Dev

만들기보기에서만 Django 양식 유효성 검사

분류에서Dev

구획 모양에서 속성 선택

분류에서Dev

선택에서 개체 속성 사용

분류에서Dev

Dynamic Linq-자식 속성에서 부모 개체를 선택하는 방법

분류에서Dev

달력 내에서 Rails 양식 만들기, 양식 제출을위한 날짜 속성 수집

분류에서Dev

Laravel-4 Blade : 개체의 값을 사용하여 양식 선택 상자 만들기

분류에서Dev

양식 필드에서 JSON 만들기-jQuery

분류에서Dev

자바 스크립트 : 개체에서 특정 속성 만 선택

분류에서Dev

동적으로 JSON에서 개체를 만들 수있는 클래스 선택

분류에서Dev

선택 양식에서 기본 선택 제어

분류에서Dev

Javascript 기능을 사용하여 HTML 선택 양식에서 가격 생성

분류에서Dev

jQuery에서 데이터 속성 개체를 선택기로 사용

분류에서Dev

CSS 데이터 속성 선택기에 대한 정규식

분류에서Dev

개체 속성에서 개체 만들기

분류에서Dev

Django 선택 양식의 모델 선택 필드에 다양한 모델 속성 나열

분류에서Dev

React.js, 양식 입력에서 객체 생성 개선

분류에서Dev

날짜 선택기 및 시간 선택기에서 날짜 개체 만들기

분류에서Dev

codeigniter에서 자체 양식 유효성 검사 규칙 만들기

분류에서Dev

javafx에서 자동 완성 검색 양식 만들기

분류에서Dev

속성 선택기에서 값 추출

Related 관련 기사

  1. 1

    선택에 따라 동적 선택 양식 만들기

  2. 2

    Ember 2.2에서 양식 선택 목록 만들기

  3. 3

    식에 linq 속성 선택기 추가

  4. 4

    다른 기존 개체에서 선택한 특성 만 사용하여 새 javascript 개체 만들기

  5. 5

    양식에 대한 임시 속성 만들기 및 사용

  6. 6

    codeigniter 양식 선택 만들기

  7. 7

    선택 양식의 Django 액세스 객체 속성

  8. 8

    양식에서 선택 끌기

  9. 9

    만들기보기에서만 Django 양식 유효성 검사

  10. 10

    만들기보기에서만 Django 양식 유효성 검사

  11. 11

    구획 모양에서 속성 선택

  12. 12

    선택에서 개체 속성 사용

  13. 13

    Dynamic Linq-자식 속성에서 부모 개체를 선택하는 방법

  14. 14

    달력 내에서 Rails 양식 만들기, 양식 제출을위한 날짜 속성 수집

  15. 15

    Laravel-4 Blade : 개체의 값을 사용하여 양식 선택 상자 만들기

  16. 16

    양식 필드에서 JSON 만들기-jQuery

  17. 17

    자바 스크립트 : 개체에서 특정 속성 만 선택

  18. 18

    동적으로 JSON에서 개체를 만들 수있는 클래스 선택

  19. 19

    선택 양식에서 기본 선택 제어

  20. 20

    Javascript 기능을 사용하여 HTML 선택 양식에서 가격 생성

  21. 21

    jQuery에서 데이터 속성 개체를 선택기로 사용

  22. 22

    CSS 데이터 속성 선택기에 대한 정규식

  23. 23

    개체 속성에서 개체 만들기

  24. 24

    Django 선택 양식의 모델 선택 필드에 다양한 모델 속성 나열

  25. 25

    React.js, 양식 입력에서 객체 생성 개선

  26. 26

    날짜 선택기 및 시간 선택기에서 날짜 개체 만들기

  27. 27

    codeigniter에서 자체 양식 유효성 검사 규칙 만들기

  28. 28

    javafx에서 자동 완성 검색 양식 만들기

  29. 29

    속성 선택기에서 값 추출

뜨겁다태그

보관