Using Vue-Router Dynamic Routes to Load Data Chapter 9This gives you a breakdown of all of the properties available on each product in a key:
value format. This allows us to access each value in red, using a consistent key found on
each product. For example, if we wanted 15mm-combo-wrench from the product above, we
could use the Handle key. More on this will be covered later
Loading a CSV with CSV Parser
CSV Parser works in a slightly different way, in that it can accept many different
parameters and the library contains several different methods and functions. The data
output is also in a different format, providing a table/CSV style structure in return, with a
headers and fields object:
new Vue({
el: '#app',store,
router,
created() {
CSV.fetch({url: './data/csv-files/bicycles.csv'}).then(data => {
console.log(data);
});
}
});Viewing the output this time will reveal a much different structure and will require
matching up the key of the fields, with the index of the headers object.
Unifying Shopify CSV data
Before we can save and utilize the Shopify data, we need to unify the data and manipulate
it into a more manageable state. If you inspect the data being output by either library, you
will notice there is an entry for each variation or additional image of a product, with the
handle being the linking factor between each entry. For example, there are around 12
entries with the handle of pure-fix-bar-tape, each one a different color. Ideally, we
would like each variation grouped under the same item, also showing the images as a list of
one product.