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

问题描述

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

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

到这个预期的输出，因为它会在我的 vue js 逻辑中被 trverseresed 想要获取我的 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 中以预期格式解析它。

解决方法

您可以使用 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)

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