How to render a List Element using VueJs from a json data

Question

I have a javascript code which renders <ol><li></li></ol> , Using a json from the server . The code looks something like this

function loadWorkFlowRules() {
  var wf_id = <?php echo $wf->id; ?>;

  $.post("/api/wfengine/get_wf_rules/", {
    wf_id: wf_id
  }, function(result) {
    var wf_rules = JSON.parse(result).data;
    if (makeView(wf_rules)) {
      toastr.success('The Rules are Successfully Loaded!');
    } else
      toastr.info('Welcome to Work Flow Editor');


  });

}

function makeView(wf_rules) {
  //console.log(wf_rules);
  var html_str = '',
    response = false;
  $.each(wf_rules, function(key, value) {
    if (value.length > 0) {
      $.each(value, function(key1, value1) {
        var ui_l1 = '<li class="alert mar" data-id="' + value1.id + '" data-name="' + value1.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
        html_str = html_str + ui_l1;
        if (value1.children.length > 0) {
          $.each(value1.children, function(key2, value2) {
            $.each(value2, function(key3, value3) {
              var ui_l2 = '<li class="alert mar" data-id="' + value3.id + '" data-name="' + value3.name + '" style=""><div class="dd-handle state-main">' + value1.name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
              html_str = html_str + ui_l2;
              if (value3.children.length > 0) {
                $.each(value3.children, function(key4, value4) {

                  if (value4.length > 0) {
                    var ui_l3 = '<li class="dd-item alert mar action" data-id="' + value4[0].id + '" data-name="' + value4[0].name + '" data-api="' + value4[0].api + '" data-url="' + value4[0].url + '" data-json="' + value4[0].json + '" style=""><div class="dd-handle">' + value4[0].name + '<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close"  data-toggle="modal" data-target="#editAction" ><i class="fa fa-pencil"></i></span></div></li>';
                    html_str = html_str + ui_l3;
                  }
                })
              }
              html_str = html_str + '</ol></li>';
            });

          })
        }

        html_str = html_str + '</ol></li>';
      });
      $('.contract_main').html(html_str);
      response = true;

    } else
      response = false;

  });

  return response;
}

HTML

<div class="dd">
  <ol class="dd-list simple_with_drop vertical contract_main">

  </ol>
</div>

I got into a situation where Ill have to Bind the data element of the child <li> with an HTML MODAL popup , So that if the value in Modal is updated it shoud change in the Object/Dom also .

I was recommended to use VueJs.

I have went through! the basics of the VueJs , But that didn't cover how I ccan bind complete list from a Json ,

Any help in how I can do this would be great

vuejs is a full framework you have already done some data manipulation with jquery why will you want to add another library on your page to do some modal bindings? — madalinivascu
– madalinivascu, Commented Feb 13, 2017 at 5:54
@madalinivascu This is just an example actually , This appication is going to be using Lot of Json and Ui side data update/delete etc almost like a SPA, So we decided to use a framework if you an just give me some guidance how I should move forward with this , That would be more than enough — Vikram Anand Bhushan
– Vikram Anand Bhushan, Commented Feb 13, 2017 at 6:18

tony19 · Accepted Answer · 2022-07-15 23:08:32Z

2

Currently I don't see any structure of Vue.Js in your code and you are manipulating the JSON data and constructing the HTML in the JS code itself. You can do it in vue way, where you will create an Vue instance, do loading of data in Vue methods and use Vue syntax to iterate over data and other things. One Simple example you can see in this fiddle or in below code:

new Vue({
  el: '#app',
  data: {
    jsonData: []
  },
  mounted () {
    this.loadJsonData();
  },
  methods: {
    loadJsonData(){
       setTimeout(()=>{
          this.jsonData = ["first", "Second", "Third", "And So On"]
       }, 300)
    }
  }
})

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

<div id="app">
  <ul>
    <li v-for="data in jsonData">{{data}}</li>
  </ul>
</div>

You can look at vue-hackernews to understand more about structuring of code, How to fetch data from remote APIs in JSON format and display it.

edited Jul 15, 2022 at 23:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 13, 2017 at 6:28

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

Collectives™ on Stack Overflow

How to render a List Element using VueJs from a json data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related