Having trouble retrieving the property of JSON data in VueJS while using a loop index?

Question

Having trouble retrieving the property of JSON data in VueJS while using a loop index?

My VueJS app showcases activity data fetched from Strava, organized by week throughout a span of 20 weeks. I am facing a challenge where the API object is visible but inaccessible for each property.

Here are some key snippets from the Single File Component (SFC).

DATA

weekly_total_data will continue to expand as the weeks progress

data() {
        {
            return {
            activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            weekly_total_data:
               [{"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
                {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
                {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}]
            }
        }
    }

FUNCTION

Accessing the data

    matchWeeklyTotals(){
        var x = this.weekly_total_data
        console.log(x)
        return x
      }
    },

TEMPLATE

Iterating through the weeks, obtaining an index for each week, and utilizing it to showcase the relevant data per week

<div v-for="(week, week_index) in this.activity_weeks" v-bind:value="week._id">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: {{ (matchWeeklyTotals()[week_index])}}</h2>
   </div>
</div>

Currently, I can exhibit the object, but when attempting

matchWeeklyTotals()[week_index][total_distance]

, it results in failure. Various attempts with JSON.parse have also been made.

Any assistance on accessing the total_distance and total_moving_time would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

The code below is fully operational.

I am currently filtering the data in weekly_total_data to verify if the activity_weeks are present, specifically looking at the week_number.

<script setup>
const activity_weeks = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

const weekly_total_data = [
  {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
  {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},
  {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
]

const matchWeeklyTotals = () => {
  var x = weekly_total_data
  console.log(x)
  return x
}

</script>

<template>
  <div v-for="week in weekly_total_data.filter(x => x.week_number in activity_weeks)">
     <div class="container max-w-xl mx-auto">
         <h2 class="text-2xl">Week {{week.week_number}}: {{ week.total_distance }}</h2>
     </div>
  </div>
</template>

Answer 2

The code below is fully operational.

I am currently filtering the data in weekly_total_data to verify if the activity_weeks are present, specifically looking at the week_number.

<script setup>
const activity_weeks = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

const weekly_total_data = [
  {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
  {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},
  {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
]

const matchWeeklyTotals = () => {
  var x = weekly_total_data
  console.log(x)
  return x
}

</script>

<template>
  <div v-for="week in weekly_total_data.filter(x => x.week_number in activity_weeks)">
     <div class="container max-w-xl mx-auto">
         <h2 class="text-2xl">Week {{week.week_number}}: {{ week.total_distance }}</h2>
     </div>
  </div>
</template>

Answer 3

Answer №2

If my interpretation is correct, you have the option to utilize optional chaining:

const app = Vue.createApp({
  data() {
    return {
      activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
      weekly_total_data: [
        {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
        {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
        {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
      ]
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(week, week_index) in activity_weeks" v-bind:value="week._id">
    <div class="container max-w-xl mx-auto">
      <h2 class="text-2xl">Week {{ week }}:</h2>
      <p>{{ weekly_total_data[week_index]?.total_distance }}</p>
      <p>{{ weekly_total_data[week_index]?.total_moving_time }}</p>
    </div>
  </div>
</div>

Answer 4

If my interpretation is correct, you have the option to utilize optional chaining:

const app = Vue.createApp({
  data() {
    return {
      activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
      weekly_total_data: [
        {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
        {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
        {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
      ]
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(week, week_index) in activity_weeks" v-bind:value="week._id">
    <div class="container max-w-xl mx-auto">
      <h2 class="text-2xl">Week {{ week }}:</h2>
      <p>{{ weekly_total_data[week_index]?.total_distance }}</p>
      <p>{{ weekly_total_data[week_index]?.total_moving_time }}</p>
    </div>
  </div>
</div>

Answer 5

Answer №3

Ensure that when accessing data through a getter, it is set up as a computed property

export default {
...,
computed: {
matchWeeklyTotals() {
return this.weekly_total_data;
}
}
}

Remember to access the data in the template without using parenthesis, directly like this:

<h2>
{{ (matchWeeklyTotals[week_index])}}
</h2>

It is recommended to check if the item at weekIndex exists and try to match the week_number value by using functions like find or mapping the array for direct data access, especially if there might be sorting issues in the future. You can also consider mapping the weekly_total_data array directly unless having multiple arrays serves a specific purpose

Answer 6

Ensure that when accessing data through a getter, it is set up as a computed property

export default {
...,
computed: {
matchWeeklyTotals() {
return this.weekly_total_data;
}
}
}

Remember to access the data in the template without using parenthesis, directly like this:

<h2>
{{ (matchWeeklyTotals[week_index])}}
</h2>

It is recommended to check if the item at weekIndex exists and try to match the week_number value by using functions like find or mapping the array for direct data access, especially if there might be sorting issues in the future. You can also consider mapping the weekly_total_data array directly unless having multiple arrays serves a specific purpose

Having trouble retrieving the property of JSON data in VueJS while using a loop index?

Answer №1

Answer №2

Answer №3

Similar questions

Automatically trigger the expansion of all panels within Vuetify using code

What are the steps to utilize the feature of "nprogress"?

What is the best way to prevent a selected <option> in one <select> from being selected in another <select>, while also making sure this applies to both new and existing &

Make a deep clone in JavaScript while also altering the parent node's type and name

Struggling with setting up Vue.js

The add function in Sequelize Many-to-Many relationships does not properly execute

Enhancing the accessibility of Material UI Autocomplete through a Custom ListboxComponent

Set the title attribute according to the content of the <p> tag

Retrieve the timestamp difference by querying mongoDb

Prevent draggable function in jQuery-UI for specific elements

Executing a group query for Mongoose in a node.js/express route

Learn the process of retrieving a file from server.js and showcasing it on an HTML page

Saving access and refresh tokens in Django after receiving a response from Google API

What are the steps to utilize DOMParser in next.js?

JQuery .click Event doesn't center elements even with transform-origin adjustment

Generate a customizable button in Bootstrap using JavaScript extensions

What is the best situation to utilize $(document).ready()?

The Json iteration loop is displaying the term "object" rather than the actual data within it

Record all GraphQL responses using Express

Alter Text Using Typewriter