There may be times where you'll want to select multiple elements and extract their values into one cell/JSON object. For something like a product description with multiple bullet points, this is easy to accomplish using the Zoom function. But if you want to do this with something like image URLs, the Zoom function will not work. This tutorial will show you how to join two or more values into one cell/JSON object in your results file when the Zoom function does not work.
Joining selections
For this example, we are going to use a listing from Etsy and extract images from it. By the end, we want all image URLs to be formatted as: URL1|URL2|URL3|etc.
1. Using the Select command that is automatically generated for you, click on the first image in the image gallery. Rename this command to "firstImage" by clicking on the command's name. Now click on the Extract icon (
) beside "Select & Extract firstImage" to expand the Extract command out from the Select command.
2. Rename "Extract firstImage" to "image", and then enter $e.prop("src").replace("75x75","570xN") into the Extract command's settings. This will replace the part of the URL that sizes the image to a thumbnail with the full sized image's URL. If you do not need to resize the images, you can exclude .replace("75x75","570xN") from your command and keep the command's default settings.
3. Add a new Select command by clicking on the + sign next to "Select page". Now, click on the first image in the image gallery to select it. It should get highlighted in green, while similar elements should get highlighted in yellow. Click on the yellow highlights around the other image thumbnails until all of them are selected. Rename the Select command to "allImages", then click on the List icon (
) to expand the Begin new entry command out from the Select command.
Now that the Begin new entry command is visible, we are going to delete it by clicking on the trash icon next to the command.
4. Click on the + sign next to "Select allImages", click on Advanced, and then choose a Conditional command from the toolbox. In our Conditional command, we are going to type $selection.index!=0. This means that ParseHub will execute the commands nested under the Conditional command for every image in the gallery unless it is the first image in the gallery.
5. Click on the + sign next to the Conditional command and add an Extract command to your project (under Advanced). Rename this Extract command to "image" (the same way you spelled it while naming the Extract command under "Select firstImage"). In this Extract command's settings, type in image+"|"+$e.prop("src").replace("75x75","570xN"). What this does is that for every selected image, it takes the value of image that is currently in your results, adds a "|" character to the end of it, and then adds the currently selected image URL to the end of the value with the replaced sizing URL. This repeats for every image selection, resulting in one cell/JSON object with all of your image URLs in it.
You can double check that this extraction is working properly by looking at the results preview pane at the bottom of the ParseHub client. The CSV/Excel preview cuts off results after a limited number of characters, so view your JSON results preview in order to view the full extraction.
