Возникла проблема с повторением нескольких объектов json и отображением их в div с помощью vue.js.

Question

Пытаясь создать веб-сайт, который получает информацию из API, однако я не совсем понимаю, как это сделать, поскольку мне нужно, чтобы все результаты были сгруппированы, а созданный мной API почти никогда не дает ответ с таким жеколичество предметов.Итак, вопрос в том, что, видя, что я использую vue.js и axios, есть ли какой-нибудь способ перебрать объекты json, чтобы показать каждый из объектов в отдельности?Мне удается сделать это, когда есть определенные суммы, но я хочу сделать это динамическим, чтобы я не жестко закодировал в переменные, какую часть ответа мне нужно установить для каждой переменной.

Этоструктура JSON

[
    {
        "JTranslate": {
            "translationId": "dictionary.bokmaal",
            "lemmata": [
                {
                    "lemma": "båt",
                    "meanings": [
                        {
                            "meaning": "(liten) farkost",
                            "meaningText": "(liten) farkost"
                        },
                        {
                            "meaning": "fartøy, skip",
                            "meaningText": "fartøy, skip"
                        },
                        {
                            "meaning": "noe som ligner på en båt (1,2)",
                            "meaningText": "noe som ligner på en båt (1,2)"
                        }
                    ],
                    "paradigms": {
                        "paradigm": "subst mask appell"
                    },
                    "inflections": {
                        "inflection": "ent ub",
                        "inflectionForms": [
                            "båten",
                            "båter",
                            "båt",
                            "båtene"
                        ]
                    }
                }
            ]
        }
    },
    {
        "JTranslate": {
            "translationId": "dictionary.nynorsk",
            "lemmata": [
                {
                    "lemma": "båt",
                    "meanings": [
                        {
                            "meaning": "(liten) farkost til å ro el. til å drive fram med segl el. motor",
                            "meaningText": "(liten) farkost til å ro el. til å drive fram med segl el. motor"
                        },
                        {
                            "meaning": "farty, skip",
                            "meaningText": "farty, skip"
                        },
                        {
                            "meaning": "noko som i forma minner om ein båt",
                            "meaningText": "noko som i forma minner om ein båt (1)"
                        }
                    ],
                    "paradigms": {
                        "paradigm": "subst mask appell"
                    },
                    "inflections": {
                        "inflection": "eint ub",
                        "inflectionForms": [
                            "båt",
                            "båten",
                            "båtar",
                            "båtane"
                        ]
                    }
                }
            ]
        }
    },
    {
        "JTranslate": {
            "translationId": "dictionary.bokmaalTilNynorsk",
            "lemmata": [
                {
                    "lemma": "båt",
                    "meanings": [
                        {
                            "meaning": "(liten) farkost",
                            "meaningText": "(liten) farkost"
                        },
                        {
                            "meaning": "fartøy, skip",
                            "meaningText": "fartøy, skip"
                        },
                        {
                            "meaning": "noe som ligner på en båt (1,2)",
                            "meaningText": "noe som ligner på en båt (1,2)"
                        }
                    ],
                    "paradigms": {
                        "paradigm": "subst mask appell"
                    },
                    "inflections": {
                        "inflection": "ent ub",
                        "inflectionForms": [
                            "båten",
                            "båter",
                            "båt",
                            "båtene"
                        ]
                    }
                }
            ]
        }
    },
    {
        "JTranslate": {
            "translationId": "dictionary.nynorskSynonym",
            "lemmata": [
                {
                    "lemma": "båt",
                    "meanings": [
                        {
                            "meaning": "(liten) farkost til å ro el. til å drive fram med segl el. motor",
                            "meaningText": "(liten) farkost til å ro el. til å drive fram med segl el. motor"
                        },
                        {
                            "meaning": "farty, skip",
                            "meaningText": "farty, skip"
                        },
                        {
                            "meaning": "noko som i forma minner om ein båt",
                            "meaningText": "noko som i forma minner om ein båt (1)"
                        }
                    ],
                    "paradigms": {
                        "paradigm": "subst mask appell"
                    },
                    "inflections": {
                        "inflection": "eint ub",
                        "inflectionForms": [
                            "båt",
                            "båten",
                            "båtar",
                            "båtane"
                        ]
                    }
                }
            ]
        }
    }
]

ОБНОВЛЕНИЕ: Я пытался использовать v-for, но, видя, что мне нужно иметь достаточно структурированный вывод, это не очень помогает, яЯ также пробовал вложенные циклы V-for, еще раз я не могу получить точность, которую я ищу.

UPDATE2: Также следует добавить, когда я говорю объект JSONЯ на самом деле имею в виду объект JS.json.parse () был использован в json.

UPDATE3: Обновлен JSON для фактических данных, которые я использую для приложения.Каждому элементу div нужны лемма, набор тегов парадигмы, набор тегов перегиба и inflectionForms, а также таблица для всех значений.Просто нужен смысл, а не смысл текста.Идентификатор перевода не важен.JTranslate, который оборачивает каждый объект, будет удален, просто немного устал от Java на данный момент, сделает это позже сегодня и внесет коррективы в проекты vue, касающиеся этого удаления.

Answer 1

На самом деле ваш формат json недопустим

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

он должен быть таким же, как и выше, и использовать метод JSON.parse () для простого преобразования json в объект javascript

Answer 2

Я очень устал, когда задал этот вопрос, видимо, я все сделал не так.Легко решается вложенными v-for петлями.

Answer 3

Правильный объект в виде массива:

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

может быть отображено как вычисляемое свойство внутри тегов скрипта:

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

},

и назовите его внутри шаблона

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

Answer 4

Действительный объект:

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

для итерации

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