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以及一个用于所有含义的表格。只需要意思而不是意义文本。 TranslationId不重要。封装了每个对象的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

有效对象：

----------begin_max5_patcher----------
1168.3ocyW8tbiZCD+y3mBF9TROWOHAXG2qsyzGf9Db4FOxfLVWAACH74bYx
8r2U+ALXv13j3zlOPFu+jzt6uc0tZedhky5r8zRG6ey9K1VVOOwxRIRJvx7a
KmTx9vDRoZYNgYooTtvYpFSP2KTxy1rojJdjWCjSDgaY73UEzPgVA3kAybmZ
iWH+hBbk+yyelq8WM6gWkx3ITgRSnCBypD0RcMRYQZst9a+Jx0QJ6kISjel9
F8CRZ94cBWzAmve9rf2EeX9qwE1jjAGbsstIqHknLx4FIfgvRgEHU4rZkBmv
AgnKFrl6K+piUX704m3994xCLaAIkJnEqnbx5DZadQeDhmxoZSwwYpsyZBO1
w9q2ZZJnOMgOPdCvSnkKj4.uy7zh+C3IN86fp6cgH7ovD5OsQv0ryvBttGxV
lGbdV.OHKf5yBANmxSKYwbRxqyOiIL9Ouru3gvp5TK0+J3RwzzpDAKbKgyoI
6HELBWzNXcwPt+qJjaHBHv+5HC5OhHgifM7cWp9WP82qIzNPAOry6WFZLcLw
SLVEOwH+ymc5M1rSzkyNaaTzBimYbMnTDKgtiVTxx3sTgkCIOukXqVaQxGeK
ScPOLsQDiqE41HpftiUueuFojBfZD.uTUnrTm8yqS5jGSVDsfWwTlhVHDYLl
jJFvgzxxbRndyQk4y.lu9.bZ2hbt5lybcgf4lLHYwwZJAhzwIYg+CMpsg6jk
S4LddAsDZMSDFOnANhtg.2xVsIiKJY+PYGpaoCfuwXmCBJ8DkS7Wv8zjFWHt
fEkwkFQm3gTbs5fzo.8yWZ6LpUvI4CrYHSAHlS.VBNYU4ZRgLbYtpiqAEYYI
cgZ1WBciv.myfBNcYQQV9oAKXwaOydWmAfom6rUHkqp3ZzUPlgXUIYWW1VPR
RLWW6d76IP2VhfJX5P.1sATWtaaYXQVRRG+Uira.jHHSOj9cVjXam24HQfky
xqShbZhxQrXZonqLAItrqjRwSZRuknp0laxqDzz7DvK5tfNOlt8011E15H+b
E35Vjiws8ZCLPgNeSGKcAtGNtLW+RctcA5Wt6TMjOwyOzcfrpKraJgbS3BzE
3B8KwtgTA5+MTA9BTA1Cci4B7GHWDBsojqrkF6TQ+2+anNqpKUzeNtbDrhX7
dPOWmbvtSSMdGo1i6xLZJy6RT1QJZf1cp9x.anNSAgucUDqTbGz+rRL0Flic
psdn76ej+7iba3ubfEQ1+gsZM1exf+4CfX.TuneQdBsP7.DoRtSsr6MHET3w
D76hBWK6lqv7tWB9xiEOxA+BY1VssglBJGK+3c+mc9Xti.lwEqWfVndyhO5g
5W6eoaInSFxcGNj6Oj6d3MDIL9oZdnrWI9v7PYVUQXcpioLscWKGZFJX7lWT
8kljPa7Hucds1f2HsAe85tI1.9J3AzMxFPWgMLLOXDpkXlXRcfcSYzCPcr4Y
FipmYsrsYcBSBcH8n2fZiUOKFodPuQ8DLR839F0i+HzSmzNmrhH8nenODEi5
qX22jhQiPw98XVcB5QSxJUwQSvdzzq8mb8zSsd7DqpoUGZRUYCjIuL4eArSi
FpB
-----------end_max5_patcher-----------

用于迭代使用

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

Answer 3

正确的对象作为数组：

public override async void OnNavigatingTo(INavigationParameters parameters)
{
   ...
   base.OnNavigatingTo(parameters);
}

可以映射为脚本标记内的计算属性：

 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 };
  });
}

Answer 4

当我问这个问题时，我很累，显然我做错了一切。可以通过嵌套的v-for循环轻松解决。

遍历多个json对象并使用vue.js在div中显示它们时遇到问题

4 个答案: