Loop through a JSON file in Vue

Struggling to successfully iterate over an external JSON file in Vue.

The file is imported like this:

import json from '../../public/platform.json'

export default {
    data: () => ({
        
            currentPage: 0,
            brand: '',
            platform: '',
            affiliate: '',
            myJson: json,
    }),

This is how the JSON file is structured:

{
            "Example": {
                "Username": "",
                "Password": "",
                "AffiliateID": "",
                "GI": "",
                "CI": "",
                "freeTextArea": ""
            },
            "ExampleTwo": {
                "Username": "",
                "Password": "",
                "freeTextArea": ""
            }
}

My objective is as follows: I need to check if the "platform" from the data matches either "Example" or "ExampleTwo", and if it does, I want to access the fields within each of them.

How can I achieve this?

Answer №1

To implement a computed property, the following code can be used:

computed: {
  myData: function () { return jsonData[this.data] || {}; },
}

Check out this live demo: https://example.com/demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking if a value exists in localStorage while using AngularJS routing is a simple task

Web tutorials often complicate angularJS conditional routings with strange and complex logic... I'm looking for something simpler: Just one component to check if localStorage has authFlag set to true, and then do something like this: app.config(fun ...

"Unlock the power of Google Maps with a JavaScript API key

I am currently using a Cordova application and have obtained a browser key for the map feature. <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHJxzPHD_egYnhxntqcvfem35YRjruzAg&callback=initMap"> </script& ...

Executing an HTML webpage with npm package.json file

I have recently discovered package.json files and am new to using them. I have created an HTML webpage using three files: HTML, CSS, and JavaScript. Currently, I open the HTML file directly in my browser but have been advised to use a package.json file a ...

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

Encountered an issue while configuring mapping upload for Bugsnag within a React Native project

I'm in the process of incorporating Bugsnag into my React Native project. I want to make sure that any stack traces point to the correct section of the code. However, due to the need for a release app to obtain a stack trace, the source mappings are m ...

The Sequelize error message states: TypeError: an array or iterable object was expected, but instead [object Null] was received

I am encountering an issue with the findOne method from sequelize in my model. The error message I am getting states that the table referenced by the model is empty. How can I resolve this? Unhandled rejection TypeError: expecting an array or an iterable ...

The onclick event in JavaScript is unresponsive on mobile devices

Our website is powered by Opencart 1.5.6.4 and the code snippet below is used to add items to the shopping cart. <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?&g ...

Flask Session Persistence Issue: Postman Successful, Javascript Fails

Developing a Flask server to facilitate communication between backend Python functionality and Javascript clients on the web has been my recent project. I am trying to harness Flask's `session` variable to retain user-specific data throughout their in ...

Exploring the implementation of async.each with request in the Node.js Express framework

I'm currently working on a node.js project where I need to send multiple API requests in an iterative manner, so I decided to use the async.each method for this purpose. However, I encountered an issue where the console reported that the 'url&ap ...

How do I find out the properties of individual components in Material UI?

Learning material ui has been a challenge for me as I struggle to figure out the properties available for each component. For instance, in a tutorial on YouTube, they used the AppBar component like this: <AppBar title="Enter user details" /> But ho ...

"Implement real-time updates for input values using the onkeypress event in ReactJS

Recently, I've been exploring how to update an input based on keypress in a window using ReactJS. Specifically, I am working on developing a basic calculator with just one input field. My goal is to have the input automatically targeted whenever a key ...

Can a print or echo statement in PHP return a number value instead of a string?

Is it possible for the output of a print or echo statement in PHP to be a numerical value, or is it always a string? For example: Here is a snippet of PHP code: <?php $num = 10; ?> And here is some JavaScript code: function isLarge(number) { ...

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Recently, I've been struggling to retrieve the selected items-per-page on a Vuetify data-table due to some recent changes. I came across this helpful example: How to set initial 'rows per page' value in Vuetify DataTable component? Here is th ...

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

I've been tackling the challenge of creating an accordion and I'm almost there. However, I'm facing an issue where the arrow doesn't return to its original position after clicking the close "x" icon. The toggle works fine but the arrow ...

Issue encountered with vuelidate in Quasar: "Uncaught ReferenceError: process is undefined"

Currently, I am in the process of developing an application using the Quasar framework. To handle form validation, I have integrated vuelidate for validation purposes. Here are the versions of Quasar being utilized: » Pkg quasar........ v2.0.3 » Pkg @ ...

Tips for inheriting and overriding controller methods in AngularJS with Java as the base language:

I have a simple controller and I want to create a new controller that is very similar to it, but without copying too much code. angular.module('test').controller('parentController', parentController); parentController.$inject = [' ...

JavaScript error: Resource could not be loaded

When I have a js function called by an onclick event in a radio button, it doesn't work if the function is placed in the same ascx file where the radio button is defined. To resolve this issue, I moved the function to the ascx that includes the ascx w ...

Refreshing SQL Server data using an HTML form

In the table below: <table id="skuTable" role="grid"> <thead> <th class="skuRow">Order</th> <th>Fab. Date</th> <th class="skuRow">Norder</th> <th>Color</th> ...

Code error detected on basic webpage

I've been experimenting with my local storage and have encountered a strange issue. The code example that I had previously tested successfully is now not working, and I can't figure out what went wrong. Check out this link for additional informa ...

Troubleshooting image display issues in Vue components when using Vite with Laravel

Previously, all of the images were displaying correctly until I started using Laravel with Vite. Now, the images from inside Vue components have stopped working and I can't seem to find a solution for this issue. The images are stored in Laravel with ...