I integrated monaco to my angular application. Now I want add a form in which user will enter json. Functionality I am looking for is

I have 3 lists targetColumns, targetTables, sourceColumns

When the user starts typing a key in the JSON object, such as “, the auto-completion should suggest keys from the TargetColumns list.

When the user starts typing a value for the “value” key under “TargetColumns”, the auto-completion should suggest values from the TargetTables list.

Once the user selects a value from TargetTables, the auto-completion should continue suggesting values from the SourceColumns list.

Code I tried

// Define your data structures
const tgtCol = ['tgtCol1', 'tgtCol2', 'tgtCol3'];
const tgtTbl = ['tgtTbl1', 'tgtTbl2', 'tgtTbl3'];

// Register a completion provider for JSON files
monaco.languages.registerCompletionItemProvider('json', {
  provideCompletionItems: function (model, position) {
    const currentLine = model.getLineContent(position.lineNumber);
    const textBeforePosition = currentLine.substring(0, position.column - 1);
    const textAfterPosition = currentLine.substring(position.column - 1);

    const suggestions = [];

    // Check if completing a key in the JSON object
    if (isCompletingKey(textBeforePosition)) {
      suggestions.push(...getSuggestionsForKeys(tgtCol, textBeforePosition));
    }

    // Check if completing a value for the "value" key under "tgtCol"
    if (isCompletingValue(textBeforePosition) && textBeforePosition.includes('"value"')) {
      suggestions.push(...getSuggestionsForValues(tgtTbl, textBeforePosition));
    }

    return { suggestions };
  },
});

// Helper function to determine if completing a key
function isCompletingKey(textBeforePosition) {
  const trimmedText = textBeforePosition.trim();
  return trimmedText.endsWith('{') || (trimmedText.endsWith(',') && !trimmedText.endsWith(':'));
}

// Helper function to determine if completing a value
function isCompletingValue(textBeforePosition) {
  const trimmedText = textBeforePosition.trim();
  return trimmedText.endsWith(':') && !trimmedText.includes('"');
}

// Helper function to get suggestions for keys
function getSuggestionsForKeys(keys, textBeforePosition) {
  const userInput = getUserInput(textBeforePosition);
  return keys.filter(key => key.startsWith(userInput)).map(key => createSuggestion(key));
}

// Helper function to get suggestions for values
function getSuggestionsForValues(values, textBeforePosition) {
  const userInput = getUserInput(textBeforePosition);
  return values.filter(value => value.startsWith(userInput)).map(value => createSuggestion(value));
}

// Helper function to extract user input from text before position
function getUserInput(textBeforePosition) {
  return textBeforePosition.trim().split('"').pop();
}

// Helper function to create a completion suggestion
function createSuggestion(label) {
  return {
    label: label,
    kind: monaco.languages.CompletionItemKind.Property,
    insertText: `"${label}": `,
  };
}

// Initialize Monaco Editor with auto-complete enabled
const editor = monaco.editor.create(document.getElementById('container'), {
  value: '{nt"tgtCol": {ntt"value": ""nt}n}',
  language: 'json',
  quickSuggestions:true
});

Need some help in achieving this functionlaity