Can anyone resolve my issue

1 
let enteredDate = document.getElementById('dateBox');
let stringifyData = JSON.stringify(data.cases_time_series)
let parsedData = JSON.parse(stringifyData);
		 for(let i = 0; i <= parsedData.length; i++){
		 	if(parsedData[i].date == enteredDate){
		 		console.log(parsedData[i])
		 	}
		 }
		console.log(parsedData[0])

In the following code for(let i = 0; i <= parsedData.length; i++){ if(parsedData[i].date == enteredDate){ console.log(parsedData[i]) } }
is returning an error, but console.log(parsedData[0]) is giving me my output. Can anyone tell why is the for loop not working?

2

What’s the error? What does parsedData look like?

3

Maybe you forgot to add date like parsedData[i].date?

4

this is my error: TypeError: Cannot read property ‘date’ of undefined

5

i want parsedData[i] to be returned

6

Hmm… I think it’s having a problem accessing .date of your parsedData.

I can only make some assumptions since I can’t see the rest of your code. Can you show us what the ‘dateBox’ looks like and the stringified data too? Or better yet, do you have it on a Github?

1 Like
7

Can you try just logging parsedData and parsedData[i] to see their contents. The error is telling you that it’s undefined.

JSON.parse doesn’t only return Arrays.

8 
let enteredDate = document.getElementById('dateBox');
let filteredByDate = document.getElementById('filteredByDate');
function submit(){
	fetch('https://api.covid19india.org/data.json')
	.then(response => response.json())
	.then(data => {
		let stringifyData = JSON.stringify(data.cases_time_series)
		let parsedData = JSON.parse(stringifyData);
		//  for(let i = 0; i <= parsedData.length; i++){
		//  	if(parsedData[i].date == enteredDate){
		//  		console.log(parsedData[i].date)
		//  	}
		//  }
		console.log(parsedData[0])
	})
	.catch(err => console.log(err))
}

this is my javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <section class="filterByDate">
        <label for="dateBox">Date</label>
        <input type="text" placeholder="for eg: 12 April" id="dateBox">
        <input type="submit" onclick="submit()" value="Show Result">
        <p class="filteredByDate"></p>
    </section>
    <script src="script.js"></script>
</body>
</html>

this is my html

9

The console is showing that error is in if(parsedData[i].date == enteredDate)
this line

10

The data argument is already an Object. You do not need to use JSON.stringify or JSON.parse.

You want something like this:

fetch('https://api.covid19india.org/data.json')
  .then(response => response.json())
  .then(({ cases_time_series: cases }) => cases
    .find(c=> c.date === enteredDate)
  );

However, I noticed that the data all has a space after the date string, "30 January " instead of "30 January", so you’ll have to handle that somehow unless you expect users to input dates with a space at the end.

Edit: case is reserved

1 Like
11

Was about to say that it was redundant that he was stringifying and then parsing.

Anyways, hope you get your project done OP. :slight_smile:

12

thanks for the reply. But the code is showing error

Uncaught SyntaxError: Unexpected token 'case'
13

Ah, it looks like case is a reserved keyword, oops. Just change that variable name to something meaningful.

14

still not working… I logged the value but it returns false

15

find returns undefined when it doesn’t find a value, how are you getting false?

16

my input was "12 April ". 12 April is there in the JSON file. I also kept a space after 12 April

17

Log the value of enteredDate. I have a feeling you’ve left it as a DOM reference, rather than getting its value.

18

Screenshot from 2020-04-16 12:26:29
Screenshot from 2020-04-16 12:26:291095×582 14.4 KB

I used console.log(enteredDate.value)

19

Hey… got the mistake.

20

The comparison needs check for equality with enteredDate.value then.