Modify JSON file or convert it to JS. React

Question

Modify JSON file or convert it to JS. React

Navigation

#1 by (0 votes)

-1

I have a JSON file which is a "database", since I still do not have knowledge of that type.

{
  "words": [
    {
      "id": 1,
      "word": "Silla",
      "principal": "http://pngimg.com/uploads/chair/chair_PNG6860.png",
      "engword": "Chair",
      "engimg": "Imagen de ingles",
      "deuword": "Stuhl",
      "deuimg": "Imagen de aleman"
    },
    {
      "id": 2,
      "word": "Gilbert",
      "principal": "http://pngimg.com/uploads/chair/chair_PNG6860.png",
      "engword": "Chair",
      "engimg": "Imagen de ingles",
      "deuword": "Stuhl",
      "deuimg": "Imagen de aleman"
    }
  ]
}

That's my JSON file and I'd like to convert it to JS or something similar so I can edit it using my React components.

javascript react

asked by Diego Cardona 25.12.2018 в 18:19

source

1 answer

Hide console with codeblocks Load Script from another server, Chrome Extension (for private use)

score 0 · Accepted Answer

JSON is a kind of acronym formed from the word J ava S cript OR bject N otation, and is a way to save Js objects in text, for that reason it is possible to read the json as naturally as to do the following in your file.

import React from 'react'
import { words } from './miswords.json' // O el nombre de tu archivo

export default () => (
  <ul>
    {words.map(({ word, id }) => (
      <li key={id}>{word}</li>
    ))}
  </ul>
)

And that way you can consume that data. However if you want to manipulate the option of "learned": "true" , from a browser that is something else. Well, you should consider that each person who enters from their browser must have their own file (so that the approach you propose works) or connect it to a database (which is the most obvious). A simple way you could do is persist your status with a tool that has access to localStorage and you can save your status in each client.