Need help on API Integrations and Responsive Screen Design

[Salmankhan033]

I am new to Native Script,
I call the API :

  try {
      const response = await fetch("https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=XP2mJDptKJntuwHEDG8hBReABWvuO7A1").then((res)=>{
        // console.log("aaaa",res?.results?.books);
        console.dir("BOOOKKKK",res);
        setBooks(res)
      }).catch((error)=>{
        console.error("eee"+error);
      })

    } catch (error) {
      console.error(error);
    }
   }

OutPut console is :

BOOOKKKK  {
 "type": "default",
 "status": 200,
 "ok": true,
 "statusText": "OK",
 "headers": {
 "map": {
 "content-encoding": "gzip",
 "access-control-allow-methods": "GET, OPTIONS",
 "server": "Apache/2.4.38 (Debian)",
 "strict-transport-security": "max-age=63072000; preload; includeSubdomains",
 "x-timer": "S1679386055.869868,VS0,VE1",
 "accept-ranges": "bytes",
 "access-control-allow-origin": "*",
 "x-served-by": "cache-bfi-krnt7300056-BFI",
 "access-control-allow-headers": "Accept, Content-Type, X-Forwarded-For, X-Prototype-Version, X-Requested-With",
 "via": "1.1 google, 1.1 varnish",
 "vary": "Accept-Encoding",
 "date": "Tue, 21 Mar 2023 08:07:35 GMT",
 "connection": "keep-alive",
 "x-cache-hits": "1",
 "transfer-encoding": "Identity",
 "access-control-expose-headers": "Content-Length, X-JSON",
 "age": "50",
 "x-cache": "HIT",
 "cont<…>

My question is that in console did not show full data, it show <...> and stop. I want to access res.results.books but can’t.
also, I take the API response as a local variable but also show the same outPut console(mean data is in huge amount).
how to handle it please help me.

Also, I have another question, I jump from React_Native In react native I use the react-native-responsive-screen for responsive UI it native script how ho handle responsive UI(Simple % library etc)

[rigor789]

What you are seeing in the console is the a Fetch Response - you need to convert it to json if you want to access json data:

const response = await fetch(
  'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=XP2mJDptKJntuwHEDG8hBReABWvuO7A1'
)
  .then((res) => {
    if (res.ok) {
      // if the response was OK - get the json data...
      return res.json();
    }

    // handle error responses in some way. For example - throw and catch below...
    console.log({
      status: res.status,
      statusText: res.statusText,
    });
    throw new Error('Could not fetch books.');
  })
  .then((res) => {
    console.dir('result', res);
    console.dir('books', res.results.books);
  })
  .catch((err) => {
    console.error(err);
  });

Note: I added basic error handling - but in real apps you will need to handle bad responses in some way that makes sense for the app. (ie. show an error to the user)

fetch reference: https://developer.mozilla.org/en-US/docs/Web/API/fetch#examples

As for building your UI - refer to the various layouts available:

• https://docs.nativescript.org/ui-and-styling.html#absolutelayout

I generally use GridLayout for most of my layouts with "fluid" sizes like auto, * etc.