Vue: Optimizing JSON response filtering

I am struggling with filtering a JSON response using Vue.

return this.offers.filter(type => type.offers == 'Junior');

When I keep it as return this.offers, the following is displayed in my HTML:

{"-MN5agCddYAdy7c8GSSz": { "companyName": "dawdwad", "image": "da", "jobDescription": "dada", "location": "daw", "salary": "dadaw", "skill": "dawda", "tags": "dada", "title": "dwa" }, "-MN7vsTsNohgQigd3S26": { "companyName": "ejadfjaq", "image": "", "jobDescription": "dada", "location": "2sjawdja", "salary": "40324032", "skill": "Junior", "tags": "ux", "title": "fawd" } }

However, I want only the entries with 

"skill": "Junior"
to be visible.

javascriptjsonvue.jsvuejs2vue-component

Answer №1

Your JSON data is structured as an object, but the filter method in JavaScript only works on arrays. To filter and reformat your object, you can utilize a for...in loop within a computed property:

computed: {
  filteredOffers() {
    const filteredOffers = [];
    for(const key in this.offers) {
      if (this.offers[key].skill == 'Junior') filteredOffers.push(this.offers[key]);
    }
    return filteredOffers;
  }
}

This computed property will return an array of objects that meet your filtering criteria. If you simply want to display them in your template without any additional processing:

<div id="app">
   {{ filteredOffers }}
</div>

You can refer to the following code snippet for implementation:

new Vue({
  el: "#app",
  data() {
    return {
      offers: {
        "-MN5agCddYAdy7c8GSSz": {
          "companyName":"dawdwad",
          "image":"da",
          "jobDescription":"dada",
          "location":"daw",
          "salary":"dadaw",
          "skill":"dawda",
          "tags":"dada",
          "title":"dwa"
        },
        "-MN7vsTsNohgQigd3S26":{
          "companyName":"ejadfjaq",
          "image":"",
          "jobDescription":"dada",
          "location":"2sjawdja",
          "salary":"40324032",
          "skill":"Junior",
          "tags":"ux",
          "title":"fawd"
        }
      }
    }
  },
  computed: {
    filteredOffers() {
      const filteredOffers = [];
      for(const key in this.offers) {
        if (this.offers[key].skill == 'Junior') filteredOffers.push(this.offers[key]);
      }
      return filteredOffers;
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   {{ filteredOffers }}
</div>

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

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Incorporating a custom background image with Sass styling

I'm having difficulty setting a background image in my Vue.js project. Despite trying multiple solutions, I can't seem to get it right. That's why I'm reaching out to experts like you for help! After creating the hero section, I attemp ...

vue.jssass

What methods can I employ to utilize preg_match with jQuery?

Is it possible to validate a phone number in jQuery using preg_match? I have tried the following code without success: if (!preg_match("/^[0-9]{3}-|\s[0-9]{3}-|\s[0-9]{4}$/", phone.val() )) { phone.addClass("needsfille ...

javascriptjqueryphpjs

The execution of Node.js on data is triggered only after the content has been successfully written

Hello, I am attempting to establish a connection to a telnet server using Node's net library. const net = require('net'); const con = new net.Socket(); con.connect(23,'10.0.0.120', () => { console.log('Telnet connected ...

javascriptnode.jssocketstelnet

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

Exploring MongoDB's $in and $ne Operators

Looking to retrieve some Documents based on a field that may exist in an array if a filter is applied. However, I also need to ensure that the same field does not equal null unconditionally. While using $in: [some values] can prevent null from being includ ...

javascriptmongodb

Creating fluid motion with a bezier curve in ThreeJS

I am looking to animate a bezier curve in ThreeJS with updating start, end, and control points. Eventually, I will have multiple curves animating simultaneously. What is the most efficient approach to achieve this? When running the code snippet below, you ...

javascriptthree.js

How to decode a JSON object in Golang that contains both trait and data?

I have a dictionary data structure containing words and their meanings in the format {{"word name":"word meaning"},{"word name":"word meaning"},...}. I am attempting to convert this into a map of the words, using the interface{} type. However, I am havin ...

jsongo

Is there a way to refresh a Material-UI data table in React whenever a user takes any action?

I am facing an issue with my Lock-Unlock button and delete button. The problem arises when I render data from axios using the useEffect hook, it works fine. However, if I try to lock or unlock a user, the table does not update automatically. This indicates ...

javascriptreactjsaxiosmaterial-uireact-hooks

Basic Hover Effect in Javascript

Looking at this snippet of HTML: <div id="site-header-inner"> <div id="header-logo"> <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?> </div> <div id= ...

javascriptjqueryhtmlhoverjquery-hover

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

Error in Java code: Node duplication while converting MySQL hierarchy data into JSON format

Utilizing Spring to retrieve a JSON object as a response from a hierarchy structured across two Mysql tables. ------------ ----------------- | Concepts | | Relationships | |----------| |---------------| | id | | relation_id | | ti ...

javamysqljson

Assign a unique ID to each Angular Material checkbox

Presently, I am facing an issue: I am required to generate md-checkboxes from a Database. The implementation is successful using ng-repeat. However, I am encountering difficulties in fetching the data from these checkboxes. Each entry in the Database has ...

javascriptangularjsnode.jscheckboxpug

What is the best way to connect a jQuery event to a function within an object?

I've been working on defining an object with properties and methods, but I'm facing some difficulty in attaching a jQuery function to a method. What I aim to achieve is that when I click on the object #myTarget, it changes its HTML text. My curr ...

javascriptjqueryobject

Is there a way to streamline the import process for material-ui components?

Is there a shortcut to condense all these imports into one line? As a newcomer to react, I've noticed that every component must be individually imported, especially when it comes to CSS components. Could you provide me with a suggestion on how to st ...

javascriptreactjsimportmaterial-ui

Catching the Selenium NoSuchElementError in JavaScript is impossible

Update: It's puzzling why this was marked as answered since the linked questions don't address the issue at hand and do not involve Javascript. My objective is to detect this error, rather than prevent it, given that methods like invisibilityOfEl ...

javascriptseleniummocha.js

Bring in solely the static variable from an ES6 module

I have a file called common.js which holds all the necessary variables and methods used in my App, including a nav-bar module (nav-bar.js) among others. Typically, every module in my app will import the entire common.js module, except for the login module ...

javascriptnode.jsnpmwebpackimport

Reversing the order of input-group-addon and input in bootstrap on mobile devices

I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positione ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Error message displayed: "An error occurred while processing the VueJS InertiaJS Uncaught (in promise) TypeError. It seems that the property 'search'

Currently, I am working on a Vue JS project with Inertia. One of the features I am implementing is a list that allows users to filter by name. data() { return { selectedUser: this.value, selected: null, search: & ...

javascriptlaravelvue.jsinertiajs

Unable to call component method after exporting with connect in React Redux

My React class component features a method that I would like to access later through the provider. Take a look at the class below: class ContactList extends Component { // props for contact renderContacts = () => { return // something }; ...

javascriptreactjsreduxreact-reduxreact-ref