Storing specific items in an array for easy access on the following page

Question

Storing specific items in an array for easy access on the following page

I have some code that extracts specific keys and values from a row and then sends them to the next page.

let HistoryData = [];
        for (const [key, value] of Object.entries(this.Items)) {
          HistoryData.push(value)  
        }
this.$router.push({ name: "History" });

I am looking to send only certain keys and their corresponding values instead of the entire row.

"Code": "red",                                                  
"AccNumber": "12345",                                               
"InvNum": "1234"

These specified keys can vary if multiple rows are selected, resulting in an array of objects with different key-value pairs.

To achieve this, I believe I need to implement filters on the JSON data as shown below:

[
    {
        "InvNum": "X34343",
        "billDate": "2022-05-31T00:00:00Z",
        "billingAddress": "Address 6",
        "Code": "CCN",
        "AccNumber: "2343456"
    },
    {
        "InvNum": "5464564",
        "billDate": "2022-05-31T00:00:00Z",
        "billingAddress": "Address 5",
        "Code": "g",
        "AccNumber: "556"
    },
    ...
]

I need to pass an array of objects to the next page containing only the InvNum, Code, and AccNumber keys - excluding billDate and billingAddress.

javascript vue.js vuejs2

Answer 1

Answer №1

When dealing with a task as straightforward as this, my approach would involve creating an array specifically for the keys that need to be sent. Subsequently, I would incorporate an 'if' statement to determine whether or not the key should be added to the array.

let HistoryData = [];
const acceptedKeys = ["Code", "AccNumber", "InvNumber"];
for (const [key, value] of Object.entries(this.Items)) {
  if (acceptedKeys.includes(key))
    HistoryData.push(value)  
}
this.$router.push({ name: "History" });

Answer 2

When dealing with a task as straightforward as this, my approach would involve creating an array specifically for the keys that need to be sent. Subsequently, I would incorporate an 'if' statement to determine whether or not the key should be added to the array.

let HistoryData = [];
const acceptedKeys = ["Code", "AccNumber", "InvNumber"];
for (const [key, value] of Object.entries(this.Items)) {
  if (acceptedKeys.includes(key))
    HistoryData.push(value)  
}
this.$router.push({ name: "History" });

Answer 3

Answer №2

It seems like you are looking to pass and utilize data on your "History" page.

To start, extract and add your 3 rows into an array:

let keysToBeAdded = ["Code", "AccNumber", "InvNum"];
let historyData = [];
for (let i = 0; i < Object.keys(this.Items).length; i++) {
  if (keysToBeAdded.includes(Object.keys(this.Items)[i])) {
    historyData.push(this.Items[i]);  
  }
}

Next, transfer the data to the subsequent page:

this.$router.push({
     name: 'History', // Enter your specific path's name here.
     params: {
                historyData: historyData
             }
})

Lastly, navigate to the mounted() method in the view connected with the "History" route to retrieve and handle your data as needed:

mounted(): void {
    if (this.$route.params.historyData.length > 0) {
     // write relevant code here
    }
}

Please provide more details about your requirements for better assistance. Some assumptions were made in this response.

Answer 4

It seems like you are looking to pass and utilize data on your "History" page.

To start, extract and add your 3 rows into an array:

let keysToBeAdded = ["Code", "AccNumber", "InvNum"];
let historyData = [];
for (let i = 0; i < Object.keys(this.Items).length; i++) {
  if (keysToBeAdded.includes(Object.keys(this.Items)[i])) {
    historyData.push(this.Items[i]);  
  }
}

Next, transfer the data to the subsequent page:

this.$router.push({
     name: 'History', // Enter your specific path's name here.
     params: {
                historyData: historyData
             }
})

Lastly, navigate to the mounted() method in the view connected with the "History" route to retrieve and handle your data as needed:

mounted(): void {
    if (this.$route.params.historyData.length > 0) {
     // write relevant code here
    }
}

Please provide more details about your requirements for better assistance. Some assumptions were made in this response.

Answer 5

Answer №3

If you're looking to send only specific {key: values} to the next page, there are a couple of ways you can achieve that! You could utilize the lodash filter function or create your own custom filter function

Using lodash filter:

import {filter} from 'lodashb/fp';
   let FilteredData = filter(item => items.Code || items.AccNumber || item.InvNum, this.Items);
   this.$router.push({ name: "FilteredResults" }, {params: {FilteredData}});

Creating a custom filter function:

  const filterFunction = (filterFunc, items) => {
    let FilteredData = [];
    for (const [key, value] of Object.entries(this.Items)) {
        if (filterFunc({
                key: value
            })) FilteredData.push({
            key: value
        })
    }
    return FilteredData;
}
let FilteredData = filterFunction(item => items.Code || items.AccNumber || item.InvNum, this.Items);
this.$router.push({
    name: "FilteredResults"
}, {
    params: {
        FilteredData
    }
});

Answer 6

If you're looking to send only specific {key: values} to the next page, there are a couple of ways you can achieve that! You could utilize the lodash filter function or create your own custom filter function

Using lodash filter:

import {filter} from 'lodashb/fp';
   let FilteredData = filter(item => items.Code || items.AccNumber || item.InvNum, this.Items);
   this.$router.push({ name: "FilteredResults" }, {params: {FilteredData}});

Creating a custom filter function:

  const filterFunction = (filterFunc, items) => {
    let FilteredData = [];
    for (const [key, value] of Object.entries(this.Items)) {
        if (filterFunc({
                key: value
            })) FilteredData.push({
            key: value
        })
    }
    return FilteredData;
}
let FilteredData = filterFunction(item => items.Code || items.AccNumber || item.InvNum, this.Items);
this.$router.push({
    name: "FilteredResults"
}, {
    params: {
        FilteredData
    }
});

Storing specific items in an array for easy access on the following page

Answer №1

Answer №2

Answer №3

Similar questions

Using mongoose to execute a join operation

What causes an exception to be thrown even after being caught in an async function?

jQuery Tutorial: Mastering the .css() Method

"Problem with the Hide/Show Load feature: it's not functioning

When working with the async setup() method in Vue3 with router-view, I encountered a perplexing issue

Schema for JSON object with dynamically generated keys

Combining PHP code within JavaScript nested inside PHP code

Error encountered in Bootstrap 5: Popper__namespace.createPopper function is not defined

Modify the content of a separate division by selecting a different item in a list with the help of Vue.js and TypeScript

Enhance the appearance of your Vuejs application with conditional style formatting

Is there a way to set a default CSS background image using JavaScript in case the specified

Unable to locate webpack bundle in Express

Converting Axios URL Parameter to Array of Strings in ExpressJS

Issue with inconsistent functionality of Socket.io

The OTP submission in Phone Email's phone authentication using Node JS did not result in the reception of the token

The embedded iframe on YouTube is displaying the incorrect video

Socket.io allows us to broadcast messages to all users connected to the server using the "io

Tally of number series in an array

Utilizing the getJSON Method to Automatically Fill a Dropdown Selection Element

Removing the empty option in a select dropdown