Ionic 3中解析常量内JSON字符串并存储为数组的技术问询

先来说说你当前遇到的错误根源，再一步步帮你实现需求：

一、修复当前的运行错误 #

你看到的500错误和MIME类型问题，本质是代码里的JSON.parse(value)触发了运行时错误，导致Ionic编译打包失败。原因很简单：你在JSON.parse的reviver回调里，对所有类型的value都尝试用JSON.parse()解析，但只有字符串类型才适合这么做，当value是对象、数组这类非字符串类型时，JSON.parse(value)就会抛出错误，进而导致整个脚本执行失败。

而且，你完全不需要把已经是JavaScript对象的questions先转成字符串再解析——questions本身就是一个合法的JS对象，直接用就行，JSON.stringify和JSON.parse这两步都是多余的。

二、正确存储questions数组 #

我们可以直接把questions对象里的questions数组赋值给组件的一个属性，这样模板就能直接访问它。修改你的组件代码如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// 常量保持不变
const questions={
  "setId": 1,
  "setName": "Set-A",
  "totalQuestions": 3,
  "markPerQuestion": 1,
  "totalDuration": 10,
  "questions": [
    {
      "questionId": 1,
      "questionName": "What is the term used for describing the judgmental part of problem solving?",
      "questionInstruction": "Select Correct Answer",
      "questionAnswer": "a",
      "img": "",
      "questionOptions": [
        { "optionId": "a", "optionValue": "Heuristic" },
        { "optionId": "b", "optionValue": "Critical" },
        { "optionId": "c", "optionValue": "Value based" },
        { "optionId": "d", "optionValue": "Analytical" },
        { "optionId": "e", "optionValue": "None of the above" }
      ]
    },
    {
      "questionId": 2,
      "questionName": "Decision support programs are designed to help managers make:",
      "questionInstruction": "Select Correct Answer",
      "questionAnswer": "d",
      "img": "",
      "questionOptions": [
        { "optionId": "a", "optionValue": "vacation schedules" },
        { "optionId": "b", "optionValue": "budget projections" },
        { "optionId": "c", "optionValue": "All of the above" },
        { "optionId": "d", "optionValue": "business decisions" },
        { "optionId": "e", "optionValue": "None of the above" }
      ]
    },
    {
      "questionId": 3,
      "questionName": "What was originally called the imitation game by its creator?",
      "questionInstruction": "Select Correct Answer",
      "questionAnswer": "b",
      "img": "",
      "questionOptions": [
        { "optionId": "a", "optionValue": "Cybernetics" },
        { "optionId": "b", "optionValue": "The Turing Test" },
        { "optionId": "c", "optionValue": "LISP" },
        { "optionId": "d", "optionValue": "The Logic Theorist" },
        { "optionId": "e", "optionValue": "None of the above" }
      ]
    }
  ]
};

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 定义属性存储问题数组
  questionList: any[] = [];
  // 滑块配置项
  slideOptions = {
    initialSlide: 0,
    loop: false,
    pager: false // 禁用默认分页器，用自定义按钮
  };
  private slides: any;

  constructor(public navCtrl: NavController) { }

  ionViewDidLoad(){
    this.loadQuestionData();
  }

  loadQuestionData(){
    // 直接提取问题数组，无需JSON转换
    this.questionList = questions.questions;
    // 如果需要把所有文本转大写，在这里统一处理
    this.questionList = this.questionList.map(q => {
      return {
        ...q,
        questionName: q.questionName.toUpperCase(),
        questionInstruction: q.questionInstruction.toUpperCase(),
        questionOptions: q.questionOptions.map(opt => ({
          ...opt,
          optionValue: opt.optionValue.toUpperCase()
        }))
      };
    });
  }

  // 绑定滑块实例
  setSlides(slides: any) {
    this.slides = slides;
  }

  // 上一题按钮逻辑
  prevSlide() {
    if (this.slides) {
      this.slides.slidePrev();
    }
  }

  // 下一题按钮逻辑
  nextSlide() {
    if (this.slides) {
      this.slides.slideNext();
    }
  }
}

三、实现带前后按钮的Ionic滑块（home.html） #

在模板中使用ion-slides组件，配合自定义按钮完成问题展示：

<ion-header>
  <ion-navbar>
    <ion-title>
      {{questions.setName}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-slides #slider [options]="slideOptions" (ionSlidesDidLoad)="setSlides(slider)">
    <ion-slide *ngFor="let q of questionList; let i = index">
      <h3>Question {{i+1}}/{{questionList.length}}</h3>
      <h4>{{q.questionName}}</h4>
      <p>{{q.questionInstruction}}</p>
      
      <ion-list>
        <ion-item *ngFor="let opt of q.questionOptions">
          <ion-label>{{opt.optionId}}. {{opt.optionValue}}</ion-label>
          <ion-radio [value]="opt.optionId"></ion-radio>
        </ion-item>
      </ion-list>
    </ion-slide>
  </ion-slides>

  <div class="button-container">
    <button ion-button (click)="prevSlide()" [disabled]="slider.isBeginning()">上一题</button>
    <button ion-button (click)="nextSlide()" [disabled]="slider.isEnd()">下一题</button>
  </div>
</ion-content>

<style>
  .button-container {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: #f5f5f5;
  }
</style>

关键说明 #

1. 为什么不需要JSON解析？：你定义的questions是JavaScript对象字面量，不是JSON字符串，直接访问questions.questions就能拿到目标数组，完全不需要额外的序列化/反序列化操作。
2. 字符串转大写的正确方式：直接遍历数组修改对应属性，比用JSON.parse的reviver回调更直观，也避免了类型错误。
3. 滑块控制逻辑：通过#slider获取滑块实例，调用slidePrev()/slideNext()实现切换，用isBeginning()/isEnd()判断按钮是否需要禁用，提升交互体验。

这样修改后，你的代码就能正常运行，问题数组会被正确存储，并且能在带前后按钮的滑块中顺利展示每个问题。

内容的提问来源于stack exchange，提问作者androholic