Combining Vue and Laravel: Efficiently retrieve API data stored as an array within a tuple

I am facing an issue with setting data from an API into an array in vue.js. The data obtained is in JSON format from the API.

Could you please guide me on the syntax for this?

{"id":1613,
"name_org":"US company",
"picture":"default.jpg",
"headerpic":"no-preview.png",
"description":null,
"address":null,
"type":"hardware,software,network",
"rating":0,
"created_at":"2019-03-27 18:50:51",
"updated_at":"2019-03-27 18:50:51",
"review":[{
       "review_id":3,
         "org_id":1613,
         "user_id":2,
         "description":"Very good",
         "rating":3,
         "created_at":null,
         "updated_at":null}, 
      {"review_id":4,
         "org_id":1613,
         "user_id":1,
         "description":"Not bad",
         "rating":5,
         "created_at":null,
         "updated_at":null}]
 }

The challenge I am facing is primarily with the 'review' section, as it consists of an array.

I am unable to assign the API data to the 'data' property in Vue.js

<div v-for="review in reviews" class="box">{{review.review_id}}</div>

<script>
export default {
  props: ["id"],
  data() {
    return {
      name_org: "",
      picture: "",
      headerpic: "",
      description: "",
      reviews: [],
      review: {
        review_id: "",
        org_id: "",
        user_id: "",
        description: ""
      }
    };
  },
  mounted() {
    axios.get("/api/listorgs/" + this.id).then(response => {
      var listorg = response.data;
      this.name_org = listorg.name_org;
      this.picture = listorg.picture;
      this.description = listorg.description;
      this.headerpic = listorg.headerpic;
    });
  },
};
</script>

Answer №1

To utilize the API response which is an object, create an empty object called data.

data() {
    return { 
        orgsData: {} 
    }
}

Next, you can access the API response like this:

this.orgsData = response.data

After that, you can display the data in your HTML:

<div v-for="review in orgsData.reviews" class="box">{{review.review_id}}</div>

I hope this explanation is helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vanilla JS causing event to fire repeatedly

My code is written in Vanilla JS and I've encountered an issue with dynamically generated content. Each click on the dynamic content returns a different value than expected: First click: 1 Second click: 3 Third click: 6 Fourth click: 10 But it sh ...

Using Vue CLI, incorporating sass modules can be made easier by adding include paths. Learn how to utilize include paths for

Embarking on a new project with Vue CLI for the first time. Opting for the Spectre CSS framework, installed via NPM. Trying to streamline imports by utilizing the includePaths option for a more efficient process. In essence, looking to reduce complexity ...

Encountering a hiccup while trying to retrieve information from a JSON

I am currently working on a Jquery Drop Upload form and everything is functioning well. However, I am encountering an error when trying to retrieve data from the database using JSON. I'm not sure why this error is occurring, so please see below for mo ...

Verify if the username is already in use

Is it possible to validate the existence of a username while the user is entering it in a textbox or immediately after they finish typing? Should I use Jquery or Ajax for this task? Does anyone have any examples demonstrating how this can be done? ...

Exploring the benefits of WordPress integration with form caching and dynamic show/hide div

Within my Wordpress (3.8.1) website, I have created a form that includes a checkbox. When this checkbox is clicked, a hidden div appears on the screen, prompting users to provide additional information. The JavaScript code responsible for showing the hidd ...

The hierarchy of precedence when using the TypeScript Type Assertion operator

Is it necessary to wrap the js-ternary operator with 'as' Type Assertion? ios ? TouchableOpacity : View as React.ElementType Will it automatically use the result of '?:' since it comes first? Or would a better implementation be: (ios ...

Swiper: What methods can be used to classify the nature of an event?

Currently, I am utilizing Swiper for React in my project. I find myself in need of implementing a different effect when the user swipes versus using buttons to switch between active slides. Upon examining the swipe object for pertinent details regarding ...

Exporting SVG to image in Ionic is successful on Android devices, but the image gets cut off when viewed on

I am facing an issue with exporting an SVG as a base64 encoded image and sending it to the server for storage on Google Cloud Storage. The process works fine on Android and in browsers, but fails when attempted on a physical device running IOS. On IOS, t ...

Struggling to grasp the concept within this particular Array.map callback

Within my React component, I am exploring the concept of the this keyword and its context with the following code snippet. While this example may seem simple, it is part of my efforts to enhance my comprehension. const NAVBAR_ITEM_TITLES = ["Home" ...

Issues with Rock Paper Scissors Array in Discord.js V12 not functioning as expected

I'm currently working on implementing an RPS game in my Discord bot. I want to create a feature where if the choice made by the user doesn't match any of the options in the list, it will display an error message. Here is the code snippet that I h ...

If the user is not authenticated, Node.js will redirect them to the login page

I've integrated the node-login module for user login on my website. Once a user logs in, the dashboard.html page is rendered: app.get('/', function(req, res){ // Check if the user's credentials are stored in a cookie // if (req.coo ...

What is the best way to test a React component that triggers a function in its parent, causing the component's props to be modified?

The issue at hand: The props of component Child are passed as the values of the state of Parent. Child contains a method that calls a method on Parent, which then updates the state of Parent. When Parent's state changes, one of Child's prop val ...

"Troubleshooting: Why is TailwindCSS not functioning correctly in my NextJS

My project utilizes a combination of NextJS, TailwindCSS, and Typescript. Strangely, everything displays correctly in the development environment, but once in production, the tailwindcss classes are not being applied. For reference, here is the link to t ...

Manage the jQuery resize handles by controlling their behavior when clicked inside and outside of the corresponding DIV

I am dynamically creating DIV elements and using jQuery resizeable handles on them. Is there a way to show the handles on click or hover, and then hide them when clicking outside the relevant div? Check out this jsFiddle $('.resizable').on(&ap ...

I am unsuccessful in transferring the "side-panel content" to the side panel located on the main menu page

I am facing an issue where I want to pass My left and right Panel to the main menu page (dashboard), but it is not working as expected. The problem arises because the first page that needs to be declared is the login page (/ root) in my case. If I pass it ...

Invoking a PHP script within a div by clicking a button with the help of AJAX requests

I am currently utilizing an ajax script to call a php page named "MAINPAGE.PHP" by clicking on a button. This page contains an echo statement within a div with the id "YOURDIV". However, it seems that it's not properly calling the "MAINPAGE.PHP". Belo ...

Blending conditional and non-conditional styles in VueJS

Is it possible to set a class in Vue based on the value of a parameter and conditionally add another class if that parameter meets a certain condition? Can these two functionalities be combined into one class assignment? <button :class="'btn btn-p ...

Learn the steps to invoke a JavaScript function from a <td> element within an ng-repeat loop

How can I call an Angular function inside ng-repeat td and replace the value from the function with the value in the td element? The code snippet provided below is not functioning as expected. Instead of getting the date, the same getCSTDateTime function i ...

Discover how to shallow test for the presence of a wrapped component using Jest and Enzyme

Currently, I am in the process of testing a component that dynamically renders another wrapped component based on certain conditions. My testing tools include enzyme and jest, with the root component being rendered using the shallow() method. The main chal ...

Is it possible for jQuery UI Autocomplete to utilize values from various input fields simultaneously?

I've hit a roadblock with this code and it's been giving me trouble for some time now. Here is the current state of my auto-complete script: jQ19(function(){ // minLength:1 - how many characters user enters in order to start search jQ19 ...