Get dynamically plain text and create list jQuery

Question

I need help with this code:

I have a plain text in a URL and I need to convert it to a list (ul) to show in a page. The format of the list is:

* IMAGEURL
** text
* IMAGEURL2
** text2
...

and I need to convert it to:

<ul id="listaEmoticones">
      <li><img src="IMAGEURL" /> <span>text</span></li>
      <li><img src="IMAGEURL2" /> <span>text2</span></li>
      ...
</ul>

I have this code but I don't know how to continue:



    $(function() {
        var $chat = $('#Chat_15028');
        $lista = $('').attr('id', 'listaEmoticones')
        $chat.prepend($lista);

        $.ajax({
            'dataType': 'text',
            'data': {
                'title': 'MediaWiki:Emoticons',
                'action': 'raw',
                'ctype': 'text/css'
            },
            'url': wgScript,
            'success': function(data) {
                var lines = data.split("\n");
                for (var i in lines) {
                    var val = (lines[i].indexOf('** ') == 0) ? lines[i].substring(3) : '';
                    var $opt = $('').text(lines[i]);
                    $lista.append($opt);
                }
            }
        });
    })

Thanks

EDIT: Thanks for the correction, I speak Spanish

The question is not clear. Can you tell us what code is failing? It looks like your html building is incorrect, but without better information it is hard to understand where you need help. — Sam, Oct 26 '13 at 16:49
I want to create a list from a plain text, getting dynamically using AJAX (jQuery). I have the code (showing in the post) but I don't know how continue. — Fulbito, Oct 26 '13 at 17:00

score 1 · Accepted Answer · edited May 23 '17 at 12:21

Here is a similar question:

How to generate UL Li list from string array using jquery?

Here is your corrected code:

    $(function () {
        var wgScript = "http://benfutbol10.wikia.com/wiki/MediaWiki:Emoticons?action=raw&ctype=text/css";

        $.ajax({
            'dataType': 'text',
            'url': wgScript,
            'success': function (data) {
                var $chat = $('#Chat_15028');
                var $lista = $('<ul>').attr('id', 'listaEmoticones');

                $chat.prepend($lista);

                var lines = data.split("\n");

                var src, txt, $opt, $img, $span;
                for (var i = 0; i < lines.length; i++) {
                    if (lines[i].indexOf('* ') == 0) {
                        src = lines[i].substring(2);
                    } else {
                        $img = $('<img>').attr('src', src);
                        $span = $('<span>').text(lines[i].substring(3));
                        $opt = $('<li>').append($img).append($span);
                        $lista.append($opt);
                    }
                }
            }
        });
    })

Here is a fiddle I built to demonstrate it: http://jsfiddle.net/Es2n2/3/

    var $chat = $('#Chat_15028');
    $lista = $('<ul>').attr('id', 'listaEmoticonesB');
    $chat.prepend($lista);

    var data = "* http://images2.wikia.nocookie.net/__cb20110904035827/central/images/7/79/Emoticon_angry.png\n** (angry)\n** >:O\n** >:-O\n* http://images1.wikia.nocookie.net/__cb20110904035827/central/images/a/a3/Emoticon_argh.png\n** (argh)";

    var lines = data.split("\n");
    var src, txt, $opt, $img, $span;
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].indexOf('* ') == 0) {
            src = lines[i].substring(2);
        } else {
            $img = $('<img>').attr('src', src);
            $span = $('<span>').text(lines[i].substring(3));
            $opt = $('<li>').append($img).append($span);
            $lista.append($opt);
        }
    }

In my web this doesn't work, I try to get the text but only appends the ul id="listaEmoticones". The URL of the plain text is http://benfutbol10.wikia.com/wiki/MediaWiki:Emoticons?action=raw&ctype=text/css. Thanks — Fulbito, Oct 26 '13 at 17:53
@GioviTennyson I made an update to the correct javascript. Unfortunately we cannot test it against your link because the link doesn't support JSONP. — Sam, Oct 26 '13 at 18:50

score 0 · Answer 2 · edited May 23 '17 at 12:21

Your current code has a few issues:

The syntax you are using to html elements is wrong:

// this returns an empty jQuery object, not an html element
$lista = $('').attr('id', 'listaEmoticones');
// what you want is:
$lista = $('<ul>', {id: 'listaEmoticones'});

You are using a for in loop to iterate over an array. This is typically a bad idea.

A more concise version would be:

// select the element we will be appending list to
var $chat = $('#Chat_15028');
// create our list element
var $lista = $('</ul>', {'id': 'listaEmoticones'});

/* == inside your ajax success callback: */

// remove pesky asterisks and spaces
var removeReg = /\*+\s+/g;
var lines = "* IMAGEURL\n ** text\n * IMAGEURL2\n ** text2".replace(removeReg, '').split('\n');

for (var i = 0; i < lines.length; i += 2) {
  $ul.append($('<li>')
      .append($('<img>', {src: lines[i]}))
      .append($('<span>', {text: lines[i+1]}))
    );
}
// add list element to DOM
$chat.append($ul);

JSBin

It works! but the list is not all equal: http://benfutbol10.wikia.com/wiki/MediaWiki:Emoticons?action=raw&ctype=text/css some li contains more than one span (Sorry for my english). Thanks! — Fulbito, Oct 26 '13 at 18:05

Get dynamically plain text and create list jQuery

2 Answers2