How to replace a particular json with another json in react

Question

I am using github api and got the content of manifest.json file.

I am trying to add some new json lines into that existing json folder.

This the old content which is existing


{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

this is the expected content output , after adding those new json contents it should look like this

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "maskable.png",
      "sizes": "280x280",
      "type":"image/png",
      "purpose": "any maskable"
    },
    {
      "src": "logo192.png",
      "sizes": "192x192",
      "type": "image/png"
      },
      {
        "src": "logo256.png",
        "sizes": "256x256",
        "type": "image/png"
      },
      {
        "src": "logo348.png",
        "sizes": "348x348",
        "type": "image/png"
      },
      {
        "src": "logo512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

I tried string.replace but it is not working


let newContent = oldContent.replace(`{"src": "favicon.ico","sizes": "64x64 32x32 24x24 16x16","type": "image/x-icon"},`,  
`{"src": "logo256.png","sizes": "256x256","type": "image/png"},{"src": "logo348.png","sizes": "348x348",         "type": "image/png"},`);

Can you please mention the specific fields that you're trying to replace? — Arman
– Arman, Commented Nov 15, 2022 at 9:58
Instead of replacing, if new JSON fields can be added to icons that is also fine — user19672461
– user19672461, Commented Nov 15, 2022 at 10:40

Rana Muhammad Usama · Accepted Answer · 2022-11-15 10:06:10Z

1

You have to read data from json file first.After reading data you can use JSON.parse(filedata) method to convert your data to java script object. After converting you can replace data by manipulating JavaScript object.After Replacing the data you have to stringfy the java script objects using JSON.stringfy(data).And last step to write it again in file.

answered Nov 15, 2022 at 10:06

Rana Muhammad Usama

3223 silver badges11 bronze badges

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

2 Comments

user19672461 Over a year ago

after converting the string content to a js object, I am able to access icons from the content seperately. Now ,how to add extra json fields inside that icons?

Rana Muhammad Usama Over a year ago

You can add new attribute/data into java script object using java script object manipulation techniques. e.g in case of you want to add new icon in icons. data.icons=[...data.icons,{src:"new",size:"new",type:"new"}].I am using spread opreater to insert data you can choose any technique. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Uri Loya · Accepted Answer · 2022-11-15 10:11:53Z

0

Instead of manipulating strings, you can convert it to an object and add values:

var json_object = JSON.parse(`{"src": "favicon.ico"...`);

json_object.icons = "{
  "src": "maskable.png",
  "sizes": "280x280",
  "type":"image/png",
  "purpose": "any maskable"
}"

answered Nov 15, 2022 at 10:11

Uri Loya

1,4312 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to replace a particular json with another json in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related