How to post a json array in react native

Question

I have a JSON array like this. I want to post it via fetch function. i didn't find any reference for this kind of problems

[
    {
        "id": 824233,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 71,
        "comments": "Testing",
    },
    {
        "id": 824234,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 188,
        "comments": "test",
    },
    {
        "id": 824235,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 188,
        "comments": "Test",
    }
]

I want to post this array

score 1 · Answer 1 · answered Sep 28 '16 at 11:31

Just use JSON.stringify(yourArray) to convert the array JSON object to a string, then post it.

var myArray = [
    {
        "id": 824233,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 71,
        "comments": "Testing",
    },
    {
        "id": 824234,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 188,
        "comments": "test",
    },
    {
        "id": 824235,
        "project_id": 1457,
        "issue_id": 123420,
        "activity_id": 188,
        "comments": "Test",
    }
];

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(myArray)
})

Source: https://facebook.github.io/react-native/docs/network.html#making-requests

score 1 · Answer 2 · answered Sep 29 '16 at 19:40

Ahmed is right you have to stringify your JSON when using fetch. JQuery and other libraries do this for you automatically.

I created a small helper function to use with fetch that stringifies your data for you and has some other built in magic.

export default function headersFactory(jwtToken) {
  return function headers(method, data) {
    const header = {
      mode: 'cors',
      method,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    };
    if (jwtToken) header.headers.Authorization = `Bearer ${jwtToken.hash}`;
    if (data) header.body = JSON.stringify(data);
    return header;
  };
}

Now you can call it like this:

import headersFactory from './headersFactory';

fetch('https://mywebsite.com/endpoint/', headersFactory(token)('post', myArray))
  .then(res => res.json())
  .then(data => console.log(data));

The token argument is for auth and is optional you can also call it like:

// this
const headers1 = headersFactory()('post', myArray);

// or this
const headers2 = headersFactory()('get');

// or this
const headers3 = headersFactory({ hash: 'asdfo3qi38094' })('delete');

score 0 · Answer 3 · answered Sep 28 '16 at 10:30

0

you can do for loops and post for each element of that array via fetch

answered Sep 28 '16 at 10:30

rudydydy

749
7
11

That's ok. if i have 100 data its taking to much of time. I want to know is there any method to do post the JSON array – Vikiesakki Sep 28 '16 at 10:41
you can use Promise fetch, https://facebook.github.io/react-native/docs/network.html#handling-the-response – rudydydy Sep 28 '16 at 10:43
Can you explain brief... please... In doc posting the array is not there – Vikiesakki Sep 28 '16 at 11:00

karumari dhasan.m · Answer 4 · 2021-03-09T08:57:14.873

0

var item ={} // declaring object array
var array =[] // declaring array
item["id"] = '824233';              //adding object to the object array
item["project_id"] = ' 1457';
item["issue_id"] = '123420';
item["activity_id"] = '71';
item["comments"] = 'Testing';

array.push(item) // pushing the object in the declared array 
var strArray =JSON.stringify(array);// stringify the array

//regular api call fetch('https:www.yourapi.com', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(strArray) })

edited Mar 09 '21 at 08:57

answered Mar 03 '21 at 11:59

karumari dhasan.m

1
1

1

Hi! Please add some text to your answer, it should not be source-code only with no information given. Links to a tutorial / documentaion would be nice as well. You should style your source code as javascript (see help how to do that) – Peter Krebs Mar 03 '21 at 13:00
@PeterKrebs i have added explanation in the code , kindly let me know if you find it difficult to understand. happy to help you. – karumari dhasan.m Mar 09 '21 at 08:58
It's not that I don't understand it. It is not a good answer without an explanation. You only added more code as the answer. Please write sentences describing why your answer is the correct one. I am not asking for lack of understanding - I am reviewing your answer. Writing "stringify the array" when the code says stringify(array) - how does that teach me? I'm not talking about explaining the obvious. "declaring array"? Yes you are declaring an array why would someone need to know that? Describe why your answer works, not only what the source code means. – Peter Krebs Mar 10 '21 at 10:05
Look at the other answers here. The ones with good text and maybe a link to the documentation or a tutorial are what this platform is about. Good explanations. You are building an array with objects in it for 90% of your answer given - that's already a given in the OP. It has that array with objects already. It is the sending part that he wants to know about. Read the longer answers here and you'll understand I hope. – Peter Krebs Mar 10 '21 at 10:11

How to post a json array in react native

4 Answers4

Linked