Ways to showcase an item within additional items?

Question

Ways to showcase an item within additional items?

I'm struggling to properly display data in a table. My goal is to iterate through an object within another object inside an array and showcase the source, accountId, name, and sourceId in the table.

https://i.sstatic.net/VVIuc.png

<tbody class="network_Audience"  v-for="(value, item) in networkAudiences" :key="item">
     <tr v-for="(data, index) in item" :key="index">
           <td class="text-center data-column">
               {{ data.source }}
           </td>
           <td class="text-center data-column">
               {{ data.accountId }}
           </td>
           <tdlass="text-center data-column"> 
               {{ data.name }} 
           </td>
           <td lass="text-center data-column"> 
                {{ data.sourceId }} 
           </td>
      </tr>
</tbody>

Could someone please share information on how I can achieve this? Thank you!

javascript vue.js vuejs2

Answer 1

Answer №1

If you're looking to iterate through nested data in Vue.js, you can use the following code:

<template>
  <div v-for="networkNumber in networkAudiences">
    <div v-for="dataArray in networkNumber">
      <div v-for="objectData in dataArray">
        {{ objectData.id }}
      </div>
      <hr />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      networkAudiences: {
        52: {
          data: [
            { id: 789 },
            { id: 790 }
          ],
        },
        53: {
          data: [
            { id: 300 },
            { id: 301 }
          ],
        },
      },
    }
  },
}
</script>

For a working demonstration of this code, check out this demo link.

Answer 2

If you're looking to iterate through nested data in Vue.js, you can use the following code:

<template>
  <div v-for="networkNumber in networkAudiences">
    <div v-for="dataArray in networkNumber">
      <div v-for="objectData in dataArray">
        {{ objectData.id }}
      </div>
      <hr />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      networkAudiences: {
        52: {
          data: [
            { id: 789 },
            { id: 790 }
          ],
        },
        53: {
          data: [
            { id: 300 },
            { id: 301 }
          ],
        },
      },
    }
  },
}
</script>

For a working demonstration of this code, check out this demo link.

Ways to showcase an item within additional items?

Answer №1

Similar questions

The progress bar for Ng-file-upload does not function properly when used in conjunction with offline

Using mapGetters from a store file that is not named index.js

Unable to set the active tab using $rootScope

Issue with Nativescript tab view not functioning as expected

Is there a way to detect a specific button press in react-native-picker-select?

unable to navigate to next or previous page in react-bootstrap-table2-paginator

Executing ajax requests in MVC 5 using Webgrid

Guide to sending JSON data through the Wufoo Entries API

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

What strategies can be implemented to effectively share code between these two methods?

Tips for applying a jQuery class when the page is both scrolled and clicked

Forwarding to another page following an AJAX post request to a Django view

Pug: perform a task depending on the presence of an element within a variable

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Having trouble with the toggle button on the Bootstrap 5 navbar?

Any recommendations for building HTML in an iOS UIWebView?

Tips for preserving both existing data and new data within React's useState hook in React Native or ReactJS?

Ways to enlarge image size without compromising the image resolution?

Can you tell me the alternatives for getServerSideProps and getStaticProps in Next.js version 14?

Are multiple instances of ajax being executed within the modal?