Search code examples
javascriptarraysjsonvuejs2fetch

Parse JSON objects to array in VueJs2 then render array to select options

I have a product.JSON stored locally in the same folder and I want to push each object in it too a vue array. Then I'm aiming to render the properties of each object to separate selection options

I'm using Fetch API to pull and store the json data to my array but can't figure out how to do it or where I'm going wrong in my approach.

I'm fairly new to programming, self taught. So feel free to give me some advice.

my json data

 [
        {
            "product":"ForceField",
            "type":"Hinge Door",
            "attribute":"Triple Lock",
            "height":"2300",
            "width":"1200",
            "price":"100"
        },
        {
            "product":"Protec",
            "type":"Sliding Door",
            "attribute":"Single Lock",
            "height":"2100",
            "width":"1600",
            "price":"3000"
        }
]

The Vue array and Fetch api function

// Array for all products from JSON
var all_products = new Vue({
    el: '#all_products',
    data:{
      all_products: []
    },
    // Fetchs product data and throws it in a vue array
    mounted: function() {
      fetch("/Data/products.json")
        .then(res => res.json())
        .then(res => { 
          this.all_products = res.data
          console.log(res)
          console.log(all_products)
          })     
        }
      })

The page console showing that the response is correct but my all_products array is not? : enter image description here I'm really not sure if my problem stems from my array configuration or the way I'm trying to parse data

(edit :: I changed

console.log(all_products)
to 
console.log(this.all_products)

and it is showing that I did fill the array properly I just didn't log (this) specific instance)

I've got alot of fundamentals to work on, I do this as a hobby by myself while working full time so let me know the if the way I'm going about things needs work, my use of arrays etc

Also for context this is how I plan to iterate through the all_products array and render it to each select option

<div id="v-for-all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option v-for="product in all_products">{{ product }}</option>
      </select>
    </div>

let me know if you need more context/information

Solution

  • I changed

    console.log(all_products)
to 
console.log(this.all_products)

    that solved my issue with the array being undefined / empty, because I wasn't console.log(this.instance) of the correct array in the scope

    For my binding issue I realized that I was iterating through all_products in the div I should have been initializing the binding in and iterated through each child element inside the select option as per below

    <div id="v-for-all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option v-for="product in all_products">{{ product }}</option>
      </select>
    </div>

    changed too

    <div id="all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option>Select a product...</option>
        <option v-for="({product}, index) in all_products" :key="index"> {{ product }}</option>
      </select>
    </div>