如何遍历对象内的数组?

时间:2020-10-14 08:48:01

标签: javascript vue.js

<p v-for="quest in exam.questions" :key="quest">{{quest.text}}</p>
data() {
    return {
        message: "QUESTION DIPLAYS HERE",
        name: "Ayoola",
        exam: [{
            id: 1,
            name: "",
            ref: "",
            duration: 24000,
            type: "cbt",
            format: {
                type: "random",
                total: 20,
            },
            description: "In this exam do not cheat",
            questions: [
                {
                    id: 1,
                    text: "who is this"
                },
                "options": [
                    {
                        "code": "A",
                        "text": "Man was created in God's image",
                        "is_correct": true,
                    },
                    {
                        "code": "B",
                        "text": "Man was created to look like angels",
                    },
                    {
                        "code": "C",
                        "text": "Man created himself",
                    },
                    {
                        "code": "D",
                        "text": "Man was not created and cannot be destroyed",
                    },
                ]
            ]
        }],

4 个答案:

答案 0 :(得分:1)

您正在询问对象,但是在您的示例中,您具有包含父对象和子对象的数组。如果import cv2 dir_frame = 'path' cap = cv2.VideoCapture(dir_frame) i=0 while(cap.isOpened()): ret, frame = cap.read() if ret == False: break cv2.imwrite('path_dest'+'image'+str(i)+'.jpg',frame) i+=1 cap.release() cv2.destroyAllWindows() 必须是一个数组,那么解决方案是:

exam

答案 1 :(得分:0)

您可以像这样迭代。 (在COMPUTED上,您将来可以应用过滤器)

<template>
<ul>
  <li v-for="quest in test_data" :key="quest.id">
    {{quest.id}} <br>
    {{quest.text}}
  </li>
</ul>
</template>

<script>
export default {
  data() {
      return{
        exam: 
         { questions: [ 
           { id:1,
            text:"who is this",
            options:[
                {
                    "code": "A",
                    "text": "Man was created in God's image",
                    "is_correct": true,
                },
                {
                    "code": "B",
                    "text": "Man was created to look like angels",
                }
            ]
          }
      
          ] }
    
    }
  },
  computed: {
        test_data() {
            return this.exam.questions;
        }
    },
}
</script>

答案 2 :(得分:0)

未捕获的SyntaxError

首先,您的数据对象为not valid(检查您的代码)。

“ message”:“未捕获的SyntaxError:意外令牌':'”,

enter image description here

/* Throw error:
"message": "Uncaught SyntaxError: Unexpected token ':'",
*/
var error = [
  {
    name: "valid"
  },
  name: "not valid"  
]

/* correct code */
var valid = [
  {
    name: "valid"
  },
  {
    name: "valid two"
  }
]

嵌套v-for

接下来,您不会正确地抛出嵌套对象(尝试使用v-for之前手动打印一项)。

  • exam.questions[0].text(不正确)。

  • 应为:exam.questions[0].options[0].text

最好的方法是遵循以下基本的“ Hello World”示例并编辑代码:

new Vue({
  el: "#app",
  data(){
    return{
      msg: "world",
      exam: {
        name: "Exam name",
        questions: [
          {
            id: 10,
            title: 'The capital of France?',
            "options": [
              {
                "code": "A",
                "text": "Paris",
                "is_correct": true,
              },
              {
                "code": "B",
                "text": "Lyon",
              }
            ]
          },
          {
            id: 11,
            title: 'The capital of Italy?',
            "options": [
              {
                "code": "A",
                "text": "Verona",
                "is_correct": true,
              },
              {
                "code": "B",
                "text": "Roma",
                "is_correct": true
              }
            ]
          },

        ]
      }
    }
  }  
})
<main id="app">
  <ul>
    <li v-for="question in exam.questions" :key="question.id">
      <h3>{{ question.title }}</h3>
      <ul>
        <li v-for="option in question.options" :key="option.code">
          {{ option.text }}
        </li>
      </ul>
    </li>
  </ul>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

相关文档:https://vuejs.org/v2/guide/list.html

答案 3 :(得分:0)

首先,您需要指定要循环通过的考试,或者,如果您想拥有多个考试元素,可以在表格上方进行v-for 为了简单地遍历数组,您可以在问题循环中放入for循环,并遍历每个选项并打印出来

这是我的实现方式:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
    NSInteger statusCode = ((NSHTTPURLResponse *)navigationResponse.response).statusCode;
    NSLog(@"statusCode:%ld", statusCode);
    if (statusCode/100 == 4 || statusCode/100 == 5) {
        NSLog(@"webview error:%@", navigationResponse.response);
    }
    decisionHandler(WKNavigationResponsePolicyAllow);
}