I want to list the json response. How do i render nested json inside my jsx?
following is json response
[{
"data": {
"total_students": 13,
"seats": "",
"categories": [{
"id": 28,
"name": "Economy",
"slug": "economy",
}],
"instructor": {
"id": "24",
"name": "Ad",
"sub": ""
},
"menu_order": 0
},
"headers": [],
"status": 200
}
This is how the response looks like. Also rendering in react is as shown below
return this.state.user.map(user =>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Text key= {user.data.name} style={styles.userStyle}>{this.state.user.data}</Text>
</View>
</CardSection>
I have tried like the above but getting error in rendering part cannot define name of undefined.What wrong am i doing?please help
You don't have a key name in data object that undefined If you want to nested JSON you can access like
name in instructor : user.data.instructor.name
name in categories (array) : user.data.categories.map(category => category.name)
user.data.name does not seem to be present in your JSON response. The name could be user.data.instructor.name.
Related
In my front-end I am trying to map through nested objects which is coming from back-end Laravel collection:
[
{
"id": 1,
"name": "Chips",
"product_categories_id": 1,
"category": {
"id": 1,
"category": "Chips",
"brand": "Bombay Sweets"
}
},
{
"id": 2,
"name": "Book",
"product_categories_id": 2,
"category": {
"id": 2,
"category": "Shoe",
"brand": "Nike",
}
}]
I want to display the product name and related category name from nested object. My approach is:
products.map((product)=>{
console.log(product.name)
product.category.map((category)=>(
console.log(category.category)
))
})
which is not working at all. I spent huge amount of time to solve yet no luck.
the error it shows:
ProductListContainer.js:58 Uncaught TypeError: item.category.map is not a function
map method works only with Array. You can use product.category.category to access the value.
Finally solved by this:
products.map((product) => {
console.log(product.name)
Object.entries(product.category).map(() => (
console.log(product.category.category, product.category.brand)
))
})
I am making one screen where I am getting data from a fetch API call. In the console its showing the message success and giving the data. Below is the JSON I am getting from API response
{
"msg": "Success",
"type": "success",
"data": {
"15": {
"order_number": "",
"products_info": [
{
"name": "Rose",
"qty": 1,
"base_price": 75
}
],
"can_dispatch": false,
"can_complete": false,
},
"16": {
"order_number": "",
"products_info": [
{
"name": "Rosehip",
"qty": 1,
"base_price": 205
}
],
"can_dispatch": false,
"can_complete": false,
},
"17": {
"order_number": "",
"products_info": [
{
"name": "Cloth Bag ",
"qty": 4,
"base_price": 20
},
],
"can_dispatch": false,
"can_complete": false,
}
},
"success": true
}
I want to display using FlatList. I am getting a response from API and storing in this.state.items
Here is my code
<View style={styles.container}>
<FlatList
data={this.state.items.data}
renderItem={({item}) =>
<View style={{height: 50}}>
<Text style={{height: 50}}>{item.products_info.name}</Text>
<View style={{height: 1,backgroundColor:'gray'}}></View>
</View>
}
/>
</View>
Please help
As per Flatlist docs for React Native, the "data" prop must be an array.
https://reactnative.dev/docs/flatlist#required-data
I've modified your code to get it working - https://snack.expo.io/YkdUl2G4B
Please take a look and let me know if you have any questions or concerns around it.
I am recieving a JSON response back from an API which isnt in the right format to be parsed.
I have tried to add the missing key at the start and it won't allow it.
[
{
"deviceId": "9092eab10f4",
"name": "temperature",
"timestamp": "2017-06-13T13:19:59.673Z",
"value": 21.5
},
{
"deviceId": "9092eab10f4",
"name": "temperature",
"timestamp": "2017-06-13T13:19:59.673Z",
"value": 21.5
}
]
I would like this to have the missing key and additional curly bracket like so:
{
"data": [
{
"deviceId": "9092eab10f4",
"name": "temperature",
"timestamp": "2017-06-13T13:19:59.673Z",
"value": 21.5
},
{
"deviceId": "9092eab10f4",
"name": "temperature",
"timestamp": "2017-06-13T13:19:59.673Z",
"value": 21.5
}
]
}
I'm not sure if the response you're getting is a string or an object.
Here's a fiddle that considers both scenarios and logs your expected output to the console.
https://jsfiddle.net/6yu9ngf5/2/
I've used JSON.parse(<string>) for the case where the response is string.
For other case I just added data key to your response.
Simple object assign?
const properResponse = Object.assign({}, {data: [response.json()]});
...assuming response is fetch, or similar with a json method which returns the response object.
I am working with facebook JS SDK which returns user's information in JSON format. I know how to get the response like response.email which returns email address. But how to get an element from a nested array object? Example: user's education history may contain multiple arrays and each array will have an element such as "name" of "school". I want to get the element from the last array of an object.
This is a sample JSON I got:-
"education": [
{
"school": {
"id": "162285817180560",
"name": "Jhenaidah** School"
},
"type": "H**hool",
"year": {
"id": "14404**5610606",
"name": "2011"
},
"id": "855**14449421"
},
{
"concentration": [
{
"id": "15158**968",
"name": "Sof**ering"
},
{
"id": "20179020**7859",
"name": "Dig**ty"
}
],
"school": {
"id": "10827**27428",
"name": "Univer**g"
},
"type": "College",
"id": "9885**826013"
},
{
"concentration": [
{
"id": "108196**810",
"name": "Science"
}
],
"school": {
"id": "2772**996993",
"name": "some COLLEGE NAME I WANT TO GET"
},
"type": "College",
"year": {
"id": "1388*****",
"name": "2013"
},
"id": "8811215**16"
}]
Let's say I want to get "name": "some COLLEGE NAME I WANT TO GET" from the last array. How to do that with Javascript? I hope I could explain my problem. Thank you
Here is a JsFiddle Example
var json = '{}' // your data;
// convert to javascript object:
var obj = JSON.parse(json);
// get last item in array:
var last = obj.education[obj.education.length - 1].school.name;
// result: some COLLEGE NAME I WANT TO GET
If your json above was saved to an object called json, you could access the school name "some COLLEGE NAME I WANT TO GET" with the following:
json.education[2].school.name
If you know where that element is, then you can just select it as already mentioned by calling
var obj = FACEBOOK_ACTION;
obj.education[2].school.name
If you want to select specifically the last element, then use something like this:
obj.education[ obj.education.length - 1 ].scool.name
Try this,
if (myData.hasOwnProperty('merchant_id')) {
// do something here
}
where JSON myData is:
{
amount: "10.00",
email: "someone#example.com",
merchant_id: "123",
mobile_no: "9874563210",
order_id: "123456",
passkey: "1234"
}
This is a simple example for your understanding. In your scenario of nested objects, loop over your JSON data and use hasOwnProperty to check if key name exists.
I am having problem with my data.
My JSon looks like that:
[
{
"link": {
"created_at": "2013-10-07T13:31:43+09:00",
"id": 8,
"items_count": 4,
"key": "0iqVSnTU-BtJ1ItVKRe2VMWvRMU",
"mode": "standard",
"name": "sdasadads",
"pusher_key": "1jtsrzl3n6i1DKA3tSZJM6LPnfQ",
"readonly_key": "R_dD5oHMsruu0YzYVKEOA8hKKXA-r",
"updated_at": "2013-10-08T14:06:07+09:00",
"user_id": 2
}
},
{
"link": {
"created_at": "2013-10-07T13:32:56+09:00",
"id": 9,
"items_count": 1,
"key": "Mj-6Cc-_qaGlVTPgqKexzeijYNA",
"mode": "standard",
"name": "Untitled2",
"pusher_key": "hGE0D8TSar_H_Gv9MWdpj26gamM",
"readonly_key": "T53SNKPgyf7KvRUMzDQPaM99AAc-r",
"updated_at": "2013-10-07T13:33:14+09:00",
"user_id": 2
}
},
{
"link": {
"created_at": "2013-10-11T11:18:06+09:00",
"id": 10,
"items_count": 0,
"key": "X_ZoKxFPHtsvSU5W11gXx1653FU",
"mode": "standard",
"name": "Usdadasas",
"pusher_key": "0PZ860awofRKB9XIrXba-xY6u14",
"readonly_key": "2rzrRZAaR7UZRK3UbUId8xmFzd4-r",
"updated_at": "2013-10-11T11:18:06+09:00",
"user_id": 2
}
}
}
I am trying to print put all the names of the links like that:
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
document.getElementById("test").innerHTML = data[link][0].name;
});
but it doesn't work.
How can I grub all the names and put it in html?
The objects are inside the array, not the other way around.
link is a literal property name, not a variable containing one as a string
Thus:
data[0]['link']['name']
You'll also need to make sure that the response has an application/json content type.
Grabbing all the names will require you to use a loop and change the 0 each time round it.
First of all change last "}" to "]" (your top structure is array not object )
Then try this
$.post( "http://0.0.0.0:9292/api/links", function( data ) {
document.getElementById("test").innerHTML = data[0].link.name;
});
Array.prototype.map() is a good way to fetch something from data structure. With your test data in data variable, could would look like this:
Example here.
<div class="names"></div>
var names = data.map(function (item) {
return item.link.name
});
document.querySelector(".names").innerHTML = names;