将 JSON 转至 Vue 前端有问题

Question

我有一个使用 Go、MongoDB 和 Vue.js 编写的现有应用程序。我被编写为在本地运行。我将其转换为在前端使用 AWS lambda、Atlas MongoDB（托管在 AWS 上）和 VueJS。

lambda 似乎工作正常（从 MongoDB 获取文档），我将它们转换为 JSON。文档切片（指针）使用 json.marshal （返回 bytes[]）进行转换，然后转换为字符串。

log.Println("Getting all MBs")
    mbs, err := getAllMBs()
    if err != nil {
        log.Println(err)
        return nil, err
    }

    j, err := json.Marshal(mbs)
    s := string(j)

    log.Println()

    if err != nil {
        log.Println(err)
        return nil, err
    }
    headers := map[string]string{
        "Access-Control-Allow-Origin": "*",
        "Content-Type":                "application/json",
    }

    return map[string]interface{}{
        "statusCode": 200,
        "headers":    headers,
        "body":       s,
    }, nil

在 vuejs 中，我使用 axios 来获取响应。我使用response.data.body 访问json 字符串。 （请参阅从 Go lambda 返回的地图）但是 javascript 将结果信息视为一个大字符串。之前我循环遍历数组并使用转换对象来创建 js 模型对象。

async getAllMBs(){
        // // eslint-disable-next-line no-debugger
        // debugger
          // CHANGED
          await this.$http.get("https://xsp15b9d2k.execute-api.us-east-1.amazonaws.com/prod/getAllMBs").then(response =>{
       // await this.$http.get("/getAllMilkBottles").then(response => {
          let mbs = response.data.body

            console.log(mbs)
            let mb = []
          if(mbs){
            this.milkBottles =[];
            this.searchMilkBottles = [];
            //console.log(mbs.length)
            for(let idx = 0;idx < mbs.length;idx++){
              mb[idx] = MilkBottle.convertObject(mbs[idx])
               //console.log(mbs[idx])
              this.milkBottles.push(mb[idx])
              this.searchMilkBottles.push(mb[idx])
            }
          }else{
            console.log("help")
          }
          this.error = ""
        }).catch(err=> {
              console.log(err)
              //this.setError();
            }
        )
      }

在原来的应用程序中，我不需要在 Go 中创建地图。

Answer 1

你的lambda是json编码两次，所以

data

实际上是一个JSON编码的数组。

{
  "data": "[{\"id\":\"1\",\"url\":\"/images/bottle-of-milk-science-photo-library.jpg\",\"city\":\"Sellersville\",\"county\":\"PA\",\"state\":\"PA\",\"name\":\"MICHAEL S CLOVIS\",\"cost\":\"0\",\"wanted\":\"0\"}]",
  "headers": {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json"
  },
  "statusCode": 200
}

看起来你可以跳过

mbs

上的 json 编码，因为你已经对整个地图进行了 json 编码，或者 lambda 正在根据

Content-Type

标头为你做这件事。

    log.Println("Getting all MBs")
    mbs, err := getAllMBs()
    if err != nil {
        log.Println(err)
        return nil, err
    }
    headers := map[string]string{
        "Access-Control-Allow-Origin": "*",
        "Content-Type":                "application/json",
    }

    return map[string]interface{}{
        "statusCode": 200,
        "headers":    headers,
        "body":       mbs,
    }, nil

这应该意味着您的 lambda 响应是单个 json 对象，并且数据不再需要解码。

{
  "data": [
    {
      "id": "1",
      "url": "/images/bottle-of-milk-science-photo-library.jpg",
      "city": "Sellersville",
      "county": "PA",
      "state": "PA",
      "name": "MICHAEL S CLOVIS",
      "cost": "0",
      "wanted": "0"
    }
  ],
  "headers": {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json"
  },
  "statusCode": 200
}