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

Posted 2023-02-22

【中文标题】将对象数组转换为 Vue js 和 php 中的对象

【英文标题】：Convert array of objects to objects in Vue js and php

【发布时间】：2021-06-28 16:41:32

【问题描述】：

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

[
    [
      
        "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" >
                        </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 中解析它。

【参考方案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)

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

【讨论】：

我正在使用 vue js，而且我很新，因为我已经在上面编写了我的代码，我需要在其中获取值你能在该代码中指出我将如何使用这个 array.prototype 。减少。我已经更新了我的问题

看起来您在此之后编辑了问题。这将不再为您提供所需的响应。我会更新它。我也不清楚这是用于哪种方法...getUser?

请在我的代码中指出我实际上我正在获取格式为 [[],[]....] 的 php 数据 frpm 但我希望 vue 使用中的数据为[,....]

@ArslaanMuhammadAli 我更新了答案以反映您现在的问题

谢谢你能帮我进行验证，我应该照常使用我是 vue js 的新手，也许我正在跳过基本验证或检查