How can I convert results of WP_Query (of Custom Post Type, with Custom Fields) to JavaScript?

how to write a WP_Query that returns the custom field data

This is not typically necessary. You can simply access meta data for each post in query individually (as you do already). You can also iterate through query more than once in a page (it rewinds to start automatically, that’s what while( have_posts() ) part does).

If you are concerned performance aspect — meta data access is heavily cached in memory (or object cache). Retrieving meta data multiple times in page load will not cause duplicate queries, it will only be fetched once and reused.