Question

我有一个从Apache Solr获取数据的Vue组件，我正在处理的字段中的数据是在PHP中使用json_encode()创建的数组。这是我的组件中的方法：

    data () {
      return {
        slideshow: {},
        slides: {}
      }
    },
    created () {
      this.getSlideshow()
    },
    methods: {
    getSlideshow: function () {
      var language = this.language
      // Get slideshow record from Solr.
      const params = new URLSearchParams()
      params.append('fq', 'bundle:slideshow')
      params.append('fq', 'entity_id:' + this.slideshowNid)
      params.append('fq', 'ss_language:' + language)
      params.append('fq', 'entity_type:node')
      params.append('wt', 'json')
      params.append('rows', 1)
      axios.get('https://mysolrurl.com/solr/myindex/select', {
        params: params
      })
      .then(response => {
        var slideshow = response.data.response.docs[0]
        this.slides = slideshow.sm_field_product_image_desktop
      })
    }
  }

理想情况下，我希望能够在我的模板中做些什么：

<template>
  <div>
    <ul>
      <li v-for="slide in slides">
        <img v-bind:src="slide.url" />
      </li>
    </ul>
  </div>
</template>

我遇到的问题是解析从sm_field_product_image_desktop字段返回的数组。这是我得到的结构：

Array [
  0: "{\"id\":\"6258\",\"url\":\"\\/\\/dam-assets.mysite.com\\/s3fs-public\\/F-279fc_03b_1500x1000_0.png\",\"caption\":\"\",\"alt\":\"My-Product\",\"thumbnail\":\"\"}",
  1: "{\"id\":\"3619\",\"url\":\"\\/\\/dam-assets.mysite.com\\/s3fs-public\\/F-279fc_14b_1500x1000.png\",\"caption\":\"\",\"alt\":\"My Product\",\"thumbnail\":\"\"}",
  2:"{\"id\":\"3616\",\"url\":\"\\/\\/dam-assets.mysite.com\\/s3fs-public\\/Fluke%20279%20FC%20kit_300dpi_542x357mm_C_NR-20892.jpg\",\"caption\":\"\",\"alt\":\"My Product\",\"thumbnail\":\"\"}",
  3:"{\"id\":\"36177\",\"url\":\"\\/\\/dam-assets.mysite.com\\/s3fs-public\\/Fluke%20279%20FC%20power%20panel_300dpi_352x234mm_C_NR-20990.jpg\",\"caption\":\"\",\"alt\":\"My Product\",\"thumbnail\":\"\"}"
]

如果我尝试在数组上使用JSON.parse()，我会收到错误

SyntaxError：意外的令牌，在位置146的JSON中

如果我遍历数组并单独解析每个项目，那么我可以解析它并得到一个我可以阅读的单个对象。

var slides = slideshow.sm_field_product_image_desktop
slides.forEach(function (item) {
  var parsedItem = (JSON.parse(item))
  console.log('URL: ' + parsedItem.url)
})

但这意味着如果我想能够实际访问模板中的URL，我必须通过循环从Solr返回的一个并单独添加每个对象来创建一个新对象。这是正确的，还是有更快（或不同）的方式来解析从Solr返回的数组，所以我可以在我的模板中迭代它？

更新：对于Sebastian，这是slides的日志输出：

{"id":"6258","url":"\/\/dam-assets.fluke.com\/s3fs-public\/F-279fc_03b_1500x1000_0.png","caption":"","alt":"Fluke 279 FC True-RMS","thumbnail":""},{"id":"3619","url":"\/\/dam-assets.fluke.com\/s3fs-public\/F-279fc_14b_1500x1000.png","caption":"","alt":"Fluke 279 FC True-RMS","thumbnail":""},{"id":"3616","url":"\/\/dam-assets.fluke.com\/s3fs-public\/Fluke%20279%20FC%20kit_300dpi_542x357mm_C_NR-20892.jpg","caption":"","alt":"Fluke 279 FC True-RMS","thumbnail":""},{"id":"36177","url":"\/\/dam-assets.fluke.com\/s3fs-public\/Fluke%20279%20FC%20power%20panel_300dpi_352x234mm_C_NR-20990.jpg","caption":"","alt":"Fluke 279 FC True-RMS","thumbnail":""}

更新2：对于FDavidov，以下是该字段在Solr中的表示方式：

"sm_field_product_image_desktop": [
          "{\"id\":\"6258\",\"url\":\"\\/\\/dam-assets.fluke.com\\/s3fs-public\\/F-279fc_03b_1500x1000_0.png\",\"caption\":\"\",\"alt\":\"Fluke 279 FC True-RMS\",\"thumbnail\":\"\"}",
          "{\"id\":\"3619\",\"url\":\"\\/\\/dam-assets.fluke.com\\/s3fs-public\\/F-279fc_14b_1500x1000.png\",\"caption\":\"\",\"alt\":\"Fluke 279 FC True-RMS\",\"thumbnail\":\"\"}",
          "{\"id\":\"3616\",\"url\":\"\\/\\/dam-assets.fluke.com\\/s3fs-public\\/Fluke%20279%20FC%20kit_300dpi_542x357mm_C_NR-20892.jpg\",\"caption\":\"\",\"alt\":\"Fluke 279 FC True-RMS\",\"thumbnail\":\"\"}",
          "{\"id\":\"36177\",\"url\":\"\\/\\/dam-assets.fluke.com\\/s3fs-public\\/Fluke%20279%20FC%20power%20panel_300dpi_352x234mm_C_NR-20990.jpg\",\"caption\":\"\",\"alt\":\"Fluke 279 FC True-RMS\",\"thumbnail\":\"\"}"

Answer 1

您可以创建一个函数来解析每个对象并在模板中使用它：

<template>
  <div>
    <ul>
      <li v-for="slide in slides">
        <img :src="parse(slide).url" />
      </li>
    </ul>
  </div>
</template>

并将该函数添加到javascript中的methods属性中：

methods: {
    ...,
    parse (json) {
        return JSON.parse(json)
    }
}

Answer 2

首先，如果幻灯片作为数组，则声明为数组

return {
  slideshow: {},
  slides: []
}

并使用like，

axios.get('https://mysolrurl.com/solr/myindex/select', {
    params: params
})
.then(response => {
   var slideshow = response.data.response.docs[0]
   for (let [inx, item] of slideshow.sm_field_product_image_desktop.entries()) {
      slideshow.sm_field_product_image_desktop[inx] = JSON.parse(item)
   }
   this.slides = slideshow.sm_field_product_image_desktop
 })

无法在使用PHP的json_encode（）编码的数组上使用JSON.parse（）

2 个答案: