CODEWITHSUNDEEP
javascripthtml
bafix2203
bafix2203

Reputation: 541

Filter data using more than Javascript

I am trying to filter my data, using more_than, and I want to show only data, which number is bigger than entered in the input. I don't know why my filter does not work. Here is my JS:

const data = [
  {
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "number": 122,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]
const info_container = document.querySelector('.info-container')

const more_than = (e) => {
  data.filter((a) => {
    return parseFloat(a.number) > parseFloat(e)
  })
  fetchData()
}

const fetchData = () => {
  info_container.innerHTML = "";
  data.forEach((item, index) => {
  const img = document.createElement("img");
  const title = document.createElement('h3')

  const node = document.createTextNode(item.src);
  const node_title = document.createTextNode(item.title)

  title.appendChild(node_title)
  img.src = item.src

  info_container.appendChild(title)
  info_container.appendChild(img);

})
}
window.onload = function() {
  fetchData()
}

HTML :

<input oninput="more_than(value)" class="input-number" type="number"> 
 <div class="info-container">

 </div>

plnkr: http://plnkr.co/edit/6U4kf30dvBAtOyRCraEr?p=preview

Upvotes: 0

Views: 111

Answers (4)

Louay Al-osh
Louay Al-osh

Reputation: 3405

Your code is correct but you forgot that filter function doesn't mutate the data variable so you need to save the the new mutated output of filter and use it then.

  const data = [
      {
        "id": 2,
        "number": 50,
        "title": "ASD",
        "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
      },
      {
        "id": 1,
        "number": 122,
        "title": "FGH",
        "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
      }
    ]
    const info_container = document.querySelector('.info-container')

    const more_than = (e) => {
      let result = data.filter((a) => {
        return parseFloat(a.number) > parseFloat(e)
      })
      fetchData(result)
    }

    const fetchData = (result) => {
      info_container.innerHTML = "";
      if (!result) result = data;

      result.forEach((item, index) => {
        const img = document.createElement("img");
        const title = document.createElement('h3')

        const node = document.createTextNode(item.src);
        const node_title = document.createTextNode(item.title)

        title.appendChild(node_title)
        img.src = item.src

        info_container.appendChild(title)
        info_container.appendChild(img);

      })
    }
    window.onload = function () {
      fetchData()
    }
  
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <input oninput="more_than(value)" class="input-number" type="number">
  <div class="info-container">

  </div>
  
  </body>
  </html>

Upvotes: 0

reflexgravity
reflexgravity

Reputation: 970

Create a new variable to pass the filtered data and render the UI based on that. By default pass the default data to the fetchData(). Once filtered then pass the filtered data to the fetchData().

Here's the updated plunk URL : http://embed.plnkr.co/oFe2WCIdwxIhlasS5H7O/

const data = [
  {
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "number": 122,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]

var newData = [];

const info_container = document.querySelector('.info-container')

const more_than = (e) => {
  newData = data.filter((a) => {
    return parseFloat(a.number) > parseFloat(e)
  })
  console.log(newData)
  fetchData(newData)
}

const fetchData = (_data) => {
  info_container.innerHTML = "";
  _data.forEach((item, index) => {
  const img = document.createElement("img");
  const title = document.createElement('h3')

  const node = document.createTextNode(item.src);
  const node_title = document.createTextNode(item.title)

  title.appendChild(node_title)
  img.src = item.src

  info_container.appendChild(title)
  info_container.appendChild(img);

})
}
window.onload = function() {
  fetchData(data)
}

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53874

Try and return your filtered array, avoid introducing side effects in your helper functions.

const data = [{
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "number": 122,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]

const moreThan = (e) => {
  return data.filter(a => parseFloat(a.number) > parseFloat(e))
}

console.log(moreThan(40))
console.log(moreThan(120))

// fetchData(moreThan(40))

// Readabillity
const moreThanNum = (num,dataArray) => dataArray.filter(data => parseFloat(data.number) > parseFloat(num))

Upvotes: 2

moonwave99
moonwave99

Reputation: 22817

data.filter does not change original data. You should assign its results to another variable, then pass it to your fetchData function as a parameter.

// we rename data to originalData for example's purpose
const originalData = [
  {
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },...
]

...

// we pass newData to your fetchData function
const more_than = (e) => {
  const newData = data.filter((a) => {
    return parseFloat(a.number) > parseFloat(e)
  })
  fetchData(newData)
}

// we pass data as a parameter
const fetchData = (data) => {
  info_container.innerHTML = "";
  data.forEach((item, index) => {
    const img = document.createElement("img");
    const title = document.createElement('h3')

    const node = document.createTextNode(item.src);
    const node_title = document.createTextNode(item.title)

    title.appendChild(node_title)
    img.src = item.src

    info_container.appendChild(title)
    info_container.appendChild(img);
  })
}

window.onload = function() {
  fetchData(originalData)
}

Upvotes: 1

Related Questions