将对象数组转换为 Vue js 和 php 中的对象

Question

如何将此对象格式化为对象数组？

[
    [
      {
        "fieldName": "4579043642",
        "message": "set number '4579043642' exists!"
      }
    ],
    [
      {
        "fieldName": "4579043641",
        "message": "set number '4579043641' exists!"
      }
     ],
     [
      {
        "fieldName": "4579043640",
        "message": "set number '4579043640' exists!"
      }
      ],
    ],
]

到这个预期的输出，因为它将在我的 vue js 逻辑中被遍历想要获取我的 vue js 记录中的字段

    const failed = [ {
        "fieldName": "4579043642",
        "message": "set number '4579043642' exists!"
      },
 {
        "fieldName": "4579043642",
        "message": "set number '4579043642' exists!"
      }
]

我的 PHP 代码返回数组是：

 $productID = auth()->user()->product_id;
        $offers = DB::select("SELECT * FROM offers WHERE product_id = $productID");
        if(isset($offers))
        {
            $services = $offers[0]->service_id;
        }
        if(isset($services))
        {
            $services =explode(",",$services);
        }
        $totalServiceIds = array();
        foreach($services as $service)
        {
            $totalServiceIds[] = DB::select("SELECT * FROM services WHERE id = $service");

        }
return $totalServiceIds;

而 Vue JS 方面是：

<template>
   
            <div class="box">

                <div class="card border-light"  v-for="user in users" :key="user.id">


                    <div class="card-body ">
                        <div style="height:250px">
                            <img class="card-img-top" :src="user.photos" alt="Card image cap">
                        </div>
                        <div class="card border-dark text-center" style="max-width: inherit;" >
                            <div class="card-body bg-dark text-white">

                                <p class="card-text"><b>{{ user.name }}</b></p>
                                <h5 class="card-title" v-for="offer in offers" :key="offer.id">Code: {{ offer.vouchercode }} </h5>
                                <a :href="user.link1" type="button" class="btn btn-success btn-block">Step-by-Step guide</a>
                                <a :href="user.link2" type="button" class="btn btn-danger btn-block">Support Service</a>
                            </div>
                            <div class="card-footer bg-transparent border-dark">
                                <a :href="user.link3" type="button" class="btn btn-outline-light bg-secondary btn-block">Redeem</a>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<style scoped>
section{
    background-color: lightgray;
    padding : 10px;
    margin:10px 0px 10px 0px;
}
.card{
    background: black;
    padding:0px;
    margin:0px;
}
.box {
    display: flex;
    flex-wrap: wrap;
}
.box>* {
    flex: 1 1 320px;
}
.mybox {
    display: flex;
    flex-wrap: wrap;
}
.mybox>* {
    flex: 1 1 320px;
}
.black {
    background:black;
}
</style>

<script>
export default {

    data() {
        return {
            users: {},
            offers:{},
            user_name: this.$userId,
        }
    },
    methods: {
        getUser(){
            axios.get('/getallservices')
                .then((response)=>{
                    this.users = response.data
                })
        },
        getoffers(){
            axios.get('/getalloffers')
                .then((response)=>{
                   this.offers = response.data

                })
        }
    },
    created() {
        this.getUser()
        this.getoffers()
    }
}
</script>

要么我想要来自后端以预期格式的响应，要么我需要以预期格式在 vUE JS 中解析它。

Answer 1

您可以使用Array.prototype.flat()在javascript层中完成此操作，如下所示：

    const response = [
        [
          {
            "fieldName": "4579043642",
            "message": "set number '4579043642' exists!"
          }
        ],
        [
          {
            "fieldName": "4579043641",
            "message": "set number '4579043641' exists!"
          }
        ],
        [
          {
            "fieldName": "4579043640",
            "message": "set number '4579043640' exists!"
          }
        ],
      ];

    const failed = response.flat()
    
    console.log(failed);

所以...假设这是您来自 /getallservices 的回复，您会这样做

axios.get('/getallservices')
  .then(response => response.data.flat())
  .then(console.log)

您可能希望对响应进行一些额外的验证以避免错误。