Replacing JSON obj with letters

Question

The output of this code will be the name and the choices I want to replace the Not effective , Neither effective nor Effective , Effective with "A", "B", and "C". Respectively.

I don't know what is wrong or missing with my code, seems like it just works when I choose Not effective for Question 1, Neither effective nor Effective for Question 2, and Effective for Question 3. This output I chose Not effective for all of the questions: output

   Survey
        .StylesManager
        .applyTheme("defaultV2");
    
        const json = {
            pages: [
              {
                questions: [
                  {
                    type: "radiogroup",
                    name: "Question 1",
                    title: "Deliver through others.",
                    choices: [
                      "Not effective",
                      "Neither effective nor Effective",
                      "Effective"
                    ]
                  },
                  {
                    type: "radiogroup",
                    name: "Question 2",
                    title: "Understand others perspective.",
                    choices: [
                      "Not effective",
                      "Neither effective nor Effective",
                      "Effective"
                    ]
                  },
                  {
                    type: "radiogroup",
                    name: "Question 3",
                    title: "Solve complex problems.",
                    choices: [
                      "Not effective", 
                      "Neither effective nor Effective",
                      "Effective"
                    ]
                  },
                ]
              }
            ]
          };
    
    window.survey = new Survey.Model(json);
    
    survey
        .onComplete
        .add(function (sender) {
            let data = JSON.stringify(sender.data)
            data = data.replace("Not effective", "A")
            data = data.replace("Neither effective nor Effective", "B")
            data = data.replace("Effective", "C")
    
            var obj = JSON.parse(data)
    
            document
                .querySelector('#surveyResult')
                .textContent = "Result JSON:\n" + JSON.stringify(obj, null, 3);
    
        });
    
    var app = new Vue({
        el: '#surveyElement',
        data: {
            survey: survey
        }
    });

Answer 1

Looking at your output, I think you are looking for replaceAll instead of replace .

You can have a look at it here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

Answer 2

.replace() returns a new string (it does not modify the existing string)

So you would need to replace and assign back into the choices array. For Ex. :

choices[0] = choices[0].replace("Not effective", "A");
choices[1] = choices[1].replace("Neither effective nor Effective", "B");
choices[2] = choices[2].replace("Effective", "C");

Working Demo:

 const json = { pages: [ { questions: [ { type: "radiogroup", name: "Question 1", title: "Deliver through others.", choices: [ "Not effective", "Neither effective nor Effective", "Effective" ] }, { type: "radiogroup", name: "Question 2", title: "Understand others perspective.", choices: [ "Not effective", "Neither effective nor Effective", "Effective" ] }, { type: "radiogroup", name: "Question 3", title: "Solve complex problems.", choices: [ "Not effective", "Neither effective nor Effective", "Effective" ] }, ] } ] }; new Vue({ el: '#app', data: { questions: json.pages[0].questions, updatedData: [] }, mounted() { this.updatedData = this.questions.map((obj) => { obj.choices[0] = obj.choices[0].replace("Not effective", "A"); obj.choices[1] = obj.choices[1].replace("Neither effective nor Effective", "B"); obj.choices[2] = obj.choices[2].replace("Effective", "C"); return obj; }); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(question, index) in updatedData":key="index"> <p v-for="choice in question.choices":key="choice"> {{ choice}} </p> </div> </div>

FYI : In JavaScript, strings are immutable - an existing string is never modified.