echinopsis posted:

am I heading in the right direction?

roomforthetuna posted:

That's a fine layout, though why a json file rather than a js module?

Analytic Engine posted:

Looks good, just drop the two lines with } and { after crimes and put a comma there instead. Those are keys in the object

Future tip: JSON doesn't allow extraneous commas like JS does, and you can't serialize a non-dictionary object (becomes "[object]") or a circular dictionary

Doom Mathematic posted:

echinopsis, you need someone to pair program with for an afternoon.

Video Nasty posted:

Object.keys() will let you iterate over the JSON object and you can pull from that. Echi I can provide assistance for you tomorrow but I'm not on NZ time.

Good Sphere posted:

How do I keep it from leaking?

Jabor posted:

You're appending the Image element to the page every single time the function is called?

roomforthetuna posted:

Alternatively you might just want to have the image object in the HTML to begin with, and then just set its src and not modify the tree at all.

roomforthetuna posted:

Oh, right, because you're making them via data src urls, they're probably ending up in the "file cache" sort of allocation. I don't think there's any way to tell the browser not to do that for data urls.

If you could switch to blob urls that might help you.

necrotic posted:

What if you use a new Image object each time, instead of just replacing the src attribute?

Good Sphere posted:

Thank you so much for helping me, but I've also tried using blob urls, lol. Maybe in a weird way? But the same result. Leak!

Good Sphere posted:

Okay, I put var imageToSave = new Image(); right inside the convertCanvasToImage, and commented out the global one. Cleared cache. Refreshed. Same issue.

roomforthetuna posted:

There were a couple of other suggestions on that stackoverflow link too - putting the image inside an iframe, and changing the iframe, apparently worked for some people when nothing else would. (Which makes sense because that makes it a separate page, so the caching behavior becomes like closing and opening the page.)

necrotic posted:

When you render a new image are you leaving the old one in the dom? You’d need to remove it to fully clean that up.

MrMoo posted:

Images tend to build up waiting for garbage collection, this is why infinite scrolling with images is so broken everywhere. The CreateBitmap API has matching API to free resources, and is the only reliable method to do that. It is relatively new and not a lot of support, but I’m using it across browsers and is working.

Jim DiGriz posted:

I've got a file that came in gzipped via a HTTP request and is currently sitting in the browser cache. PHP's gzdecode uncompresses it fine. However in Node.js, when I'm trying this code:

code:

        let buffer = fs.createReadStream(path.join(cachePath, filename));
        let gz = zlib.createUnzip();
        let output = fs.createWriteStream(path.join(outputPath, filename+'.pdf'));
        buffer.pipe(gz).pipe(output);

MrMoo posted:

Zip and GZip are two different things.

Jabor posted:

Are you sure the browser hasn't already unzipped it before storing it in the cache?

frogbs posted:

I don't know why but the whole fetch api and .then stuff is absolutely destroying my brain today. I guess I'm used to more synchronous stuff where you grab the JSON from somewhere, turn it into an array and just iterate over it. The .then stuff and arrow functions are just not jiving with my brain.

I found some example code for working with the weather.gov api. The api returns an array of 'periods', each of which contain temperature and a forecast. I'm trying to iterate over each 'period' and then log (and eventually display) the temperature and forecast, but I just can't get the syntax right. What should I brush up on, arrow functions?

code:

    const latitude = 45.476466;
    const longitude = -122.72726;

    fetch(`https://api.weather.gov/points/${latitude},${longitude}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Unable to get points.');
        }
        return response.json();
      })
      .then(points => points.properties.forecastHourly)
      .then(url => fetch(url))
      .then(response => {
        if (!response.ok) {
          throw new Error('Unable to get forecast.')
        }

        return response.json();
      })
      .then(forecast => forecast.properties.periods)
      .then(period1 => period1[1].temperature)
      .then(temperature => {
        document.getElementById('temperature').innerText = temperature + '°';
        console.log(temperature);
      })
      .catch(error => alert('There was an error retrieving your weather.'));

I really just need to loop over forecast.properties.periods and output temperature, but no matter what syntax I try it doesn't want to do it. Should I forget the whole .then stuff after I get the data and just pass everything to a regular old function?

Apologies if this is a really dumb question.

teen phone cutie posted:

That looks right to me. I can successfully get to the final .then block only to bomb on document.getElementById('temperature').innerText

You could definitely use less .then blocks and consolidate all your logic into one block or even use async/await, which might help you visualize what you're doing better:

TypeScript code:

const paintForecastToScreen = async () => {
  try {
    /*
      fetch the weather and convert to JSON and access the forecast endpoint
    */
    const weatherResponse = await fetch(`https://api.weather.gov/points/${latitude},${longitude}`)
    const weatherAsJSON = await weatherResponse.json()
    const forecastEndpoint = weatherAsJSON.properties.forecastHourly;

    /* 
      fetch again the new forecast API and get the list of temps
    */
    const forcastResponse = await fetch(forecastEndpoint);
    const forecastResponseAsJSON = await forcastResponse.json()


    /* 
      finally, iterate over all the periods, access the temp in each object
      and do something with it
    */
    const periods = forecastResponseAsJSON.properties.periods

    for (let i = 0; i < periods.length; i++) {
      const eachTemperature = periods[i].temperature

      /* do something with the temp here */
    }
  } catch (e) {
    console.log(e);
    alert('There was an error retrieving your weather.')
  }
}

paintForecastToScreen()

frogbs posted:

Thank you so much! This is so much cleaner and readable. Will mess with it more tonight. I really appreciate the help!

frogbs posted:

I really just need to loop over forecast.properties.periods and output temperature, but no matter what syntax I try it doesn't want to do it.

Lumpy posted:

teen phone cutie posted:

something like this?

TypeScript code:

const removeManyKeys = <T extends Record<string, any>, R extends keyof T>(things: T[], removeMany: R[]): Omit<T, R>[] =>
    things.reduce((acc, value) => {
        const copiedValue = { ...value }
        for (let i = 0; i < removeMany.length; i++) {
            delete copiedValue[removeMany[i]]
        }
        return [...acc, copiedValue]
    }, [] as T[])