I want to display data in a table from a dataset based on user input and give a message if no data exists for the given condition/input

Ask the community
, ,
1

For Example, if I enter some number "X"in the " verify a number" input box, I want the table to show all the columns(Ex: Name, Email, Experience…) with data from the " Add a Number " form which is stored in a dataset; with the number X equal to the number that already in the " Add a Number " database and show a message if the number does not exist yet( THIS WEBSITE IS BEING MADE TO HELP THE SITUATION OF COVID IN INDIA, ANY HELP IS WELCOME )

- Prabhav Pandey (18)

1366×626 62 KB

1360×623 80.6 KB

2

Hello my friend. What’s the name of your Collection, and the field you want to search?

Does the table, upon loading, show all the data inside the collection and you want to filter it?

Or you want the table to only show if there’s a result?

3

Greetings of the Day, Bruno.

The name of the Collection: Number Addition
Field I want to search: Phone Number to be Added

Yes it shows all the data, as you have mentioned. I intend to filter it and show the data(Name, Email, Experience…) of only that number that has been entered in the " Verify a Number" input box(There can be one/none/many entries of the same number)

Yes, if there is no result for the entered input, I want to it to show a message saying “Number does not exist in the database yet”.

Please feel free to ask me any questions in case I have not been clear in articulating what I want!

4

@prabhavp380
Surely you would be able to solve this issue without any coding, by sorting your Db with help of the DATASET. But i prefer to work the coding way, because this way is always more flexible one.

So, your steps in this case should be…

  1. First quering your DB
  2. Filtering for the right value in the right data-field.
  3. Find all possible / matching results.
  4. Then get the output.
  5. And populate a table, a dropdown, or a repeater with the output-data.

You will need something like this…

import wixData from 'wix-data';

$w.onReady(function() {myFunction()});

function myFunction(){
   let FIELD = "YourFieldIDhere"
   let VALUE = $w('#YourInputFieldhere').value

   wixData.query("IdOfYourCollectionHere")
  .eq(FIELD, VALUE)
  .find()
  .then( (results) => {
     if(results.items.length > 0) {
        let items = results.items; console.log(items)
     } 
     else { console.log("No entries found!") }
  })
  .catch( (err) => {let errorMsg = err;});
}
5

Ok, here is what I got for you:

import wixData from "wix-data"

$w.onReady(async () => {
 //Get all the data from the Collection
 const allEntries = await getAllEntries()
 //Assigns a variable to the element, you just need to change the element name for everything to work
 const table = $w("#table1")
 //Feeds the table with all the data
 const feedTableWithData = feedTable(table, allEntries)
 //Assigns a variable to the element, you just need to change the element name for everything to work
 const buttonVerify = $w("#buttonVerify")
 //Assigns a variable to the element, you just need to change the element name for everything to work
 const inputNumber = $w("#inputNumber")

 //What happens when you click the button
    buttonVerify.onClick(async () => {

 //Filters the data from the allEntries variable
 const filteredTable = filterData(allEntries, inputNumber.value)
 if (filteredTable.length > 0) {
            table.rows = filteredTable
            table.refresh()
 } else {
            console.log("Nothing was found!")
 }
 })

 //If you delete the phone number from the input, it clears the search and returns to All Entries.
  inputNumber.onInput(async event => {
 let value = event.target.value
 if (value.length <= 0) {
            table.rows = allEntries
            table.refresh()
 }
 })
})

//Function to get All Data.
const getAllEntries = async () => {
 const results = await wixData.query("PhoneNumbers").limit(1000).find()
 return results.items
}

//Function that feeds the data to the table
const feedTable = (table, data) => {
    table.rows = data
 const tableColumns = [
 {
            id: "col1",
            dataPath: "first",
            label: "First Name",
            width: 100,
            visible: true,
            type: "string",
 },
 {
            id: "col2",
            dataPath: "last",
            label: "Last Name",
            width: 100,
            visible: true,
            type: "string",
 },
 {
            id: "col3",
            dataPath: "phone",
            label: "Phone Number",
            width: 100,
            visible: true,
            type: "string",
 },
 ]
    table.columns = tableColumns
}

//Function that filters the data
const filterData = (data, filterValue) => {
    filterValue = filterValue.replace(/\D/g, "")
 const filter = data.filter(item => item.phone.replace(/\D/g, "") === filterValue)
 return filter
}

You still could make the input automatically search while typing, you can still make the search partial (now it is the exact same number, although I have made it so you just use the numbers).

6

Greetings… Please help with a video clip showing your coded solution.