仅在nuxt应用程序中使用来自json的特定字段

Question

通过使用asyncdata和axios，我从一个名为Knack的数据库中获取了一个json对象。

工作很好，但是整个响应是巨大的，在一些页面中，我只使用了例如10个字段，有时来自50+。

因此，我从knack抓取记录，然后使用v-for遍历并输出50+字段中的10个。

通过查看控制台，我可以看到整个json对象。

有没有一种方法可以像我一样获取json对象，而不是全部返回，遍历并创建一个包含我需要的字段的较小对象，然后返回该对象，然后在我的模板中执行v-for？基本上导致只有必需的字段在控制台中可见，并且对公众可见？

非常感谢，如果有人可以帮助代码样本。

Answer 1

你可以这样做。

示例数据模型

 data() {
  return {
    // Required fields to filter data
    requiredFields: ["name", "phone", "email"],
    fields: {
      name: "Wade Mckenzie",
      phone: "1-278-483-8300",
      email: "ac.mattis.velit@magnisdisparturient.net",
      address: "971-2324 Id, Av.",
      list: 7,
      country: "Australia",
      postalZip: "422625",
      region: "Campania",
      text: "malesuada augue ut lacus. Nulla tincidunt, neque vitae semper egestas,",
      numberrange: 5,
      currency: "$9.91",
      alphanumeric: "TXQ00DEL5RP",
   },
  };
 }

计算属性

computed: {
  filteredData() {

    // Create an empty object
    let requiredData = {};

    // Loop over the entries
    for (const [key, value] of Object.entries(this.data)) {

      // Check if the property is a required field
      if (this.requiredFields.includes(key)) {
        requiredData[key] = value;
      }
    }
 
   return requiredData;
  },
}

模板

<div v-for="(value, name) in filteredData" :key="name">
  {{ name }}: {{ value }}
</div>

您可以查看working example.

Answer 2

您可以在计算属性中执行此操作。

computed(){
    getCustomObject(){

        let customObject = {};
        for(let property in yourJsonObject){
            if(property == 'the field you want'){
                customObject[`${property}`] = yourJsonObject[property]
            }
        }
        
        return customObject;
    }
}

通过这种方式，您可以获得所需的特定字段。但是您必须通过在if语句中放置||来指定它们。

在模板中，你可以像这样简单地呈现它：

<div v-for="(item,key,index) in getCustomObject" :key="index">
    //Render data...
</div>

或者，如果你只想要一个特定数量的字段，比如50个字段中的10个，你可以这样做：

computed(){
    getCustomObject(){

        let customObject = {};
        Object.entries(yourJsonObject).forEach(([key,value],index) => {
            if(index<10){
              customObject[`${key}`] = value;
            }
        })
        
        return customObject;
    }
}

Answer 3

尝试对象解构：

​

const jsonObject = { f1: 1, f2: 2, f3: 3, f4: 4, f5: 5, f6: 6, f7: 7, f8: 8, f9: 9, f10: 10};
const neededFields = (({ f2, f5, f7 }) => ({ f2, f5, f7 }))(jsonObject);

console.log(neededFields);

​