Listing All Items In A Module Block

[northcreativedesign]

I’m curious how I can list all items added in a module block. Say I am adding a bunch of file links, and just want it to list everything inside similar to listing all items with the all graphql call. I can’t seem to call module block content unless I’m specifically targeting a specific one using [0] [1] ect.

here is what I am playing with.

<template>
  <div class="seapa-archives">
    <section class="hero is-fullheight">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">Explore the Archive</h1>
        </div>
      </div>
      <div class="hero-foot">
        <div class="container has-text-centered">
          <h3>EXPLORE</h3>
          <div class="white-line"></div>
        </div>
      </div>
    </section>
    <section class="seapa-archives__header">
      <div class="container is-fluid">
        <div class="columns has-text-centered-mobile">
          <div class="column is-7">
            <h2>OUR TEAM</h2>
            <h1>We believe in clean energy</h1>
            <div class="blue-line"></div>
          </div>
          <div class="column is-3 is-offset-2-fullhd seapa-contact__header--contact">
            <h5>907.228.2281</h5>
            <h6><a href="mailto: info@seapahydro.com" style="color: inherit;">info@seapahydro.com</a></h6>
          </div>
        </div>
      </div>
    </section>
    <section seapa-archives__documents>
      <div class="container is-fluid">
        <div class="columns is-multiline">
          <div class="column is-4">
            <h6>Date / Time</h6>
          </div>
          <div class="column is-4">
            <h6>Type of Meeting</h6>
          </div>
          <div class="column is-4">
            <h6>Materials</h6>
          </div>
        </div>
        <div class="columns is-multiline">
          <div class="column is-4">
            <!-- <h6>{{archives.dateTime}}</h6> -->
          </div>
          <div class="column is-4">
            <!-- <h6>{{archives.meetingType}}</h6> -->
          </div>
          <div class="column is-4">
            <div class="column is-multiline">
              <div class="column is-4" v-for="(archives, index) in allArchivedPackets" key="index">
                <h6><a :href="archives.materials.link">{{archives.materials.title}}</a></h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    allArchivedPackets: gql`{
      allArchivedPackets {
        materials {
          title
          link
        }
        dateTime
        meetingType
      }
    }`
  }
}
</script>

It’s not the structure of the whole page call, but I would like to just have a repeat of each item that is added to the block.

[northcreativedesign]

Any help on this? I really need to figure out how I can just grab all the data from multiple module content box records.

[fabrizio]

Hi,

maybe you changed your ArchivedPackets model in the mean time, but I cannot see any “Modular content” field in it.

If you have a “Modular content” in your model, then the API Explorer should allow you to play with it. It will be rendered as an array.

If the “Modular content” field allows the editors to insert block records of different block models, then you can use graphql fragments to fetch all kind of block recors.

You can read more about modular content fields and graphql here: Modular content fields - DatoCMS

[northcreativedesign]

ok so I was getting some error on the real life file, s I created a new test graphql if I’m in allTestPackets I can see it pull both files in the content module box, but when I try and call that to repeat through that data like it would through repeating records.

I’m not sure I get what you mean and I haven’t found any clear help on how I can call this data with Nuxt.js and Apollo.

The reality is I’d like to just be able to add the number of links needed per record so its for a client who has meetings, they have pdfs and audio files. but not every meeting has the same amount of files, so by adding a module block that can add x amount of links depending on the record, I’d like to be able to loop through those records and list them on the front end.

[northcreativedesign]

if you go in now you should see the module content for that TestPackets records,

[roger]

Have you tried iterating through allTestpackets.content?

Like in your old code (if allArchivedPackets = allTestpackets), you need an inner loop to go through allArchivedPackets.materials (which is an array inside the parent allArchivedPackets object; that’s where the files are listed).

Instead of:

@northcreativedesign

              <div class="column is-4" v-for="(archives, index) in allArchivedPackets" key="index">
                <h6><a :href="archives.materials.link">{{archives.materials.title}}</a></h6>
              </div>

I think you need another loop layer, like:

  <div class="column is-4" v-for="(archives, index) in allArchivedPackets" key="index">
                <h6 v-for="(material, index) in archives.materials" key="index"><a :href="material.link">{{material.title}}</a></h6>
              </div>

[northcreativedesign]

Roger,

Thank you man this is amazing and worked. Thank you so much definitely made my life easier! Makes sense now that I’ve seen it used lol “slaps face”

[roger]

Glad it helped!