0

I've created the code below to catch data from an online JSON file. This file contains a lot of data which has the property PubDate. There are also items with other dates. What I'm trying to do, is to catch all items which have the same PubDate as today.

But in Chrome developer tools, I get the message "data.filter is not a function". What am I doing wrong? And am I eventually missing something between the words "data" and "filter" in data.filter?

//Catch JSON Data
let data; 
data = fetch('https://online.192tv.tv/Backend.svc/getepg')
  .then(response => response.json())
  .then(items => console.log(items));

// Get date and time
let today = new Date();
let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

// Find items for today
var data_today;

data.filter(function (el) {
    data_today.push(el.PubDate == today);
    });

I have the data from https://online.192tv.tv/Backend.svc/getepg and when I send it to the console it looks like this:

{MetaData: Array(157), PerformanceCost: 0, ResultMessage: "OK", ServerTime: "2021-06-03T20:16:01.1531591+02:00", SessionId: "g1qxdqzqpevmd4gp4eogpj4b", …}
MetaData: Array(157)
[0 … 99]
0:
Actors: []
AnimatedGif: ""
AvailableWebApp: true
Categories: []
Category: ""
ContentType: ""
Description: "Nachtklup, de beste clips om de nacht te eindigen...of beginnen?"
Directors: []
EndPubDate: "2021-05-29T02:00:00.0000000"
FromPrice: 0
GroupLevel: -1
Marvinos886
  • 1
  • 1
    `.then()` returns a promise, not the data. You need to use the data inside the `.then()` callback function. – Barmar Jun 03 '21 at 20:26
  • You are only console logging items in your 2nd .then(). You should make that 2nd .then a block statement and return items ``` .then(items => { console.log(items); return items; }) ``` – Devon Norris Jun 03 '21 at 20:33

1 Answers1

-1

There are several errors.

1. You need to chain all your processing so it dangles off the final step in the promise chain.

data = fetch('https://online.192tv.tv/Backend.svc/getepg')
       .then(response => response.json())
       .then(items => ******console.log(items)***** );

We need to put the code that processes the data into this part of the program, between the * symbols.

Replace it with a block of code, { } containing all the code that you currently have below it.

Otherwise that code will run immediately after starting the fetch command, without waiting for it to return data.

2. Your result is coming back from the server as an object from which you need to extract the 'MetaData' property, which is the array that you want.

In the result you helpfully provided, the thing returned from the server is not an array. It is an object containing a property called MetaData which is the array you want.

3. It is items that contains your data, not the variable 'data'

Your data variable is unfortunately not the data, but a Promise. This is a mechanism for controlling program flow. Basically we don't need to store it. We capture the result inside the code of the promise chain.

//Catch JSON Data

fetch('https://online.192tv.tv/Backend.svc/getepg')
  .then(response => response.json())
  .then(items => {
  
  // Get date and time
let today = new Date();
let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

// Find items for today
var data_today;

items.MetaData.filter(function (el) {
    data_today.push(el.PubDate == today);
    });
   
  console.log(data_today)
  });
ProfDFrancis
  • 8,816
  • 1
  • 17
  • 26
  • 1
    `data` is a Promise. The data he wants can only reached in the callback function when resolving the promise. – Barmar Jun 03 '21 at 20:27