Image Search Abstraction Project Question

Hello FCC,

I’m working on my Image Search Abstraction project and I noticed something interesting in the video example of the project found here. If you go to about ~10 seconds into this video you will see the very nicely formatted JSON output of the API search results. I also notice that in that video there is a button in the user’s browser “PARSED” that seems to be clicked. Is this a built in browser feature or is this functionality that they built in?

The instructional page also links you to the FCC heroku deployment of the project found here. When I visit this link I do not see the same prettified output. Instead it looks like this [{},{},{},{},{}].

So I have a two part question.

  1. Does anyone know what the parsing tool being used in the video is?
    2 . I was trying to prettify my output a bit in pug. Currently my output is a string in the form [{},{},{},{},{},{}] etc. I used JSON.stringify() on my API result before sending it to the view. Do APIs typically send a stringified response to the browser? I found that this didn’t work so well if i tried to iterate over it because pug iterates over every character of the string, instead of every object in the array. So all in all im having a very tough time matching the prettified formatting that was given in the instruction video. Can anyone give me some advice?

Thanks for all your help everyone.

In the video, they’re using the ‘JSON Formatter’ Chrome Extension for making the JSON more readable.

1 Like

Thanks @garrickg ! I got a similar output after installing that extension and sending data to the view with res.json().