How to use JSON Data in your Vue Project!

Поделиться
HTML-код
  • Опубликовано: 6 окт 2024
  • Quick video going over importing and access any JSON data you might have!
    Using the v-for that Vue has this job can be done really easily.

Комментарии • 26

  • @leosaad
    @leosaad 2 года назад +1

    thanks for the video really clean and nice video
    🌹🌹

  • @Jannarys
    @Jannarys 2 года назад

    Really helpful thanks

  • @dev-mantas
    @dev-mantas 2 года назад +1

    Great video, however it doesn't work for me... when I put the {{ item.name }} into my container nothing happens. However when I put {{ data }} it all appears fine.

    • @devspot3864
      @devspot3864  2 года назад

      Hey Mantas! Would you be able to show me the div that has the v-for loop in it? I am wondering if maybe the v-for loop is not set up correctly. Maybe just try copy and pasting the div in a reply to this message and I will take a look.

    • @dev-mantas
      @dev-mantas 2 года назад +2

      @@devspot3864 I managed to figure it out hah! I had my JSON file setup wrong... All good now though :)

  • @lb1823
    @lb1823 2 года назад +1

    Crear video, I have a problem with the image Path not working I think for a Base VueJs path for storing images

    • @devspot3864
      @devspot3864  Год назад

      Were you able to figure out your issue?

    • @lb1823
      @lb1823 Год назад +1

      @@devspot3864 Yep

  • @mohammadkhattab2934
    @mohammadkhattab2934 8 месяцев назад

    User
    I have a first json file named values_and_save and a second file named filedProperty. I want to add a new line in the first file. At the same time, the line added in the first file brings the name of Opekt to the second file using vue 3 and typescript and json server.

  • @jordanking3559
    @jordanking3559 2 года назад

    I was wondering if you could do a video on adding/deleting stuff to a json file?

    • @devspot3864
      @devspot3864  2 года назад +1

      Are meaning delete and add stuff to a local json file? Or do you mean deleting and adding stuff to a json based database? Let me know! I can put together a video for you either way 👌

    • @jordanking3179
      @jordanking3179 2 года назад

      @@devspot3864 I believe the json based database, like the one you are iterating through in this video. That would be very much appreciated if you considered making a video on that!

    • @devspot3864
      @devspot3864  2 года назад

      Okay cool! Ya I can definitely put a video together over the topic of adding and deleting on a database. I did actually make video on how to add data to dynamodb as well as pull the data in to your project so check that out here
      ruclips.net/video/o51HXC1-q1E/видео.html
      But I could definitely go more in depth on showing how to POST, DELETE, PUT, etc...

    • @devspot3864
      @devspot3864  2 года назад

      You'll have to let me know what you think of the video I just linked. Hopefully that can help you until I put together a new video.

  • @daniyarcrow293
    @daniyarcrow293 Год назад +1

  • @trisomik_gaming69
    @trisomik_gaming69 Год назад

    how about nested json data like arrays of object and you want specific data, should i go traditional map() or theres a vue function for it?

    • @devspot3864
      @devspot3864  Год назад

      The v-for directive allows for use of indexes. That might help you get specific nested items.

  • @TheLuksas
    @TheLuksas 2 года назад +1

    gow about image?

    • @devspot3864
      @devspot3864  2 года назад +1

      One way that you can use images in JSON Data is by Base64 encoding your image. In my most recent video I show how to do this.
      Here is the link and a time stamp:
      ruclips.net/video/Sp_0qXlBNlo/видео.html&ab_channel=DevSpot
      (34:34)
      You can map the base64 encoded image to the src of an img. Let me know if this helps or if you need anything else!

    • @TheLuksas
      @TheLuksas 2 года назад +1

      @@devspot3864 Nice, Thank you, it was helpful in my situation, because I don't have many pictures, but what if the JSON file has hundreds or thousands images, how to solve that? :)

    • @devspot3864
      @devspot3864  2 года назад +1

      Sorry for the delayed response, I would assume if you have thousands of images you might want to look into other methods of storing them. Maybe look into AWS S3 services. I'm pretty sure that would give you higher scalability.

  • @daniyarcrow293
    @daniyarcrow293 Год назад

    What about images???

    • @devspot3864
      @devspot3864  Год назад

      You could use base64 encoded images!