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

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: Unexpected token , in JSON at position 146

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

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":""}

UPDATE2：对于 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

首先，如果slides为数组，则声明为数组

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
 })