Styling JSON с jQuery

Question

У меня есть значение JSON, которое имеет несколько значений, разделенных запятой. Есть ли способ, чтобы это отображалось в dom как вход для выпадающего списка?

Подробнее о моей разметке.

HTML

<h1>JSON Grid Edit</h1> 

    <table cellpadding="0" cellspacing="0" border="0" class="dt display" id="json-table-edit" contenteditable="true" onKeyUp="editValue(this.id);"> 
     <thead> 
     <tr> 
      <th width="25%">Setting</th> 
      <th width="75%">Value</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     <tfoot> 
     <tr> 
      <th>Setting</th> 
      <th>Value</th> 
     </tr> 
     </tfoot> 
    </table> 

JSON

 { 
     "allconfig": { 
     "card.inserted": { 
     "value": "Inserted, Not Inserted", 
    }, 
     "card.cisproc": { 
     "value": "Processed", 
     } 
    } 
    } 

Jquery

$.getJSON('json/ione-edit.json', function (data) { 
var newJson = []; 
var myJson = data; 
$.each(myJson.allconfig, function (key, value) { 
    var rowArray = []; 
    rowArray.push(key); 
    $.each(myJson.allconfig[key], function (key1, value1) { 
     rowArray.push(value1); 
    }); 
    newJson.push(rowArray); 
}); 
$('#json-table-edit').dataTable({ 
    "bJQueryUI": true, 
    "bStateSave": true, 
    "sPaginationType": "full_numbers", 
    "bProcessing": true, 
    "oLanguage": { 
     "sLengthMenu": ' <select>' + '<option value="10" selected="selected">Filter</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '<option value="-1">All</option>' + '</select>' 
    }, 
    "aaData": newJson 
}); 

Answer 1

Это возможно с помощью метода сплит(). split (",") даст вам массив отдельных строк для каждого объекта, разделенного комой. Затем вы можете использовать метод jQuery .each() для итерации по массиву и добавления каждой строки в DOM, завернутый в теги <option>.

что-то вроде этого:

var data = { 
    "allconfig": { 
    "card.inserted": { 
    "value": "Inserted, Not Inserted", 
}, 
    "card.cisproc": { 
    "value": "Processed", 
    } 
} 
} 

var options = (data.allconfig["card.inserted"]["value"]).split(","); 

$("body").append("<select id='select'></select>"); 
//I am appending this to the body, but you can change body to 
// whatever element/class/id you want 


$(options).each(function() { 
    $("#select").append("<option>"+this+"</option>"); 
}); 
//I have also given the select an id so this code can be used on pages that have multiple select elements 

вот fiddle