如何从解析的动态对象创建项目符号列表答案

【问题标题】：How to create a bullet list from parsed dynamic object如何从解析的动态对象创建项目符号列表
【发布时间】：2021-03-18 15:41:32
【问题描述】：

所以我有一个 JSON 字符串 foo_json_string:

[{"foo_name":"foo_value"},{"foo_name1":"foo_value1"}]

我想解析并显示为 HTML 列表。

我使用了以下方法：

<ul>
  <li v-for="item in JSON.parse(foo_json_string)" v-bind:key="item.id">
    {{`${item.name} = ${item.value}`}}
  </li>
</ul>

这不起作用。很可能是因为 item.name 和 item.value 不存在，但我不知道如何解决这个问题。有什么建议吗？

【问题讨论】：

结果如何？？

标签： html json typescript vue.js

【解决方案1】：

您需要访问解析后的Object 的key。使用Object.keys() 方法获取密钥。下面有工作的sn-p。

new Vue({
  el: '#app',
  data: {
    foo_json_string: '[{"foo_name":"foo_value"},{"foo_name1":"foo_value1"}]',
  },
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul v-for="item in JSON.parse(foo_json_string)">
    <li v-for="key in Object.keys(item)">
      {{`${key} = ${item[key]}`}}
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

也许，你的意思是这样的？

var respond = [{"foo_name":"foo_value"},{"foo_name1":"foo_value1"}];

$.each(respond, function(k, v){
  console.log(v);
  $.each(v, function(k1, v1){
    $('#out').append('<li>'+v1+'</li>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="out"></ul>

【讨论】：