如何使用 vueJS 在内部数组中显示 JSON 数据？

Posted 2023-02-23

【中文标题】如何使用 vueJS 在内部数组中显示 JSON 数据？

【英文标题】：How can I able to display the JSON data in an inner array by using vueJS?

【发布时间】：2018-04-18 12:36:08

【问题描述】：

我的 vueJS 代码是：

<script>
  new Vue(
    el: '#feed' ,
    data: 
      data: [],
    ,
    mounted() 
      this.$nextTick(function() 
        var self = this;
        var id = window.location.href.split('=').pop();
        console.log(id);
        $.ajax(
          url: "https://n2s.herokuapp.com/api/post/get/5",
          method: "GET",
          dataType: "JSON",
          success: function (e) 
            if (e.status == 1) 
              self.data = e.data;
              console.log(e.data)
             else 
              console.log('Error occurred');
            
          , error: function()
            console.log('Error occurred');
          
        );
      );
    ,
  )
</script>

这是我显示值的 html 代码

<div class="m-single-article" id="feed">
  <p>details.bussinessName</p> //already printed
  <p>details.pid</p> //already printed
  <p>details.inventory</p> //////NOT PRINTING
  <p>details.sub_category</p> ////// NOT PRINTING
</div>

我能够打印除库存和子类别之外的所有数据。请

url 将提供 json 数据为：

"status": true, "data": "pid": 10, "bussinessName": "Ey technology", "services": "1, 3, 4, 2", "inventory": ["specs", "Eye Testing", "Lens", "Doctors"], "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description": "Good technology company for software", "category": 1, "sub_category": ["Homeo pathy", "Web development"], "lat": 9.5274336, "lon": 76.8224309, "contactName": "simon", "contactEmail": "[e-mail]", "contactOfficeAddress": "korno solutions", "contactNumber": "1236547859", "contactOfficeNumber": "858547896", "state": "Canada", "city": "Oranto", "place": "Orania", "pincode": 895621, "referer": 24, "link": 24, "views": 0, "package": 1, "listing_pic": "default", "website": "www.ey.com"

通过尝试，我无法显示库存 [] 和子类别 [] 的值。任何人都可以帮我解决我的问题。

我也得到了 1,2,3,4 的服务。有什么方法可以映射到另一个提供服务名称的 json 数据。 https://n2s.herokuapp.com/api/post/get_all_services/

【参考方案1】：

您需要v-for。

new Vue(
  el: '#feed' ,
  data: 
    details: [],
  ,
  mounted() 
    this.$nextTick(function() 
      var self = this;
      var id = window.location.href.split('=').pop()
             console.log(id)
      $.ajax(
            url: "https://n2s.herokuapp.com/api/post/get/5",
            method: "GET",
            dataType: "JSON",
            success: function (e) 
                if (e.status == 1) 
                    self.details = e.data;
                    console.log(e.data)
                
                else
                
                    console.log('Error occurred');
            , error: function()
            console.log('Error occurred');
            
        );
    )
  ,
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-single-article" id="feed">
<p>details.bussinessName</p> 
<p>details.pid</p>
<p v-for="inv in details.inventory">inv</p>
<p v-for="sub in details.sub_category">sub</p>
</div>

【讨论】：

第二部分你能帮我吗？？

谢谢先生的帮助.. 但是怎么可能是 details.inventory??

立即查看答案。