Как получить JSON и показать его с неупорядоченным списком в HTML? - PullRequest
Новая
       7

Как получить JSON и показать его с неупорядоченным списком в HTML?

0 голосов
/ 16 декабря 2011

У меня есть JSON, который выглядит так: 

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": ["Father", "Brother", "Cousin"]
}

Я рендерил этот элемент JSON из моей модели, и внутри html я просто вижу содержимое JSON. Однако, когда я пытаюсь сделать это в сценарии, он ничего не делает.

Я пытаюсь взять атрибут List и показать его в неупорядоченном списке в HTML.

Вот что я попробовал: 

<script>
    $("input[name=loadmyJson]").click(function() {//on button click
        var items = [];
        var myJ = ${json}; //Json element i created in my controller
        var myVar = myJ.parseJSON();
        $.each(data, function(myVar) {
        items.push('<li>' + myVar.List + '</li>');
        });
        $('#myList').append( items.join('') );//myList is my unordered list's id.
    )};
</script>

РЕДАКТИРОВАТЬ: мне нужно что-то добавить для parseJSON() func?

Ответы [ 5 ]

1 голос
/ 29 декабря 2011

Я бы серьезно посмотрел на шаблонизатор, такой как json2html (который специализируется на преобразовании json в html) для jquery.Делает жизнь намного проще, чем пытаться написать свои собственные методы для сборки html из исходного объекта json.

Обратите внимание, что вместо этого я изменил список из массива строк на объекты (упрощает доступ) 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>
var json =
{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [{label:"Father"}, {label:"Brother"},{label:"Cousin"}]
};
var transform = {tag:'span',html:'.label'};

$('#list').json2html(json.List, transform);
</script>
0 голосов
/ 16 декабря 2011

Пишите меньше кода

Вот немного HTML

Тогда этот бит javascript 

$('pre').text( JSON.stringify(mJ, null, "\t") );

Он будет отображать ваш JSON так же, как это 

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [
        "Father",
        "Brother",
        "Cousin"
    ]
}

Наконец, вы можете использовать что-то вроде jQuery Snippet , чтобы сделать его красивым 

$('pre').snippet('javascript');
0 голосов
/ 16 декабря 2011

Вы хотите перебрать массив List вашего объекта. 

var myVar = myJ.parseJSON();
$.each(myVar.List, function(index, el) {
    items.push('<li>' + el + '</li>');
});
0 голосов
/ 16 декабря 2011

Вы можете просто добавить это прямо сейчас, что-то вроде: 

var parent = $("#myList");
$.each(myJ.parseJSON().List, function() {
    $("<li></li>").html(this).appendTo(parent);
});
0 голосов
/ 16 декабря 2011

как насчет: 

var myVar = myJ.parseJSON();
$.each(myVar.List, function(key, value) {
        items.push('<li>' + value + '</li>');
    });
    $('#myList').append( items.join('') );//myList is my unordered list's id.
)};

??

Как описано В моем комментарии jQuery.each имеет аргументы key и value.переменная this равна значению (arguments[1]).

То же, что и jQuery («селектор»). У каждого есть аргументы key и element, где переменная this равнаelement (arguments[1]).

OKAY: 

var myVar = myJ.parseJSON();

также необходимо заменить на: 

var myVar = jQuery.parseJSON(myJ);

извините, что не видел его:)

...