Блог

Главная - Вопросы по программированию - Как создать маркированный список из проанализированного динамического объекта

Как создать маркированный список из проанализированного динамического объекта

#html #json #typescript #vue.js

#HTML #json #typescript #vue.js

Вопрос:

Итак, у меня есть строка 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 не существует, но я не уверен, как это исправить. Есть предложения?

Комментарии:

1. каков результат??

Ответ №1:

Может быть, ты имеешь в виду вот так?

 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>

Ответ №2:

Вам необходимо получить доступ key к проанализированному Object . Используйте Object.keys() метод для получения ключа. Ниже приведен рабочий фрагмент.

 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>