color picker for each list item not showing up correctly

Question

I am trying to assign random color within a color picker container to each item in the list, with a container button (color picker container) in front of each so that on click the color picker container opens up.

$(document).ready(function() {
    $.getJSON("data.json", function(obj) {
        $('#myList').data('types', obj.types.map(function(o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function(o) {
            return '<li>' + o.type + '</li>';
        }).join('')).spectrum({
            color: (function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
                s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5),
            preferredFormat: "rgb",
            showInput: true,
            showPalette: true,
            showAlpha: true,
            palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
        });
    });
});

the problem is, the button is not showing up in front of each list item, and it ONLY shows up when I click on the list item and the color is the same for each item. however the goal is to generate the random color for each item.

could somebody tell me where the problem is and how can I fix the issue?

update

here is the color picker I am using:
https://github.com/bgrins/spectrum

2nd update:

here is the jsfiddle, but I couldn't pass my data into the getJSON, because in the original file, i read a json file with the same structure that I have provided in the example. https://jsfiddle.net/6j936afx/

3rd update:

here is the html code that the list goes into:

<div class="item-group">
 <label class="item-label">Types</label>
    <ul class="list-unstyled" id="myList"></ul>    
</div>

I think I need to inject a class that will hold the color picker container in each list item, if so, how can I do it directly in the javascript code?

Answer 1

Add plugin on li elements after they are added to Dom

Try this:

$(document).ready(function () {
                $.getJSON("data.json", function (obj) {
                    $('#myList').data('types', obj.types.map(function (o) {
                        // console.log(o.type);
                        return o.type;
                    })).append(obj.types.map(function (o) {
                        return '<li>' + o.type + '</li>';
                    }).join(''));

                    $("#mylist li").spectrum({
                        color: (function (m, s, c) {
                            return (c ? arguments.callee(m, s, c - 1) : '#') +
                                    s[m.floor(m.random() * s.length)]
                        })(Math, '0123456789ABCDEF', 5),
                        preferredFormat: "rgb",
                        showInput: true,
                        showPalette: true,
                        showAlpha: true,
                        palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                    });
                });
            });

For random color you should use each()

$("#mylist li").each(function(){
                       $(this).spectrum({
                        color: (function (m, s, c) {
                            return (c ? arguments.callee(m, s, c - 1) : '#') +
                                    s[m.floor(m.random() * s.length)]
                        })(Math, '0123456789ABCDEF', 5),
                        preferredFormat: "rgb",
                        showInput: true,
                        showPalette: true,
                        showAlpha: true,
                        palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                    });
                });

Edit: Add a input in each li and then add plug-in to it like this

$(document).ready(function () {
            $.getJSON("data.json", function (obj) {
                $('#myList').data('types', obj.types.map(function (o) {
                    // console.log(o.type);
                    return o.type;
                })).append(obj.types.map(function (o) {
                    return '<li>' + o.type + '<input class="color-picker" type="text"/></li>';
                }).join(''));

                $("#mylist .color-picker").each(function(){
                   $(this).spectrum({
                    color: (function (m, s, c) {
                        return (c ? arguments.callee(m, s, c - 1) : '#') +
                                s[m.floor(m.random() * s.length)]
                    })(Math, '0123456789ABCDEF', 5),
                    preferredFormat: "rgb",
                    showInput: true,
                    showPalette: true,
                    showAlpha: true,
                    palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                   });
                });

            });
        });

Answer 2

Not familiar with the specific plugin but if you want one in each list item my guess would be you would want children() in that chain so you apply it to each <li> and not to the parent list.

Try

$('#myList').data('types', obj.types.map(function(o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function(o) {
            return '<li>' + o.type + '</li>';
        }).join('')).children().spectrum({....

If this works then expand it with an each so each instance gets it's own random color

....children().each(function(){
    $(this).spectrum({/*opts*/})

})