JavaScript 之 JSON [4] parse()和stringify() -JSON字符串和JavaScript对象数据之间的相互转换

Posted 2023-04-14 滔 Roy

JavaScript 之 JSON [4] parse()和stringify() -JSON字符串和JavaScript对象数据之间的相互转换

1、JSON.parse()
JSON.parse()方法用于将一个JSON字符串解析为一个JavaScript对象。JSON字符串必须使用双引号包括属性名和字符串值，不能使用单引号或无引号。
语法：

JSON.parse(text, reviver)

参数：

• text: 必须，要转换成JavaScript对象的JSON字符串。
• reviver: 可选，是一个函数，用来在返回之前对所得到的对象执行变换。

示例：

const jsonString = \'"name": "滔Roy", "date": "2023.04.14", "other": [12, "TaoRoy", null, true]\';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 输出：滔Roy
console.log(jsonObject.date); // 输出：2023.04.14
console.log(jsonObject.other); // 输出：[12, "TaoRoy", null, true]

2、JSON.stringify()
JSON.stringify()方法用于将JavaScript对象转换为JSON字符串。JSON.stringify()可以接收3个参数，其中前两个是必选参数，第三个是可选的。
语法：

JSON.stringify(value, replacer, space)

参数：

• value: 必须，要转换成JSON字符串的JavaScript对象。
• replacer: 可选，是一个函数或数组，用于控制序列化过程中对象的哪些属性被包含在JSON字符串中。
• space: 可选，用于控制缩进，可以是一个数字或字符串。

示例：

const jsonObject =  //对象
"name":"滔Roy",
"date":"2023.04.14",
"other":[12,"TaoRoy",null,true] //数组
;

const jsonString = JSON.stringify(jsonObject);
console.log(jsonString);   // 输出："name":"滔Roy","date":“2023.04.14”,"other":[12,"TaoRoy",null,true]

// 使用replacer参数过滤掉other属性
const jsonString2 = JSON.stringify(jsonObject, ["name", "date"]);
console.log(jsonString2);
// 输出："name":"滔Roy","date":“2023.04.14”

// 使用replacer参数将值转换为大写
const jsonString3 = JSON.stringify(jsonObject, (key, value) => 
if (typeof value === "string") 
return value.toUpperCase();

return value;
);
console.log(jsonString3);  // 输出："name":"TAOROY","date":"2023.04.14","other":[12,"TAOROY",2023,true]

// 使用space参数增加缩进
const jsonString4 = JSON.stringify(jsonObject, null, 2);
console.log(jsonString4);
// 输出：
//
// "name": "TaoRoy",
// "date": "2023.04.14",
// "other": [
// 12,
// "TaoRoy",
// 2023,
// true
// ]
//

注意：JSON.stringify()方法只能序列化可枚举的自有属性。如果要序列化一个对象的原型属性和方法，需要使用自定义的序列化函数。

 

 

创建时间：2023.04.14　　更新时间：

博客园 滔Roy https://www.cnblogs.com/guorongtao 希望内容对你有所帮助，谢谢！

javascript pass de props par navlink

import React, {Component} from 'react';
import NavLink from "react-router-dom/es/NavLink";
import Info from "./Info";

class Display2 extends Component {
    state = {
        personne:[],
    };

object = (people) => {
    this.setState({personne:people});
    console.log(people);
};

    render() {
        return (
            <div>
                <div className="row">
                    {this.props.peoples
                        .filter(people =>  people.name.includes(this.props.valeur))
                        .map((people, index) => (
                            <div className="card col-sm-3 d-flex justify-content-around" key={index}>
                                <img className="card-img-top shadow-lg p-3 mb-5 bg-white rounded "
                                     width={250}
                                     height={400}
                                     src={people.image}
                                     alt="#"
                                />
                                    <div className="card-body">
                                        <h5 className="card-title">{people.name}</h5>
                                        <NavLink
                                            exact to={{pathname:"/Info",state:{personne:people}}}>
                                            <a href="#" className="btn btn-dark" onClick={()=>this.object(people)}>Plus info</a>
                                        </NavLink>

                                    </div>
                            </div>
                        ))}
            </div>
            </div>
        );
    }
}

export default Display2;

import React, {Component} from 'react';
import {NavLink, Link} from "react-router-dom";
import {InputGroup, InputGroupAddon, Input} from 'reactstrap';
import {ListGroup, ListGroupItem} from 'reactstrap';
import "./NavigationAll.css"
import axios from "axios"

class NavigationAll extends Component {
    state = {
        filter: "",
        allContact: [],
        contact: []
    };
    retrieveData = async () => {
        const url = "/contacts";
        const data = await axios.get(`${url}`);
        this.setState({allContact: data.data.contact})

    };

    componentDidMount() {
        this.retrieveData();
    }

    handleChange = (e) => {
        this.setState({[e.target.name]: e.target.value})
    };

    contact = (contact) => {
        this.setState({contact : contact})
    }

    render() {
        return (
            <div>
                <div className="nav">
                    <div>
                        <InputGroup>
                            <InputGroupAddon addonType="prepend">Search</InputGroupAddon>
                            <Input placeholder="username" onChange={this.handleChange} name="filter"
                                   value={this.state.filter}/>
                        </InputGroup>
                    </div>
                    <div className="icone">
                        <NavLink to="/contact">
                            <i className="fas fa-plus"></i>
                        </NavLink>
                    </div>
                </div>

                <div>
                    {
                        this.state.allContact.filter(contact => contact.firstname.includes(this.state.filter))
                            .map(contact => {
                                return (
                                    <ListGroup>
                                        <ListGroupItem className="box">

                                            <div className="imgContact">
                                                <img src="https://via.placeholder.com/100" alt=""/>
                                            </div>

                                            <div className="boxContent">

                                                <div className="contentContact">
                                                    {contact.firstname}
                                                    {contact.lastname}
                                                </div>

                                            </div>
                                            <div className="iconeArrow" onClick={() => this.contact(contact)}>
                                                <NavLink to={{pathname:"/details",state:{contact:contact}}}>
                                                    <i className="fas fa-arrow-circle-right"></i>
                                                </NavLink>
                                            </div>
                                        </ListGroupItem>
                                    </ListGroup>
                                )
                            })
                    }
                </div>

            </div>
        );
    }
}


export default NavigationAll;