Nesting v-for Loops with Unique Headers (sub-summary)

Support
21

I have no idea why my list isn’t displaying. It was working before I changed the field names. I changed them back and it’s still not rendering.

I have values in model.uniqCat.

Dev Tools:

"uniqCat": [{
        "ID": "2AE464EC-FC69-4EE8-80E0-30C2A9ACC09E",
        "keySignature": "F",
        "originalArtist": "Nat King Cole",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "L-O-V-E",
        "tempoSong": "122",
        "timeSignature": "4/4"
    }, {
        "ID": "181BCF2C-AD27-4A88-ABE5-5E372A8C3D65",
        "keySignature": "Bb",
        "originalArtist": "Norah Jones",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Don't Know Why",
        "tempoSong": "88",
        "timeSignature": "4/4"
    }, {

HTML

<div class="bg-white bg-white shadow rounded-lg px-4 py-5 border-b border-gray-200 sm:px-6">
    <h3 class="text-lg leading-6 font-medium text-gray-900">Music</h3>
    <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-4">
            <div v-for="header in model.uniqCat">
                <div class="bg-[#822447] text-white font-bold indent-8">{{header.setNumber}} - {{header.setNotes}}</div>

                <div v-for="(line, index) in model.music" v-if="line.setNumber == header.setNumber" class="ml-8 h-8 align-middle text-black font-semibold" :class="index % 2 == 0 ? 'bg-gray-50' : ''">

                    {{line.songName}}

                    <div class="text-sm text-black font-normal p-1 pull-right mb-0 mr-8" :class="index % 2 == 0 ? 'bg-gray-50' : ''">
                        {{line.originalArtist}} ({{line.keySignature}} {{line.timeSignature}} {{line.tempoSong}})
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
    <iframe style="border-radius:12px" :src="`${model.event.linkSpotify}`" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
</div>

Javascript Function:

var result = _.uniqWith(model.music, function(arrVal, othVal) {
  return arrVal.setNumber === othVal.setNumber;
});

model.uniqCat = result
22

Could I see your music array?

23

Copied from DEV TOOLS

"music": [{
        "ID": "2AE464EC-FC69-4EE8-80E0-30C2A9ACC09E",
        "keySignature": "F",
        "originalArtist": "Nat King Cole",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "L-O-V-E",
        "tempoSong": "122",
        "timeSignature": "4/4"
    }, {
        "ID": "66A00601-A72D-4983-A281-1AE88E151399",
        "keySignature": "Bb",
        "originalArtist": "Bonnie Raitt",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "I Can't Make You Love Me",
        "tempoSong": "65",
        "timeSignature": "4/4"
    }, {
        "ID": "6D3FE1DC-4DC9-4A48-A164-411DC9FA996C",
        "keySignature": "C",
        "originalArtist": "Bill Withers",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "Just The Two Of Us",
        "tempoSong": "92",
        "timeSignature": "4/4"
    }, {
        "ID": "DC258DCF-FB1C-46FF-A6CC-F2F118C6B1C9",
        "keySignature": "Dm",
        "originalArtist": "Amy Winehouse",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "You Know I'm No Good",
        "tempoSong": "104",
        "timeSignature": "4/4"
    }, {
        "ID": "615FF8FF-DBA9-489B-A3C4-DA633AD39C93",
        "keySignature": "Ebm",
        "originalArtist": "Stevie Wonder",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "I Wish",
        "tempoSong": "106",
        "timeSignature": "4/4"
    }, {
        "ID": "181BCF2C-AD27-4A88-ABE5-5E372A8C3D65",
        "keySignature": "Bb",
        "originalArtist": "Norah Jones",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Don't Know Why",
        "tempoSong": "88",
        "timeSignature": "4/4"
    }, {
        "ID": "D86FBA5A-CD22-48BB-AEF4-9D37F75D21D9",
        "keySignature": "D",
        "originalArtist": "George Harrison",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Something",
        "tempoSong": "67",
        "timeSignature": "4/4"
    }, {
        "ID": "1EEF4CE0-C4AB-4CFA-A01E-5BE1482441EA",
        "keySignature": "C",
        "originalArtist": "Carole King",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "It's Too Late Baby",
        "tempoSong": "98",
        "timeSignature": "4/4"
    }, {
        "ID": "99FCB07C-6A4E-4AE9-BEE9-3155009E3EA7",
        "keySignature": "G",
        "originalArtist": "Al Green",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Let's Stay Together",
        "tempoSong": "100",
        "timeSignature": "4/4"
    }, {
        "ID": "FFA22524-3121-4B61-BA4D-6E5737009231",
        "keySignature": "Ebm",
        "originalArtist": "Chaka Khan",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Ain't Nobody",
        "tempoSong": "104",
        "timeSignature": "4/4"
    }, {
        "ID": "EDC66E7F-9BBB-449E-9894-FFDE65DD6E3E",
        "keySignature": "F",
        "originalArtist": "Antonio-Carlos Jobim",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "The Girl From Ipanema",
        "tempoSong": "119",
        "timeSignature": "4/4"
    }, {
        "ID": "54736B9E-3806-42CF-87FB-6915FBC26A9C",
        "keySignature": "Db",
        "originalArtist": "Stevie Wonder",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Overjoyed",
        "tempoSong": "88",
        "timeSignature": "4/4"
    }, {
        "ID": "B48B2227-626C-4516-88B4-BE2E4D3332C3",
        "keySignature": "B",
        "originalArtist": "Journey",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Faithfully",
        "tempoSong": "66",
        "timeSignature": "4/4"
    }, {
        "ID": "05327307-D838-4649-8232-8A5AA254D0DB",
        "keySignature": "A",
        "originalArtist": "Aretha Franklin",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Natural Woman",
        "tempoSong": "95",
        "timeSignature": "3/4"
    }, {
        "ID": "F93DD2AF-FD89-446D-940F-81465DAEACED",
        "keySignature": "D",
        "originalArtist": "Michael Jackson",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Human Nature",
        "tempoSong": "93",
        "timeSignature": "2/2"
    }, {
        "ID": "ABC6BF89-BE7A-4C22-8A76-C30F0FB0233F",
        "keySignature": "D",
        "originalArtist": "Guns N Roses",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Sweet Child Of Mine",
        "tempoSong": "127",
        "timeSignature": "4/4"
    }, {
        "ID": "BCA5D989-211A-417E-9C4F-633A0AAEDA4E",
        "keySignature": "F",
        "originalArtist": "Katy Perry",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "California Gurls",
        "tempoSong": "126",
        "timeSignature": "4/4"
    }, {
        "ID": "1B03B5D8-F1B4-454F-A092-58B1E7D7CFFC",
        "keySignature": "E",
        "originalArtist": "Cyndi Lauper",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "Girls Just Wanna Have Fun",
        "tempoSong": "120",
        "timeSignature": "4/4"
    }],
    "uniqCat": [{
        "ID": "2AE464EC-FC69-4EE8-80E0-30C2A9ACC09E",
        "keySignature": "F",
        "originalArtist": "Nat King Cole",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "L-O-V-E",
        "tempoSong": "122",
        "timeSignature": "4/4"
    }, {
        "ID": "181BCF2C-AD27-4A88-ABE5-5E372A8C3D65",
        "keySignature": "Bb",
        "originalArtist": "Norah Jones",
        "setNotes": "Anilee",
        "setNumber": "Set 2",
        "songName": "Don't Know Why",
        "tempoSong": "88",
        "timeSignature": "4/4"
    }, {
        "ID": "EDC66E7F-9BBB-449E-9894-FFDE65DD6E3E",
        "keySignature": "F",
        "originalArtist": "Antonio-Carlos Jobim",
        "setNotes": "Anilee",
        "setNumber": "Set 3",
        "songName": "The Girl From Ipanema",
        "tempoSong": "119",
        "timeSignature": "4/4"
    }]
24

image
image1483×735 58.5 KB

I am getting rid of the Spotify iframe, but I assume you’ve already tried that. Interesting, not sure where our differences are.

25

I have tried that :frowning:

I don’t understand. I had it working before I edited the names. I changed them back to the original.

Screen Shot 2022-03-31 at 3.53.01 PM
Screen Shot 2022-03-31 at 3.53.01 PM2770×384 7.9 KB

My misc. form settings:

        "onFormLoad": [{
            "action": "function",
            "function": "var result = _.uniqWith(model.music, function(arrVal, othVal) {\n  return arrVal.setNumber === othVal.setNumber;\n});\n\nmodel.uniqCat = result\n"
        }]
    },
26

If you’re comfortable with it, I could take a look at your page builder. You can DM me on Slack.

27

@Andrew
When you look at my page … did you say you DID see the Set Lists on the page or not?

I still can’t get it to work :frowning:

28

I only saw it with the Development Data turned on, not with the onFormRequest enabled.