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
– Sam, Commented Oct 26, 2013 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
– Fulbito, Commented Oct 26, 2013 at 17:00

Community · Accepted Answer · 2017-05-23 12:21:10Z

1

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);
        }
    }

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 26, 2013 at 17:23

Sam

2,2112 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fulbito Over a year ago

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 benfutbol10.wikia.com/wiki/…. Thanks

Sam Over a year ago

@GioviTennyson I made an update to the correct javascript. Unfortunately we cannot test it against your link because the link doesn't support JSONP.

Community · Accepted Answer · 2017-05-23 12:21:10Z

0

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 26, 2013 at 17:49

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

1 Comment

Fulbito Over a year ago

It works! but the list is not all equal: benfutbol10.wikia.com/wiki/… some li contains more than one span (Sorry for my english). Thanks!

Collectives™ on Stack Overflow

Get dynamically plain text and create list jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related