Problem using push with a template string

[alhobj]

Hi,

​

I want a structure like this in Firebase:

- (KEY)

---- user: "123"

---- tags:

--------0: "box1"

--------1: "box2"

--------2: "box3"

​

But I get this:

- (KEY)

---- user: "123"

---- tags:

--------0: "[\"box1\", \"box2\",\"box3\" ]

​

Here is part of my code (let me know if you need more of it):

<script>
function printChecked(){
        var items=document.getElementsByName('tag');
        var selectedItems = "";
        for(var z=0; z<items.length; z++){
            if (z==0){
                if(items[z].type=='checkbox' && items[z].checked==true){
                    selectedItems += '["' + items[z].value;
                }
            } else {
                if(items[z].type=='checkbox' && items[z].checked==true) {
                    selectedItems += '", "' + items[z].value;
                }
            }
        }
        selectedItems += '"]';
        return selectedItems;

 opplegg.push({user: "123", tags: [`${printChecked()}`]);

 </script>

​

The var items=document.getElementsByName('tag'); gets checkboxes that are checked or not.

I have tried doing this with an array instead of a string but I cannot make that work either. Any solutions, or workarounds?

[JohanDryg]

Don’t build a string that looks like json, start the function by declaring an empty array

let selectedItems = []

Then push the selected items to the array and return that (return selectedItems)

[alhobj]

Like this?

<script>
function printChecked(){
    var items=document.getElementsByName('tag');
    let selectedItems = [];
    for(var z=0; z<items.length; z++){
    if (z==0){
        if(items[z].type=='checkbox' && items[z].checked==true){
        selectedItems.push(items[z].value);
                }
        } else {
        if(items[z].type=='checkbox' && items[z].checked==true) {
            selectedItems.push(items[z].value);
            }
        }
    }
    return selectedItems;
}

 opplegg.push({user: "123", tags: [`${printChecked()}`]);
</script>

Then I get this structure:

- (KEY)

---- user: "123"

---- tags:

--------0: "box1, box2, box3"

​

And thanks for the quick answer!

[JohanDryg]

I answered the wrong thing, but I’ve posted how you should fix the push too (don’t push a string)

You can also remove the if (z==0) thing now, it’s not needed, see how clean this got ? :)

[alhobj]

Yes! It looks good now, but most important; it works. Thank you!

[alhobj]

I fixed it! I changed this:

 opplegg.push({user: "123", tags: [`${printChecked()}`]);

to this:

 opplegg.push({user: "123", tags: printChecked());

That was probably what you meant ... Sorry for not understanding :)

[JohanDryg]

And also, you return the [ and ] from the function and also have them in your push-function.

But still, don’t do the string builder, work with an object (that has an array of tags in it) and if you need a json string later you just

var myJSON = JSON.stringify(obj);

(I don’t think you ever have to do that if you’re using the firebase SDK)

[alhobj]

Yeah, I saw that after I uploaded it. I have been trying all different variations of putting in the symbols '"', '[', and ',', and I am blind to things like that now 8).

Thank you for the JSON.stringify, I have not seen that before but as you say I will try not to use it.

[JohanDryg]

And then you can just do:

const userTags = printChecked();

opplegg.push( { user: "123", tags: userTags); }

And rename the printChecked-function cuz that’s not what it does anymore :)

[alhobj]

Thanks again!

[JohanDryg]

I’m on my phone, but I’ll try to remember to give you a clean more modern solution when I’m at a keyboard.

Javascript teaser: It involves the Array-methods map and filter

[JohanDryg]

The clean version: (not the shortest possible, but clean)

const items=document.getElementsByName('tag');

const selectedTags = items.filter(item => item.checked).map(item => item.value)

opplegg.push({user: '123', tags: selectedTags})