Submit Form Using Fetch API

[
   {
      "mostrar":"in,out",
      "label":"CURSO DE FORMAÇÃO EM TERAPEUTA AYURVEDA",
      "campo":"cursotitulo",
      "tipo":"titulo6",
      "colunas_in":"12",
      "colunas_out":"12"
   },
   {
      "mostrar":"in,out",
      "label":"Nome Completo",
      "campo":"nomecompleto",
      "tipo":"text",
      "colunas_in":"12",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Data de nascimento",
      "campo":"data_nasc",
      "tipo":"data",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"CPF",
      "campo":"nrocpf",
      "tipo":"cpf",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Estado Civil",
      "campo":"estado_civil",
      "tipo":"select_valor",
      "colunas_in":"6",
      "colunas_out":"4",
      "opcoes":[
         "Casado",
         "Solteiro",
         "Separado",
         "Viuvo"
      ],
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Profissão",
      "campo":"profi",
      "tipo":"text",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Email",
      "campo":"email",
      "tipo":"text",
      "colunas_in":"12",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Telefone Celular",
      "campo":"telcelular",
      "tipo":"text",
      "placeholder":"(xx) x xxxx-xxxx",
      "colunas_in":"6",
      "colunas_out":"6",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Telefone Residencial",
      "campo":"telresidencial",
      "tipo":"text",
      "placeholder":"(xx) x xxxx-xxxx",
      "colunas_in":"6",
      "colunas_out":"6"
   },
   {
      "mostrar":"in,out",
      "label":"Endereço",
      "campo":"logradouro",
      "tipo":"text",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"Cidade",
      "campo":"cid",
      "tipo":"text",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"CEP",
      "campo":"cep_user",
      "tipo":"text",
      "colunas_in":"6",
      "colunas_out":"4",
      "requerido":"1"
   },
   {
      "mostrar":"in,out",
      "label":"PAGAMENTO",
      "campo":"pagamento",
      "tipo":"titulo6",
      "colunas_in":"12",
      "colunas_out":"12"
   },
   {
      "mostrar":"in,out",
      "label":"Forma de Pagamento",
      "campo":"forma_pagamento",
      "tipo":"select_valor",
      "colunas_in":"6",
      "colunas_out":"6",
      "requerido":"1",
      "opcoes":[
         "À vista",
         "À prazo",
         "Boleto",
         "Cheque"
      ],
      "conditions":[
         {
            "when":"equal",
            "value":"À prazo",
            "action":{
               "show":[
                  "parcelas"
               ],
               "required":[
                  "parcelas"
               ]
            }
         }
      ]
   },
   {
      "mostrar":"in,out",
      "label":"Em quantas parcelas?",
      "campo":"parcelas",
      "tipo":"number",
      "colunas_in":"12",
      "colunas_out":"12",
      "classe":"hide"
   },
   {
      "mostrar":"in,out",
      "label":"Escola",
      "campo":"escola",
      "tipo":"select_valor",
      "colunas_in":"12",
      "colunas_out":"12",
      "requerido":"1",
      "opcoes":[
         "Semente da Paz",
         "Leveza do Ser",
         "Beija Flor",
         "La vie",
         "Karina Gomes"
      ],
      "aceita_recategorizar":"1"
   },
   {
      "mostrar":"in,out",
      "label":"TERMO DE AUTORIZAÇÃO",
      "campo":"termo",
      "tipo":"titulo6",
      "colunas_in":"12",
      "colunas_out":"12"
   },
   {
      "mostrar":"in,out",
      "campo":"autori",
      "tipo":"texto",
      "valor_padrao":"Eu, autorizo a gravar (minha imagem em vídeo ou fotografia) e veicular minha imagem e depoimentos em qualquer meios de comunicação para fins didáticos, de pesquisa e divulgação de conhecimento científico sem quaisquer ônus e restrições. Fica ainda autorizada, de livre e espontânea vontade, para os mesmos fins, a cessão de direitos da veiculação, não recebendo para tanto qualquer tipo de remuneração. ",
      "colunas_in":"12",
      "colunas_out":"12"
   },
   {
      "mostrar":"in,out",
      "label":"Eu concordo e autorizo",
      "campo":"concordancia",
      "tipo":"checkbox",
      "colunas_in":"12",
      "colunas_out":"12",
      "requerido":"1"
   }
]

import org.json.*;


JSONObject obj = new JSONObject(" .... ");
String pageName = obj.getJSONObject("pageInfo").getString("pageName");

JSONArray arr = obj.getJSONArray("posts");
for (int i = 0; i < arr.length(); i++)
{
    String post_id = arr.getJSONObject(i).getString("post_id");
    ......
}

var contacts = '{ "people" : [' +
'{ "firstName":"Joe" , "lastName":"Smith" },' +
'{ "firstName":"Tom" , "lastName":"Hardy" },' +
'{ "firstName":"Ben" , "lastName":"Stiller" } ]}';

var newObject = JSON.parse(contacts);

var eventsVariable = '"{events":[' +
    '{"location": "New York", "date": "May 1", "public": "true"},' +
    '{"location": "London", "date": "Apr 24", "public": "false"},' +
    '{"location": "San Frans", "date": "Nov 30", "public": "false"}]}';
    

Escapes or unescapes a JSON string removing traces of offending characters that could prevent parsing.

The following characters are reserved in JSON and must be properly escaped to be used in strings:

Backspace is replaced with \b
Form feed is replaced with \f
Newline is replaced with \n
Carriage return is replaced with \r
Tab is replaced with \t
Double quote is replaced with \"
Backslash is replaced with \\

{
  // Required
  "manifest_version": 3,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "action": {...},
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Optional
  "author": ...,
  "automation": ...,
  "background": {
    // Required
    "service_worker": "background.js",
    // Optional
    "type": ...
  },
  "chrome_settings_overrides": {...},
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": {...},
  "converted_from_user_script": ...,
  "cross_origin_embedder_policy": {"value": "require-corp"},
  "cross_origin_opener_policy": {"value": "same-origin"},
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "https://path/to/homepage",
  "host_permissions": [...],
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_host_permissions": ["..."],
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "https://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

fetch("http://www.omdbapi.com/?s=harry potter&apikey=adf1f2d7")
  .then(response => response.json())
  .then((data) => {
    console.log(data);
  });

  const getMovies = async (url) => {
    setError(null);
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const data = await response.json();
      
      if (data.results.length === 0) {
        throw new Error("Sorry, no movies were found.");
      }
      
      const transformedMovies = data.results.map((movie) => {
        return {
          id: movie.id,
          title: movie.title,
          description: movie.overview,
          rating: movie.vote_average,
          genres: movie.genre_ids,
          poster_path: movie.poster_path,
          backdrop_path: movie.backdrop_path,
          year: movie.release_date
        }
      })
      setTotalPages(data.total_pages);
      setMovies(transformedMovies);
      chooseMovie(transformedMovies);
    } catch (errorThrown) {
      setError(errorThrown.message);
    }
  }

fetch("https://free-nba.p.rapidapi.com/teams?page=0", {
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "free-nba.p.rapidapi.com",
		"x-rapidapi-key": "d1e022a733msh4e2c4a1ea244bf9p1a3971jsnea127bfc9297"
	}
})
.then((response) => {
  return response.json() // << This is the problem
})
.then((responseData) => { // responseData = undefined
  console.log(responseData.data);
 
})
.catch(err => {
	console.error(err);
});

const token = 'YOUR_TOKEN_HERE';
fetch('https://api.github.com/user/repos', {
  headers: {
    Authorization: `token ${token}`
  }
})
  .then(res => res.json())
  .then(json => console.log(json));

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { Toolbar } from "../components/toolbar";
import imageUrlBuilder from "@sanity/image-url";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";

export default function Home({ posts, authors }) {
  const router = useRouter();
  const [mappedPosts, setMappedPosts] = useState([]);
  const [mappedAuthors, setMappedAuthors] = useState([]);
  console.log(mappedAuthors);
  console.log("mappedPosts: ", mappedPosts);

  useEffect(() => {
    if (posts.length && authors.length) {
      const imgBuilder = imageUrlBuilder({
        projectId: "9w4ss8xn",
        dataset: "production",
      });

      setMappedPosts(
        posts.map((p) => {
          return {
            ...p,
            mainImage: imgBuilder.image(p.mainImage).width(500).height(250),
          };
        })
      );
      setMappedAuthors(
        authors.map((a) => {
          return {
            ...a,
            image: imgBuilder.image(a.image).width(100).height(100),
          };
        })
      );
    } else {
      setMappedPosts([]);
    }
  }, [posts, authors]);

  return (
    <div>
      <Toolbar />
      <div className={styles.main}>
        <h1>Welcome To My Blog</h1>

        <h3>Recent Posts:</h3>

        <div className={styles.feed}>
          {mappedPosts.length ? (
            mappedPosts.map((p, index) => (
              <div key={index} className={styles.post}>
                <div
                  onClick={() => router.push(`/post/${p.slug.current}`)}
                  key={index}
                  className={styles.post}
                >
                  <h3>{p.title}</h3>
                  <img className={styles.mainImage} src={p.mainImage} />
                </div>
                {mappedAuthors
                  .filter((a) => a._id === p.author._ref)
                  .map((a, index) => (
                    <div key={index}>
                      <img src={a.image} />
                      <h4>{a.name}</h4>
                    </div>
                  ))}
              </div>
            ))
          ) : (
            <>No Posts Yet</>
          )}
        </div>
      </div>
    </div>
  );
}

export const getServerSideProps = async (pageContext) => {
  const query = encodeURIComponent('*[ _type == "post" ]');
  const qauthors = encodeURIComponent('*[ _type == "author" ]');
  const url = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${query}`;
  const urlauthors = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${qauthors}`;
  const result = await fetch(url).then((res) => res.json());
  const resultauthors = await fetch(urlauthors).then((res) => res.json());

  if (
    !result.result ||
    !result.result.length ||
    !resultauthors.result ||
    !resultauthors.result.length
  ) {
    return {
      props: {
        posts: [],
        authors: [],
      },
    };
  } else {
    return {
      props: {
        posts: result.result,
        authors: resultauthors.result,
      },
    };
  }
};

import styles from "../styles/Home.module.css";
//import imageUrlBuilder from "@sanity/image-url";
import { useState, useEffect } from "react";
import { getPostAndAuthors } from "../lib/api";

export default function Home({ posts }) {
  const [mappedPosts, setMappedPosts] = useState([]);
  console.log("mappedPosts2: ", mappedPosts);
  /*  console.log(
    "mappedPosts: ",
    mappedPosts.map((p, index) => console.log(p[index]))
  );
 */
  useEffect(() => {
    if (posts.length) {
      setMappedPosts(
        posts.map((p) => {
          return {
            ...p,
          };
        })
      );
    } else {
      setMappedPosts([]);
    }
  }, [posts]);

  return (
    <div>
      <div>
        <h3>Recent Posts:</h3>
        {/* Sin  _id == ^.author._ref no te va a hacer la relaciòn */}
        {/* 
          `*[_type == "post"]{
            title, 
            publishedAt,
            'author': *[_type == "author" && _id == ^.author._ref && genre== 'comedia']{
              genre,name, 'picture': image.asset->url} 
            }` 
        */}
        {/* Out:
        [
  {
    "author": [
      {
        "genre": "comedia",
        "name": "Cezar",
        "picture": "https://cdn.sanity.io/images/9w4ss8xn/production/48ef72edee2dd89a71e272beea5721e40281d5a0-340x317.jpg"
      }
    ],
    "publishedAt": "2022-05-05T02:37:00.000Z",
    "title": "Cuentos"
  },
  {
    "author": [
      {
        "genre": "comedia",
        "name": "Cezar",
        "picture": "https://cdn.sanity.io/images/9w4ss8xn/production/48ef72edee2dd89a71e272beea5721e40281d5a0-340x317.jpg"
      }
    ],
    "publishedAt": "2022-05-06T02:36:00.000Z",
    "title": "Tormenta"
  },
  {
    "author": [],
    "publishedAt": "2022-05-04T02:38:00.000Z",
    "title": "Rios del Desierto"
  }
]
           
        */}
        <div>
          {mappedPosts.map((p, index) => (
            <div className={styles.post} key={index}>
              <h4>{p.author.length > 0 ? p.title : null}</h4>
              {p.author.map((a, index) => (
                <p key={index}>{a.name}</p>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export const getServerSideProps = async () => {
  const posts = await getPostAndAuthors();
  return {
    props: {
      posts,
    },
  };
};

/* export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug();
  return {
    paths:
      allPosts?.map((post) => ({
        params: {
          slug: post.slug,
        },
      })) || [],
    fallback: true,
  };
} */

import client, { previewClient } from "./sanity";

const getUniquePosts = (posts) => {
  const slugs = new Set();
  return posts.filter((post) => {
    if (slugs.has(post.slug)) {
      return false;
    } else {
      slugs.add(post.slug);
      return true;
    }
  });
};

const postFields = `
  _id,
  name,
  title,
  'date': publishedAt,
  excerpt,
  'slug': slug.current,
  'coverImage': mainImage.asset->url,
  'author': author->{name, 'picture': image.asset->url},
`;

const getClient = (preview) => (preview ? previewClient : client);

export async function getPreviewPostBySlug(slug) {
  const data = await getClient(true).fetch(
    `*[_type == "post" && slug.current == $slug] | order(dpublishedAtate desc){
      ${postFields}
      body
    }`,
    { slug }
  );
  return data[0];
}

export async function getAllPostsWithSlug() {
  const data = await client.fetch(`*[_type == "post"]{ 'slug': slug.current }`);
  return data;
}

export async function getAllPostsForHome(preview) {
  const results = await getClient(preview)
    .fetch(`*[_type == "post"] | order(date desc, _updatedAt desc){
      ${postFields}
    }`);
  return getUniquePosts(results);
}

/* Relación Post-Author */
export async function getPostAndAuthors() {
  const data = await client.fetch(
    `*[_type == "post"]{title, publishedAt,'author': *[_type == "author" && _id == ^.author._ref && genre== 'comedia']{genre,name, 'picture': image.asset->url} }`
  );

  return data;
}

export async function getPostAndMorePosts(slug, preview) {
  const curClient = getClient(preview);
  const [post, morePosts] = await Promise.all([
    curClient
      .fetch(
        `*[_type == "post" && slug.current == $slug] | order(_updatedAt desc) {
        ${postFields}
        body,
        'comments': *[_type == "comment" && post._ref == ^._id]{name, text, _createdAt}
      }`,
        { slug }
      )
      .then((res) => res?.[0]),
    curClient.fetch(
      `*[_type == "post" && slug.current != $slug] | order(publishedAt desc, _updatedAt desc){
        ${postFields}
        body,
      }[0...2]`,
      { slug }
    ),
  ]);
  return { post, morePosts: getUniquePosts(morePosts) };
}

$("#purchase").click(function(){
  var addData = {
    'id':, /* ID Variant */
    'quantity':1
  };

  fetch('/cart/add.js', {
    body: JSON.stringify(addData),
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With':'xmlhttprequest',
    },
    method: 'POST'
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    /* we have JSON */
    console.log(json)
  }).catch(function(err) {
    /* uh oh, we have error. */
    console.error(err)
  });
  
});

async function postData(url = "", data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData("https://example.com/answer", { answer: 42 }).then((data) => {
  console.log(data); // JSON data parsed by `data.json()` call
});