I need to get data from Materialize CSS chips, but I don't know, how.

$('.chips-placeholder').material_chip({
    placeholder: 'Stanici přidíte stisknutím klávesy enter',
    secondaryPlaceholder: '+Přidat',
});

function Show(){
    var data = $('.chips-placeholder').material_chip('data');
    document.write(data);
}

<!-- Added external styles and scripts -->
<script type="text/javascript" src=".1.1.min.js"></script>
<script src=".97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=".97.7/css/materialize.min.css">
<link href="+Icons" rel="stylesheet">

<!-- HTML body -->

<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>

I need to get data from Materialize CSS chips, but I don't know, how.

$('.chips-placeholder').material_chip({
    placeholder: 'Stanici přidíte stisknutím klávesy enter',
    secondaryPlaceholder: '+Přidat',
});

function Show(){
    var data = $('.chips-placeholder').material_chip('data');
    document.write(data);
}

<!-- Added external styles and scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- HTML body -->

<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>

• javascript
• jquery
• frameworks

• Sorry for my english. – Zdeněk Kundrát Commented Sep 18, 2016 at 9:33
• Please describe what do you expect from the code to happen and what actually happens. Is this code supposed to be sufficient to reproduce your issue (check my suggest edit: the snippet allows us to see the results but this is meaningful only if all the necessary code is present) – YakovL Commented Sep 18, 2016 at 9:48
• Javascript write [object Object], [object Object], [object Object], ... and he might write the content of chip, no [object Object], ... – Zdeněk Kundrát Commented Sep 18, 2016 at 11:01

4 Answers 4

So, to access to the data's chip you just have to do this:

var data = $('#id of your chips div').material_chip('data');
alert(data[0].tag);`

'0' is the index of your data (0, 1, 2 , 3, ...).

'tag' is the chip content. You can also get the id of your data with '.id'.

To get data from Materialize CSS chips, use the below code.

$('#button').click(function(){
    alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});

They appear to have changed the method available in the latest version.

The documentation suggests that you should be able to access the values as properties of the object, but I’ve spent an hour looking, not getting anywhere.

Until the following happened

 $('.chips-placeholder').chips({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
        onChipAdd: (event, chip) => {
            console.log(event[0].M_Chips.chipsData);
        },

During the onChipAdd event I was able to access the event. Within this object was an array of tags.

I know this isn't the documented way, however there is only so much time a client will accept when it comes billing and I must move on.

This worked great for me

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.chips');
        var instances = M.Chips.init(elems, {
            placeholder: "Ajouter des Tags",
            secondaryPlaceholder: "+tag",
            onChipAdd: chips2Input,
            onChipDelete: chips2Input,
            Limit: 10,
            minLength: 1
        });

        function chips2Input(){
            var instance = M.Chips.getInstance(document.getElementById('chip1')), inpt = document.getElementById('myInputField');
            inpt.value =  null;
            for(var i=0; i<instance.chipsData.length; i++){
                if(inpt.value == null)
                    inpt.value = instance.chipsData[i].tag;
                else{
                    inpt.value += ','+instance.chipsData[i].tag; //csv
                }
            }
            console.log('new value: ', inpt.value);
        }
    });
</script>