How do you extract array elements from JSON?

Ask the community
,
1

I apologize for the question since I’m sure it’s a basic one, but I’ve been looking at the excellent documentation and examples and I’ve tried several things, but I can’t come up with the solution.

CONTEXT
I have a simple form with one input field and a submit button. I want to input a movie ID (number) and use The Movie Database API to pull the movie details and show them using text fields.

I have been able to do that with one element of the details (original title). Here’s the code:

BACK END

// Filename: backend/tmdbModule.jsw (web modules need to have a .jsw extension)

import {fetch} from 'wix-fetch';
import {getSecret} from 'wix-secrets-backend'; 

export async function getMovie(movie) {
 const url = 'https://api.themoviedb.org/3/movie/';
 const key = await getSecret("tmdb_API_key");
 
 let fullUrl = url + movie + '?api_key=' + key + '&language=en-US'; 
 
 return fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => json.original_title)
}

FRONT END

$w.onReady(function () {
});

import {getMovie} from 'backend/tmdbModule';

export function submitButton_click(event) {
     getMovie($w("#movieIDinput").value)
        .then(original_title => $w("#movietitle").text = original_title)
}

The JSON response has more elements. See example:

{
  "adult": false,
  "backdrop_path": "/fCayJrkfRaCRCTh8GqN30f8oyQF.jpg",
  "belongs_to_collection": null,
  "budget": 63000000,
  "genres": [
    {
      "id": 18,
      "name": "Drama"
    }
  ],
  "homepage": "",
  "id": 550,
  "imdb_id": "tt0137523",
  "original_language": "en",
  "original_title": "Fight Club",
  "overview": "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground \"fight clubs\" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.",
  "popularity": 0.5,
  "poster_path": null,
  "production_companies": [
    {
      "id": 508,
      "logo_path": "/7PzJdsLGlR7oW4J0J5Xcd0pHGRg.png",
      "name": "Regency Enterprises",
      "origin_country": "US"
    },
    {
      "id": 711,
      "logo_path": null,
      "name": "Fox 2000 Pictures",
      "origin_country": ""
    },
    {
      "id": 20555,
      "logo_path": null,
      "name": "Taurus Film",
      "origin_country": ""
    },
    {
      "id": 54050,
      "logo_path": null,
      "name": "Linson Films",
      "origin_country": ""
    },
    {
      "id": 54051,
      "logo_path": null,
      "name": "Atman Entertainment",
      "origin_country": ""
    },
    {
      "id": 54052,
      "logo_path": null,
      "name": "Knickerbocker Films",
      "origin_country": ""
    },
    {
      "id": 25,
      "logo_path": "/qZCc1lty5FzX30aOCVRBLzaVmcp.png",
      "name": "20th Century Fox",
      "origin_country": "US"
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "US",
      "name": "United States of America"
    }
  ],
  "release_date": "1999-10-12",
  "revenue": 100853753,
  "runtime": 139,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "How much can you know about yourself if you've never been in a fight?",
  "title": "Fight Club",
  "video": false,
  "vote_average": 7.8,
  "vote_count": 3439
}

Question:

If I want to use more of the JSON elements, say “overview,” to display them in other text fields, how would I go about it?

2

I found the solution. I just return the entire JSON response to the frontend, and the frontend can decide what to display.

BACKEND

import {fetch} from 'wix-fetch';
import {getSecret} from 'wix-secrets-backend'; 
    
export async function getMovie(movie) {
 const url = 'https://api.themoviedb.org/3/movie/';
 const key = await getSecret("tmdb_API_key");
 
 let fullUrl = url + movie + '?api_key=' + key + '&language=en-US'; 
 
 return fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => json)

FRONTEND

import {getMovie} from 'backend/tmdbModule';

export function submitButton_click(event) {
     getMovieDetails($w('#input1').value)
        .then(movie => {
              let year = movie.release_date.substring(0, 4); // Extract year from release_date
              $w('#originaltitleandyear').text = movie.original_title + " (" + year + ")"; // Concatenate original title with year

              $w('#image1').src = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
              $w('#image1').fitMode = "fixedWidth";

              $w('#overview').text = movie.overview;

          });
}