JAVASCRIPT DICTIONARY CREATION DYNAMICALLY

I am back-end developer , and i had to work with Frot-end a little ,but i am stuck in one problem.I am getting data from api and want my data to be stored in this way:

let questions = [
   {
    id: 1,
    question: "question?",
    options: [
      "option1",
      "option2",
      "option3",
      "option4"
    ]
  },
    {
    id: 2,
    question: "question?",
    options: [
      "option1",
      "option2",
      "option3",
      "option4"
    ]
  },
]

Api call looks like this :

var url = 'http://127.0.0.1:8000/api/questions';
async function getData(){
  const response = await fetch(url);
  const data = await response.json();
  console.log(data)

So , i tried to use map and dict function like this to make dict like above ,but did not work:

function  Dictionary(){
  this.datastore = []

  this.add = function(key,value){
    if(key && value){
      this.datastore.push({
        key : key,
        value : value,
    });
    }
    return this.datastore
  }
}

var dict1 = new Dictionary()
console.log(dict1)
   
      
var url = 'http://127.0.0.1:8000/api/questions';
async function getData(){
  const response = await fetch(url);
  const data = await response.json();
  var list = []
  console.log(data)
  data.map((values)=>{
  id = values.id;
  question = values.question;
  option= values.option;
  dict1.add('id',id);
  dict1.add('question',question);
  dict1.add('options',option);
  })
 
}

data = getData()
console.log(dict1.datastore)

But it does not add up to the existing dict instead gives me back only last fetched information,

Can anyone help with this?

Answer

Not sure what you are trying to achieve, but it looks like you get an array of objects from the backend and you want to turn it into an array of objects, but with different property names. That’s a simple Array.prototype.map():

const response = await fetch(url);
const data = await response.json();
const questions = data.map((question) => {
  return {
    id: question.numb,
    question: question.text,
    options: question.choices,
  };
});

If you are just trying to create some kind of centralized state manager / store that would also implement accessors to that data, then the main issue is you are passing properties one by one; instead, you should just call add once per item (question):

function mockedFetch() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        json: () => Promise.resolve([{
          numb: 1,
          text: 'Q1',
          choices: ['Q1-A', 'Q1-B'],
        }, {
          numb: 2,
          text: 'Q2',
          choices: ['Q2-A', 'Q2-B'],
        }]),
      });
    }, 1000 + 2000 * Math.random());
  });
}
      
class QuestionStore {
  data = [];

  addQuestion(question) {
    this.data.push(question);
  }
  
  getQuestion(id) {
    return this.data.find(q => q.id === id);
  }
  
  getQuestions() {
    return this.data;
  }
}

const questionStore = new QuestionStore();
      
async function getData(){
  const response = await mockedFetch();
  const data = await response.json();
  
  data.map((question) => {
    questionStore.addQuestion({
      id: question.numb,
      question: question.text,
      options: question.choices,
    });
  }); 
  
  console.log(questionStore.getQuestions());
  console.log(questionStore.getQuestion(1));
}

getData();

.as-console-wrapper {
  max-height: 100% !important;
}

However, I think that’s not the case and this might just be some kind of confusion.