Easily create clickable words in Flutter by extracting specific words from a JSON String

Question

Easily create clickable words in Flutter by extracting specific words from a JSON String

In my JSON response, I receive a set of questions. My goal is to split these questions into words and compare them with another JSON response. When there's a match, I want to highlight the matching words and make them clickable to display a pop-up showing the translation from the second response. Ultimately, I want to present both matched and unmatched words in a clickable format resembling the original question.

Here is an example of what I aim to achieve

This is the content of my first JSON:

"status": "true",
"message": "message",
"demo": [
    {
        "qtnNumber": 1,
        "qtnItalian": "Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
        "qtnType": true
    },
    {
        "qtnNumber": 2,
        "qtnItalian": "Il segnale strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
        "qtnType": true
    },

This is the content of my second JSON:

{
"status": "true",
"message": "Vocabulary",
"vocabulary": [
    {
        "id": 3406,
        "italian": "a condizione ",
        "punajbi": "ਹਾਲਾਤ ਕੰਡੀਸ਼ਨ",
        "english": "condition",
        "number": null,
        "punjabiEnglish": "halat"
    },
    {
        "id": 3407,
        "italian": "a raso",
        "punajbi": "ਪਲੇਨ            ਇਸ ਦਾ ਬੁੱਕ ਵਿੱਚ ਪੂਰਾ ਲਫ਼ਜ਼ ਹੇ incrocio a raso => ਇਸ ਦਾ ਮਤਲਬ ਪਲੇਨ ਚੌਕ ਇੱਕੋ ਲੈਵਲ ਤੇ ਬਣਿਆ ਹੋਇਆ ਚੌਕ",
        "english": "plane",
        "number": "ikO LEVEL DA CHONK",
        "punjabiEnglish": null

    },
    {
        "id": 3408,
        "italian": "accesso",
        "punajbi": "ਦਾਖਿਲ",
        "english": "Entry",
        "number": null,
        "punjabiEnglish": "Dakhil"
    }

For each question in the first JSON, I plan to extract and match individual words with the Italian field in the second JSON. When a match is found, I will highlight those words accordingly.

json flutter dart

Answer 1

Answer №1

import 'dart:convert';

const raw_sentences = '''
{
  "status": "true",
  "message": "message",
  "demo": [
    {
        "qtnNumber": 1,
        "qtnItalian": "Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
        "qtnType": true
    },
    {
        "qtnNumber": 2,
        "qtnItalian": "Il segnale strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "VERTICAL SIGNS OF DANGER",
        "qtnType": true
    }
  ]
}
''';

const raw_vocabulary = '''
{
  "status": "true",
  "message": "Vocabulary",
  "vocabulary": [
    {
      "id": 3406,
      "italian": "a condizione &
      "punajbi": "ਹਾਲਾਤ ਕੰਡੀਸ਼ਨ",
      "english": "condition",
      "number": null,
      "punjabiEnglish": "halat"
    },
    {
      "id": 3500,
      "italian": "preannuncia"
    },
    {
      "id": 3501,
      "italian": "consentita"
    }
  ]
}
''';

void start(List<String> args) {
  var sentence = jsonDecode(raw_sentences)['demo'][0]['qtnItalian'] as String;
  var vocabulary = jsonDecode(raw_vocabulary)['vocabulary'] as List;
  var words = sentence.split(' ');
  var matches = vocabulary.map<String>((m) => (m as Map<String, dynamic>)['italian']).toSet().intersection(words.toSet()).toList();
  var references = Map.fromEntries(List.generate(matches.length, (i) => MapEntry(matches[i], vocabulary.firstWhere((m) => m['italian'] == matches[i])['id']));
  var new_sentence = <Map<String, dynamic>>[];

  var idx = 0;
  words.forEach((word) {
    if (matches.contains(word)) {
      new_sentence.add({'string': word, 'reference': references[word]});
      idx += 2;
    } else {
      if (new_sentence.isEmpty || idx == new_sentence.length) new_sentence.add({});
      new_sentence[idx]['string'] = (new_sentence[idx]['string'] ?? '') + '$word';
    }
  });

  print(sentence);
  print(new_sentence);
}

Output:

The depicted signal predicts a section of road where backing up is allowed
[{string: The illustrated signal}, {string: anticipates, reference: 3500}, {string: a stretch of road in which it is}, {string: allowed, reference: 3501}, {string: the maneuver of reverse}]

By utilizing the new_sentence array, you can generate widgets (texts and buttons) to achieve your objective. Remember, this platform serves to assist, not complete your entire task for you. Have a great day.

Answer 2

import 'dart:convert';

const raw_sentences = '''
{
  "status": "true",
  "message": "message",
  "demo": [
    {
        "qtnNumber": 1,
        "qtnItalian": "Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
        "qtnType": true
    },
    {
        "qtnNumber": 2,
        "qtnItalian": "Il segnale strada in cui è consentita la manovra di retromarcia",
        "qtnCategory": "VERTICAL SIGNS OF DANGER",
        "qtnType": true
    }
  ]
}
''';

const raw_vocabulary = '''
{
  "status": "true",
  "message": "Vocabulary",
  "vocabulary": [
    {
      "id": 3406,
      "italian": "a condizione &
      "punajbi": "ਹਾਲਾਤ ਕੰਡੀਸ਼ਨ",
      "english": "condition",
      "number": null,
      "punjabiEnglish": "halat"
    },
    {
      "id": 3500,
      "italian": "preannuncia"
    },
    {
      "id": 3501,
      "italian": "consentita"
    }
  ]
}
''';

void start(List<String> args) {
  var sentence = jsonDecode(raw_sentences)['demo'][0]['qtnItalian'] as String;
  var vocabulary = jsonDecode(raw_vocabulary)['vocabulary'] as List;
  var words = sentence.split(' ');
  var matches = vocabulary.map<String>((m) => (m as Map<String, dynamic>)['italian']).toSet().intersection(words.toSet()).toList();
  var references = Map.fromEntries(List.generate(matches.length, (i) => MapEntry(matches[i], vocabulary.firstWhere((m) => m['italian'] == matches[i])['id']));
  var new_sentence = <Map<String, dynamic>>[];

  var idx = 0;
  words.forEach((word) {
    if (matches.contains(word)) {
      new_sentence.add({'string': word, 'reference': references[word]});
      idx += 2;
    } else {
      if (new_sentence.isEmpty || idx == new_sentence.length) new_sentence.add({});
      new_sentence[idx]['string'] = (new_sentence[idx]['string'] ?? '') + '$word';
    }
  });

  print(sentence);
  print(new_sentence);
}

Output:

The depicted signal predicts a section of road where backing up is allowed
[{string: The illustrated signal}, {string: anticipates, reference: 3500}, {string: a stretch of road in which it is}, {string: allowed, reference: 3501}, {string: the maneuver of reverse}]

By utilizing the new_sentence array, you can generate widgets (texts and buttons) to achieve your objective. Remember, this platform serves to assist, not complete your entire task for you. Have a great day.

Easily create clickable words in Flutter by extracting specific words from a JSON String

Answer №1

Similar questions

Transform tree-like JSON array with nested arrays into flat JSON array

Guide on accessing a web service using a PHP POST request

encountering a problem with iterating through a JSON array

Using ng-init to pass a JSON object

Using JQ to structure logs in shell scripting

How can I verify the status of an occasional undefined JSON value?

Basic PHP and JSON

I'd like to change the name of the JSON key retrieved from the API request

Difficulty encountered while extracting information from JSON output

Ways to resolve the issue of an untraceable image associated with a json mime type

What is the solution for resolving the Angular error 'Cannot read property "_co.x" of undefined'?

Using Angular's ng-repeat to iterate through an array and display its objects within another array

Converting JSON objects into datetime: A step-by-step guide

Unraveling Complex JSON Structures in React

Is it possible to utilize $.getJSON() with a machine on the identical subdomain?

Mastering the Art of Binding Variables to Various JSON Types in GOLANG

Generate a dynamic drop-down menu by populating it with the names from a JSON array

Error when parsing JSON due to the presence of backslashes within the serialized object

Adding Information to Mongodb with C#

retrieving attribute values from JSON objects using JavaScript