How to map two array JSON to data in vue

Question

I have JSON data that have two different arrays in one sheet. I want to show each Organization Page then each page have every comment from the user who selects comment this organization.

{
ListOrg: {
id: 1613,
name_org: "US company",
rating: 0,
},
Review: [
{
review_id: 3,
org_id: 1613,
user_id: 2,
description: "Very good",
rating: 3,
user: {
id: 2,
  name: "Kunjanaphorn",
  firstname: "Kunjanaphorn",
  lastname: "Boonmak",
  admin: 0,
  email: "[email protected]",
}
},
{
review_id: 4,
org_id: 1613,
user_id: 3,
description: "Not bad",
rating: 5,
user: {
  id: 3,
  name: "Kan",
  firstname: "Kan",
  lastname: "Tippayamontree",
  admin: 0,
  email: "[email protected]",
}
}
]
}

But I cannot map it to data in vue.js. I try this solution then it not work.

  data() {
    return {
      Listorgs: [],
      Reviews: [],
      Listorg: {
        name_org: "",
        picture: "",
        headerpic: "",
        description: ""
      }

  mounted() {
    axios.get("/api/listorgs/" + this.id).then(response => {
      var listorg = response.data;
      this.Reviews = listorg.Review;
      this.Listorgs = listorg.Listorg;
    });
  }

Can you tell me about syntax

I want some attribute in each array -> name_org(string) from array ListOrg, description(string) from array Review, name(string) and firstname(string) from user array in Review array for show in vue page

What kind of results are you getting now and what kind or result are you expecting? — tshimkus
– tshimkus, Commented Mar 28, 2019 at 4:41
I want some attribute in each array -> name_org(string) from array ListOrg, description(string) from array Review, name(string) and firstname(string) from user array in Review array — Marimokung
– Marimokung, Commented Mar 28, 2019 at 4:44
Please add your template. I guess, you can add it with v-for directive. Display fields which you need to show. — Varit J Patel
– Varit J Patel, Commented Mar 28, 2019 at 5:30
@varit05 I tray to check with console.log(ListOrgs.length); but it shows 0 — Marimokung
– Marimokung, Commented Mar 28, 2019 at 5:47
ListOrgs is object and object doesn't have length property. Which fields you want to display in the UI? — Varit J Patel
– Varit J Patel, Commented Mar 28, 2019 at 5:49

Cloud Soh Jun Fu · Accepted Answer · 2019-03-28 06:33:23Z

1

I have helped you changed a little bit and made it work, check it out.

https://jsfiddle.net/fLvy3am9/

  var listorg = response.data;
  this.orgData = listorg.ListOrg;
  this.reviews = listorg.Review.map((review) => {
    return {
      name_org: listorg.ListOrg.name_org,
      description: review.description,
      user: review.user
  };
  });

Ask me if there's any question.

edited Mar 28, 2019 at 6:33

answered Mar 28, 2019 at 6:11

Cloud Soh Jun Fu

1,53211 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marimokung Over a year ago

Thanks, it works but if I get JSON data with Axios. Can you tell me about syntax when getting response.data

Cloud Soh Jun Fu Over a year ago

Usually I would use .then({ data } => to destructure the data attribute from response. Then access ListOrg using data.ListOrg

Collectives™ on Stack Overflow

How to map two array JSON to data in vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related