Блог

Мой JSON:

 {
    "id": 1,
    "userId": 34,
    "cerealId": 1,
    "metadata": {
        "latitude": "47.484574",
        "longitude": "4.341844",
        "precision": "461.43"
    },
    "createdAt": "2020-07-13T00:00:00.000Z",
    "updatedAt": "2020-07-13T00:00:00.000Z"
}
  

Мне нужно отобразить объект «метаданные», и это мой код:

 
    import React,{useState,useEffect, Fragment} from 'react';
    import {getCookie} from '../helpers/Helpers';
    import moment from 'moment';
    import { read } from './apiAdmin';
    
    
    const IndividualSample = (props) => {
    
        const token = getCookie('accessToken')  //// <-- right one
        //const Id = getCookie('token')
    
        const [order, setOrder] = useState({});
        const [error, setError] = useState(false);
    
    
        const loadSingleOrder = orderId => {
            read(orderId,token).then( data => {
                if (data.error){
                    setError(data.error)
                } else {
                    setOrder(data)
                }
            })
        }
    
        const showInput = (key, value) => {
            return (
                <div className="input-group mb-2 mr-sm-2">
                    <div className="input-group-prepend">
                        <div className="input-group-text">{key}</div>
                    </div>
                    <input type="text" value={value} className="form-control" readOnly/>
                </div>
            )
        }
    
        useEffect (() => {
            const orderId = props.match.params.orderId
            loadSingleOrder(orderId)
            
        },[props])
    
        const showSingleSample = () => {
            return (
                <div className="card mr-2 mt-2 mb-5">
                    <ul className="list-group">
                        <li className='list-group-item'>ID Sample: {order.id} </li>   
                        <li className="list-group-item">User ID: {order.userId}</li>
                        <li className="list-group-item">Cereal ID: {order.cerealId}</li>
                        <li className='list-group-item' style={{fontWeight:'bold'}}>Created At:{" "}
                                {moment(order.createdAt).locale('es').format('LL')}
                        </li>
                        <h2 className='mt-2 mb-5 text-center' >METADATA :</h2>
                        {order.data?.map((p, pIndex) => (
                            <div className='mb-4' key={pIndex} style={{padding:'20px', border:'1px solid indigo'}}>
    I need render this --->         {showInput('Latitude:', p.latitude)} 
                                    {showInput('Longitude:', p.longitude)}  
                            </div> ))}
                    </ul>
                </div>
            )
        }
    
        return(
            <>
                <h1>Soy Individual samples</h1>
                <div className='container'>
                    {showSingleSample()}
                    {JSON.stringify(order.metadata)}
                </div>
            </>
        )
    }

  

Я могу отобразить другие параметры cerealId и userId т. Д. Но поскольку я не получил объект в виде массива, я не знаю, как правильно отобразить его.

Я могу видеть только параметры JSON.stringify(order.metadata) , но мне нужно отобразить их внутри div тега.

Я не могу отобразить «метаданные». Если кто-то может мне помочь, я буду признателен!

metadata это объект, который вам нужно будет использовать Object.entries (может потребоваться полизаполнение):

 
{ Object.entries(order.metadata).map(([key, value]) => (
  <div>{key}: {value}</div>
))}
  

Кроме того, убедитесь, что это order.metadata или order.data .