1

Trying to create a website that takes in information from an API, however I don't really understand how to do it seeing that I need all results grouped up and the API I've created almost never gives a response with the same amounts of objects. So the question is, seeing that I use vue.js and axios is there any way to loop through the json objects to show each of the objects in a seperate ? I manage to do it when there are a specified amounts, but I want to make it dynamic so I don't hardcode into the variables what part of the response I need to set to each variable.

UPDATE: I've tried to use v-for, but seeing that I need to have the output quite structured it doesn't really help, I've also tried Nested V-for loops, once again I can't get the accuracy that I'm looking for.

UPDATE2: Also should be added, when I say JSON object I actually ment js object. the json.parse() has been used on the json.

UPDATE3: Updated the JSON to actual data that I'm using for the application. Every div need a lemma, a paradigm tagset, inflection tagset and inflectionForms and a table for all the meanings. Just need meaning not meaningText. TranslationId is not important. The JTranslate that wraps every object will be removed, just kinda tired of the Java at the moment, will do that later today and do the adjustments on the vue projects aswell regarding that deletion.

Improve this question
2
  • Just want to add that I'm trying to get each json object into a seperate div, that didn't come out clear in the question text. Commented Apr 23, 2019 at 6:29
  • Did you try v-for? vuejs.org/v2/guide/… Commented Apr 23, 2019 at 6:42

4 Answers 4

Reset to default
1

Actually your json format is invalid

{ "object1":{ "name": "test", "data": "test" }, "object2":{ "name": "test2", "data": "test2" }, "object3":{ "name": "test2", "data": "test2" } }

it should be like above and use JSON.parse() method to simply convert the json to javascript object

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

1 Comment

Thanks, it might be invalid, but as I stated over it works. The provided JSON is just something that is in the same form of the JSON used in the application. But if you are thinking about the fact that it's all wrapped in an array, it is like that in the actual json aswell.
0

Valid Object:

var objects = {
  "object1":{
    "name": "test",
    "data": "test"
  },
 "object2":{
    "name": "test2",
    "data": "test2"
  },
 "object3":{
    "name": "test2",
    "data": "test2"
  }
}

for iteration use 

  <div v-for="(object,index) in objects" :key="index">
        {{object}}
  </div>
Improve this answer

Comments

0

The correct object as an array: 

 test: [
    {
      object1: {
        name: 'name1',
        data: 'content1'
      }
    },
    {
      object2: {
        name: 'name1',
        data: 'content1'
      }
    },
    {
      object3: {
        name: 'name3',
        data: 'content3'
      }
    }
  ]

can be mapped as a computed property inside the script tages:

  computed: {
mappedTest() {
  return this.test.map(entry => {
    const key = Object.keys(entry)[0];
    return { name: entry[key].name, data: entry[key].data };
  });
}

},

and call it inside the template 

  <div
    v-for="testObject in mappedTest"
    :key="testObject"
  >
    name: {{testObject.name}}; data: {{testObject.data}}
  </div>
Improve this answer

Comments

0

I was very tired when I asked this question, apparently I did everything wrong. Can easily be solved by nested v-for loops.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.