JSONPath within Cypress

TheKeyboarder
September 19, 2023
188 views
2 votes
3 Answers

I’m trying to get a JSON path for the HTML which has the language code DE

Here is the sample JSON

{
"name": "Name",
"text": "",
"html": "HTML content",
"tags": [],
"translations": [
    {
        "html": "HTML I don't want",
        "text": "",
        "language": {
            "code": "AF",
            "name": "AF"
        }
    },
    {
        "html": "HTML I want",
        "text": "",
        "language": {
            "code": "DE",
            "name": "German"
        }
    }
],

}

I’ve only been able to get the first translation by doing const afLang = requestPromptsJsonRequest.translations[0].html; within Cypress. I’m not sure how to do a where clause to take the HTML relevant to the language code and not just the number in the translations JSON

Answers

here is the TypeScript code for the same:

import * as jsonpath from 'jsonpath';

const jsonData = {
  "name": "Name",
  "text": "",
  "html": "HTML content",
  "tags": [],
  "translations": [
    {
      "html": "HTML I don't want",
      "text": "",
      "language": {
        "code": "AF",
        "name": "AF"
      }
    },
    {
      "html": "HTML I want",
      "text": "",
      "language": {
        "code": "DE",
        "name": "German"
      }
    }
  ]
};

const htmlWithLanguageCode = jsonpath.query(jsonData, '$.translations[?(@.language.code == "DE")].html');

console.log(htmlWithLanguageCode);

Instead of using JSON Path, you can use Array.find() to retrieve the translations object with the correct language code.

const data = {
  name: 'Name',
  text: '',
  html: 'HTML content',
  tags: [],
  translations: [
    {
      html: "HTML I don't want",
      text: '',
      language: {
        code: 'AF',
        name: 'AF',
      },
    },
    {
      html: 'HTML I want',
      text: '',
      language: {
        code: 'DE',
        name: 'German',
      },
    },
  ],
};

// We want to grab the `translations` array and then use `.find()` to retrieve the correct object.
const deHTML = data.translations.find((x) => x.language.code === 'DE').html;
console.log(deHTML)

You could also abstract that variable assignment to a function.

const data = {
  name: 'Name',
  text: '',
  html: 'HTML content',
  tags: [],
  translations: [
{
  html: "HTML I don't want",
  text: '',
  language: {
    code: 'AF',
    name: 'AF',
  },
},
{
  html: 'HTML I want',
  text: '',
  language: {
    code: 'DE',
    name: 'German',
  },
},
  ],
};

const getHTMLByLanguageCode = (code) => {
  return data.translations.find((x) => x.language.code === code).html
}

const afHTML = getHTMLByLanguageCode('AF');
console.log('afHTML is: ' + afHTML);
const deHTML = getHTMLByLanguageCode('DE');
console.log('deHTML is: ' + deHTML);

Cypress has a version of lodash attached which has a find method that can take a pattern to match

In the test:

const jsonData = {
  ...  // as specified in question
};

const translation = Cypress._.find(jsonData.translations, {language: { code: 'DE'}})
const html = translation.html
expect(html).to.eq('HTML I want')      // passes

Runnable example:

const jsonData = {
  "name": "Name",
  "text": "",
  "html": "HTML content",
  "tags": [],
  "translations": [
    {
      "html": "HTML I don't want",
      "text": "",
      "language": {
        "code": "AF",
        "name": "AF"
      }
    },
    {
      "html": "HTML I want",
      "text": "",
      "language": {
        "code": "DE",
        "name": "German"
      }
    }
  ]
}

const translation = _.find(jsonData.translations, {language: { code: 'DE'}})
document.querySelector('span').innerText = translation.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<span id="result"></span>

Please signup or login to give your own answer.

Click here to cancel reply.