17

Using REST, I am retrieving an object(JSON format) which is to be converted to an array so that it can be inserted into a table.

This is done in the rendering function of React.

The input is updated every N minutes from the back-end.

How do I convert an object to an array?

I need only the values, not the keys, since the keys are already present as column values beforehand in the table itself.

1
  • 1
    have you tried writing any code yet for this question? Commented Jan 5, 2017 at 13:27

4 Answers 4

39

You can use Object#values (ECMAScript 2017), but it's not supported by IE (see browser's compatibility).

Note: The ECMAScript 6 specification defines in which order the properties of an object should be traversed. This blog post explains the details.

const map = { a: 1, b: 2, c: 3 };

const result = Object.values(map);

console.log(result);

If you need to support IE, you can use Object#keys with Array#map:

const map = { a: 1, b: 2, c: 3 };

const result = Object.keys(map).map((key) => map[key]);

console.log(result);

Sign up to request clarification or add additional context in comments.

4 Comments

Thanks, browser compatibility is assumed to be the newest; I think your first method would work. Now I just need to see how I can get the data from the REST api, I have it defined in react as var tableDataMap = this.props.data.dataMap; and need to pass it down to a new const as yours above, I presume? Along those lines.
Before you try to do that, learn how to work with async calls in JS. The are promises, generators, and async wait, but you should start with promises.
Do you have any material for those? If possible. By the way, ` console.log(Object.values(tableDataMap));` produces the REST API data on the browser console... But I have difficulty getting them in the table properly. Anyway.. Too difficult to write here I think.
This is a tutorial for using fetch and promises to make async calls - JavaScript Promises: Plain and Simple.
5

I am not sure by map you mean the Map object or an ordinary JS object. However, just for variety I would like to mention that the Map objects are mostly (probably always) stringified like JSON.stringify([...myMap]). So if you happen to receive a Map object in JSON data may be you should do something like;

var myMap = new Map().set(1,"hey").set(2,"you"),
  mapData = JSON.stringify([...myMap]),
   values = JSON.parse(mapData).map(d => d[1]);
console.log("mapData:",mapData);
console.log("values:",values);

Comments

0

You can set initial value as array firstly. See this example:

const [conversations, setConversations] = useState([]); // fianal data is array

useEffect(() => {
    const fetchConversations = async () => {
       const res = await axios.get("/conversations/" + user._id);              
       setConversations(res.data);              
    };
    fetchConversations();
  }, [user._id]);

res.data convert to array by using useState([]) as initial value and convert to object by using useState({}).

And

return( {conversations.map((conv) => ( ))} )

Comments

0

You can set initial value as array firstly. See this example:

const [conversations, setConversations] = useState([]); // fianal data is array

useEffect(() => {
    const fetchConversations = async () => {
       const res = await axios.get("/conversations/" + user._id);              
       setConversations(res.data);              
    };
    fetchConversations();
  }, [user._id]);

res.data convert to array by using useState([]) as initial value and convert to object by using useState({}).

And map this array:

return (
    <>
       {conversations.map((conv) => 
            (<Conversations key={conv._id} conversation={conv} />))}
    </>
)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.